/*---------- SP Style ----------*/

@charset "utf-8";

@import url('//fonts.googleapis.com/css?family=Noto+Sans+JP');

/*=================================================
	ResetCSS
 =================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}

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

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

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

a {
	color: #FFF;
	text-decoration: none;
}

/*=================================================
	CommonCSS
 =================================================*/

.clear {
	display: block;
	clear: both;
	content: "";
}

.onlySp {
	display: block;
}

.onlyPc {
	display: none;
}

.brPc { 
	display: none;
}

.brSp {
	display: block;
}

.hideSp {
	display: none;
}

.letSpac {
	letter-spacing: -5px;
}

/*=================================================
	StyleCSS
 =================================================*/

html, body {
	height: 100%;
}

body {
	-webkit-text-size-adjust: 100%;
	background: #333333;
	font-family: 'Noto Sans JP', 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}

/*---------- Loading ----------*/

@media all {

.loading {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	width: 100%;
	height: 100%;
}

.loading__logo {
	position: absolute;
	top: -120px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	width: 466px;
	height: 136px;
	margin: auto;
}

.loading__logo.loaded {
	animation: loadingLogoLoaded 0.6s ease-out 0s 1 normal both;
}

@keyframes loadingLogoLoaded {
	0% { filter: blur( 0 ); opacity: 1; }
	100% { filter: blur( 10px ); opacity: 0; }
}

.loading__logo img {
	width: 466px;
	height: 136px;
}

.loading__txt {
	position: absolute;
	top: 120px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	width: 228px;
	height: 34px;
	margin: auto;
	-webkit-animation: loadingTxt 0.8s ease-out 0s infinite alternate both;
	animation: loadingTxt 0.8s ease-out 0s infinite alternate both;
}

@-webkit-keyframes loadingTxt {
	0% { opacity: 0.2; }
	100% { opacity: 1; }
}

@keyframes loadingTxt {
	0% { opacity: 0.2; }
	100% { opacity: 1; }
}

.loading__txt img {
	width: 228px;
	height: 34px;
}

.loading__txt.loaded {
	animation: loadingTxtLoaded 0.5s ease-out 0s 1 normal both;
}

@keyframes loadingTxtLoaded {
	0% { transform: scale( 1, 1 ) rotate( 0deg ); top: 120px; }
	100% { transform: scale( 0, 2 ) rotate( 90deg ); top: 0; }
}

.loading__line {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	width: 1px;
	height: 1px;
	margin: auto;
	background: #FFFFFF;
	animation: loadingLine 0.6s ease-out 0s 1 normal both;
}

@keyframes loadingLine {
	0% { height: 1px; }
	100% { height: 100vh; }
}

.loading__line.loaded {
	display: block;
}

.loading__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.loading__bgTop {
	position: absolute;
	top: 0;
	left: 0;
	width: 51%;
	height: 100%;
	height: 100vh;
	background: #000000;
}

.loading__bgTop.loaded {
	animation: loadingBgTop 0.5s cubic-bezier(.71,.15,.6,.61) 0s 1 normal both;
}

@keyframes loadingBgTop {
	0% { transform: translateX( 0 ); }
	100% { transform: translateX( -100% ); }
}

.loading__bgBottom {
	position: absolute;
	top: 0;
	right: 0;
	width: 51%;
	height: 100%;
	background: #000000;
}

.loading__bgBottom.loaded {
	animation: loadingBgBottom 0.5s cubic-bezier(.71,.15,.6,.61) 0s 1 normal both;
}

@keyframes loadingBgBottom {
	0% { transform: translateX( 0 ); }
	100% { transform: translateX( 100% ); }
}

} /* / @media all */

.loadingGp {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	width: 100%;
	height: 100%;
}

.loadingGp__logo {
	position: absolute;
	top: -120px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	width: 466px;
	height: 136px;
	margin: auto;
	/*animation: loadingGpLogo 0.7s ease-out 0s 1 normal both;*/
}

@keyframes loadingGpLogo {
	0% { transform: scale( 1.05 ); }
	100% { transform: scale( 1 ); }
}

.loadingGp__logo.loaded {
	animation: loadingGpLoaded 0.5s ease-out 0s 1 normal both;
}

.loadingGp__logo img {
	width: 466px;
	height: 136px;
}

.loadingGp__txt {
	position: absolute;
	top: 120px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	width: 228px;
	height: 34px;
	margin: auto;
	animation: loadingGpTxt 0.8s ease-out 0s infinite alternate both;
}

@keyframes loadingGpTxt {
	0% { opacity: 0.2; }
	100% { opacity: 1; }
}

.loadingGp__txt img {
	width: 228px;
	height: 34px;
}

.loadingGp__txt.loaded {
	animation: loadingGpLoaded 0.5s ease-out 0s 1 normal both;
}

.loadingGp__bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background: #000000;
}

.loadingGp__bg.loaded {
	animation: loadingGpLoaded 0.5s ease-out 0s 1 normal both;
}

@keyframes loadingGpLoaded {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

/*---------- Header ----------*/

header {
	position: fixed;
	top: 480px;
	right: 10px;
	bottom: 0;
	z-index: 900;
	width: 50px;
	height: 262px;
	margin: auto;
	transform: translateY( 0 ) !important;
	opacity: 1 !important;
}

.header__snsShare {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 50px;
	height: 262px;
}

.header__snsShare__twitter a {
	display: block;
	width: 48px;
	height: 40px;
	margin: 0 0 0 1px;
	background: url( https://precatus.com/assets/img/common/footer_tw.png ) no-repeat center top;
	background-size: 48px 40px;
}

.header__snsShare__line a {
	display: block;
	width: 48px;
	height: 46px;
	margin: 35px 0 0;
	background: url( https://precatus.com/assets/img/common/footer_line.png ) no-repeat center top;
	background-size: 48px 46px;
}

.header__snsShare__facebook a {
	display: block;
	width: 48px;
	height: 48px;
	margin: 35px 0 0;
	background: url( https://precatus.com/assets/img/common/footer_fb.png ) no-repeat center top;
	background-size: 48px 48px;
}

.header__snsShare__youtube a {
	display: block;
	width: 49px;
	height: 49px;
	margin: 35px 0 0;
	background: url( https://precatus.com/assets/img/common/footer_yt.png ) no-repeat center top;
	background-size: 49px 49px;
}

.twitterWrap {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1301;
	width: 200px;
	height: 130px;
	overflow: hidden;
}

.twitterWrap__btn {
	position: absolute;
	top: -96px;
	right: 0;
	width: 199px;
	height: 211px;
	background: url( https://precatus.com/assets/img/sp/top/nav_twitter.png ) no-repeat center top;
	transition: all 0.1s ease-out;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}

.twitterWrap__btn.open {
	background: url( https://precatus.com/assets/img/sp/top/nav_twitter_close.png ) no-repeat center top;
	transition: all 0.6s ease-out;
}

.btnTwSp.active {
	transform: translateY( 10px );
	transition: all 0.1s ease-out;
}

.btnSp.active {
	transform: scale( 0.94 );
	transition: all 0.1s ease-out;
}

.gloNavSp {
	position: relative;
}

.gloNavSp__btnTop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
	width: 750px;
	height: 130px;
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ), rgba( 0, 0, 0, 0 ) );
}

.gloNavSp__btnTop a {
	display: block;
	width: 300px;
	height: 86px;
	margin: 10px 0 0 10px;
	background: url( ../../img/common/loading_logo.png ) no-repeat center top;
	background-size: 300px 86px;
}

.gloNavSp__btn {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1500;
	width: 80px;
	height: 80px;
	margin: auto;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}

.gloNavSp__btn::before {
	display: block;
	position: absolute;
	top: 0;
	right: -60px;
	bottom: 0;
	z-index: 0;
	width: 150px;
	height: 150px;
	margin: auto;
	background: url( https://precatus.com/assets/img/sp/top/bg_menu_btn.png ) no-repeat center top;
	background-size: 150px 150px;
	content: "";
	transition: all 0.2s ease-out;
}

.gloNavSp__btn.active::before {
	width: 160px;
	height: 160px;
	background-size: 160px 160px;
}

.gloNavSp__btn::after {
	display: block;
	position: absolute;
	top: 0;
	right: -11px;
	bottom: 0;
	z-index: 0;
	width: 50px;
	height: 20px;
	margin: auto;
	content: "MENU";
	color: #FFF;
	text-align: center;
	opacity: 1;
	transform: rotate( -90deg );
	transition: all 0.2s ease-out;
}

.gloNavSp__btn.active::after {
	opacity: 0;
}

.gloNavSp__btn span:nth-child( 1 ) {
	display: block;
	position: absolute;
	/*top: -30px;*/
	top: 0;
	/*left: -33px;*/
	left: -53px;
	right: 0;
	bottom: 0;
	z-index: 10;
	width: 4px;
	height: 30px;
	margin: auto;
	background: #FFFFFF;
	border-radius: 10px;
	transition: all 0.2s ease-out;
}

.gloNavSp__btn.active span:nth-child( 1 ) {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transform: rotate( -45deg );
}

.gloNavSp__btn span:nth-child( 2 ) {
	display: block;
	position: absolute;
	top: 0;
	/*left: 0;*/
	left: -20px;
	right: 0;
	bottom: 0;
	z-index: 10;
	width: 4px;
	height: 60px;
	margin: auto;
	background: #FFFFFF;
	border-radius: 10px;
	transition: all 0.2s ease-out;
}

.gloNavSp__btn.active span:nth-child( 2 ) {
	height: 70px;
	transform: rotate( -45deg );
}

.gloNavSp__btn span:nth-child( 3 ) {
	display: block;
	position: absolute;
	/*top: -10px;*/
	top: 0;
	left: 0;
	/*right: -33px;*/
	right: -13px;
	bottom: 0;
	z-index: 10;
	width: 4px;
	height: 50px;
	margin: auto;
	background: #FFFFFF;
	border-radius: 10px;
	transition: all 0.2s ease-out;
}

.gloNavSp__btn.active span:nth-child( 3 ) {
	top: 0;
	/*left: 0;*/
	left: -20px;
	right: 0;
	bottom: 0;
	height: 70px;
	transform: rotate( 45deg );
}

.gloNavSp__inr {
	visibility: hidden;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1400;
	width: 100%;
	height: 100%;
	background: rgba( 0, 0, 0, 0.85 );
	opacity: 0;
	transform: scale( 1.1 );
	transition: all 0.2s ease-out;
}

.gloNavSp__inr.show {
	visibility: visible;
	opacity: 1;
	transform: scale( 1 );
}

.gloNavSp__inr__btnTop a {
	display: block;
	width: 392px;
	height: 56px;
	margin: 0 auto 60px;
	background: url( https://precatus.com/assets/img/sp/top/nav_top.png ) no-repeat center top;
}

.gloNavSp__inr__btnNews a {
	position: relative;
	display: block;
	width: 392px;
	height: 56px;
	margin: 0 auto 60px;
	background: url( https://precatus.com/assets/img/sp/top/nav_news.png ) no-repeat center top;
}

.gloNavSp__inr__btnStory a {
	position: relative;
	display: block;
	width: 392px;
	height: 56px;
	margin: 0 auto 60px;
	background: url( https://precatus.com/assets/img/sp/top/nav_story.png ) no-repeat center top;
}

.gloNavSp__inr__btnCharacter a {
	position: relative;
	display: block;
	width: 392px;
	height: 56px;
	margin: 0 auto 60px;
	background: url( https://precatus.com/assets/img/sp/top/nav_character.png ) no-repeat center top;
}

.gloNavSp__inr__btnCharacter a::before {
	display: block;
	position: absolute;
	top: -34px;
	left: 0;
	right: 0;
	width: 120px;
	height: 26px;
	margin: auto;
	background: url( ../../img/common/icon_update.png ) no-repeat center top;
	background-size: 120px 26px;
	content: "";
	animation: iconNewUpdate 1s ease-out 0s infinite alternate both;
}

.gloNavSp__inr__btnSystem a {
	position: relative;
	display: block;
	width: 392px;
	height: 56px;
	margin: 0 auto 60px;
	background: url( https://precatus.com/assets/img/sp/top/nav_system.png ) no-repeat center top;
}

.gloNavSp__inr__btnMovie a {
	position: relative;
	display: block;
	width: 392px;
	height: 56px;
	margin: 0 auto 60px;
	background: url( https://precatus.com/assets/img/sp/top/nav_movie.png ) no-repeat center top;
}

.gloNavSp__inr__btnSpecial a {
	position: relative;
	display: block;
	width: 392px;
	height: 56px;
	margin: 0 auto;
	background: url( https://precatus.com/assets/img/sp/top/nav_special.png ) no-repeat center top;
}

.gloNavSp__inr__btnSpecial a::before {
	display: block;
	position: absolute;
	top: -34px;
	left: 0;
	right: 0;
	width: 120px;
	height: 26px;
	margin: auto;
	background: url( ../../img/common/icon_update.png ) no-repeat center top;
	background-size: 120px 26px;
	content: "";
	animation: iconNewUpdate 1s ease-out 0s infinite alternate both;
}

@keyframes iconNewUpdate {
	0% { opacity: 0.3; }
	100% { opacity: 1; }
}

/*---------- Main ----------*/

.firstView {
	position: relative;
	z-index: 10;
	width: 750px;
	height: 1078px;
	margin: auto 0;
	overflow: hidden;
}

.firstView::after {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: url( https://precatus.com/assets/img/sp/top/line_01_head.png ) repeat-x center top;
	content: "";
}

.firstView__logo {
	display: none;
	position: absolute;
	bottom: 200px;
	left: 0;
	right: 0;
	z-index: 10;
	width: 500px;
	height: 152px;
	margin: 0 auto;
	background: url( ../../img/pc/top/logo.png ) no-repeat center top;
	background-size: 500px 152px;
}

.firstView__logo.show {
	display: block;
	animation: firstViewLogo 0.2s ease-out 0.5s 1 normal both;
}

@keyframes firstViewLogo {
	0% { transform: scale( 1.2 ); opacity: 0; }
	100% { transform: scale( 1 ); opacity: 1; }
}

.firstView__storeLink {
	position: absolute;
	bottom: 60px;
	left: 0;
	right: 0;
	z-index: 10;
	margin: 0 auto;
	width: 590px;
	height: 92px;
}

.firstView__storeLink ul {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
}

.firstView__storeLink__appStore a {
	display: block;
    width: 252px;
    height: 92px;
    background: url( https://precatus.com/assets/img/sp/top/badge_appstore.png ) no-repeat center top;
	background-size: 252px 92px;
}

.firstView__storeLink__googlePlay a {
	display: block;
    width: 310px;
    height: 92px;
	margin: 0 0 0 28px;
    background: url( https://precatus.com/assets/img/sp/top/badge_googleplay.png ) no-repeat center top;
	background-size: 310px 92px;
}

.firstView__bg {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: 750px;
	height: 1078px;
	background: url( ../../img/pc/top/bg_dot.png ) repeat center top;
}

.firstView__mainvisualChara {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 750px;
	height: 1078px;
	background: url( https://precatus.com/assets/img/sp/top/mainvisual_chara_01.png ) no-repeat center top;
	transform-origin: center bottom;
	animation: mainvisualChara 1.3s linear 0s infinite alternate both;
}

@keyframes mainvisualChara {
	0% { transform: scaleY( 1 ) translateY( 2px ); }
	100% { transform: scaleY( 1.002 ) translateY( 0px ); }
}

.firstView__mainvisual {
	display: block;
	position: relative;
	bottom: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 1078px;
	background: url( https://precatus.com/assets/img/sp/top/mainvisual_01.jpg ) no-repeat center top;
}


.firstView__particle {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 750px;
	height: 1078px;
}

.firstView__particle01 {
	position: absolute;
	top: 0;
	left: 0;
	width: 750px;
	height: 1078px;
	background: url( https://precatus.com/assets/img/common/particle/particle_01.png ) no-repeat center top;
	animation: firstViewParticle01 15s linear 0s infinite normal both;
}

@keyframes firstViewParticle01 {
	0% { background-position: 10% 500px; background-size: 100%; opacity: 0.2; transform: rotate( 0deg ) scale( 1, 1 ); }
	50% { background-position: 10% 150px; background-size: 200%; opacity: 1; }
	100% { background-position: 10% -200px; background-size: 300%; opacity: 0; transform: rotate( -40deg ) scale( 0.8, 0.2 ); }
}

.firstView__particle02 {
	position: absolute;
	top: 0;
	left: 0;
	width: 750px;
	height: 1078px;
	background: url( https://precatus.com/assets/img/common/particle/particle_02.png ) no-repeat center top;
	animation: firstViewParticle02 15s linear 5s infinite normal both;
}

@keyframes firstViewParticle02 {
	0% { background-position: 70% 500px; background-size: 100%; opacity: 0.2; transform: rotate( 0deg ); }
	50% { background-position: 70% 300px; background-size: 200%; opacity: 1; }
	100% { background-position: 70% 100px; background-size: 300%; opacity: 0; transform: rotate( -20deg ); }
}

.firstView__particle03 {
	position: absolute;
	top: 0;
	left: 0;
	width: 750px;
	height: 1078px;
	background: url( https://precatus.com/assets/img/common/particle/particle_03.png ) no-repeat center top;
	animation: firstViewParticle03 15s linear 10s infinite normal both;
}

@keyframes firstViewParticle03 {
	0% { background-position: 50% 1000px; background-size: 100%; opacity: 0.2; transform: rotate( 0deg ); }
	50% { background-position: 50% 700px; background-size: 150%; opacity: 1; }
	100% { background-position: 50% 600px; background-size: 100%; opacity: 0; transform: rotate( -5deg ); }
}

.firstView__videoBg {
	display: none;
	position: absolute;
    top: 0;
    left: 0;
	z-index: -10;
	width: 100%;
	min-width: 750px;
	min-height: 1078px;
	transform: translateY( -130px );
}

.mainContents {
	width: 750px;
	margin: 0 auto;
	padding: 1px 0;
	/*background: url( https://precatus.com/assets/img/pc/top/bg_01.jpg ) no-repeat center top;
	background-size: cover;*/
}

.mainContents::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/top/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.mainContents__inr {
	position: relative;
	width: 750px;
	margin: 0 auto;
	padding: 1px 0;
}

.mainContents__campaign {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 750px;
	margin: auto;
}

.mainContents__campaign__heading {
	display: none;
	width: 500px;
	height: 43px;
	margin: 0 auto 20px;
	background: url( ../../img/pc/top/heading_campaign.png ) no-repeat center top;
	background-size: 500px 43px;
}

.mainContents__campaign__inr {
	width: 750px;
}

.mainContents__campaign__inr::after {
	display: block;
	clear: both;
	content: "";
}

.mainContents__campaign__bnr01 {
	width: 750px;
	height: 205px;
	margin: 0 auto 10px;
}

.mainContents__campaign__bnr01 img {
	width: 750px;
	height: 205px;
}

.mainContents__campaign__bnr02 {
	float: left;
	width: 370px;
	height: 206px;
}

.mainContents__campaign__bnr02 img {
	width: 370px;
	height: 206px;
}

.mainContents__campaign__bnr03 {
	float: right;
	width: 370px;
	height: 206px;
}

.mainContents__campaign__bnr03 img {
	width: 370px;
	height: 206px;
}

.mainContents__news {
	position: absolute;
	top: 436px;
	left: 0;
	right: 0;
	width: 730px;
	margin: auto;
}

.mainContents__news__inr {
	width: 730px;
	height: 610px;
	padding: 1px 0;
	background: url( https://precatus.com/assets/img/sp/top/frame_news.png ) no-repeat center top;
}

.mainContents__news__timeline {
	width: 690px;
    height: 490px;
    margin: 95px auto 0 23px;
    color: #FFF;
    text-align: left;
	overflow-y: auto;
}

.mainContents__news__timeline li {
	width: 100%;
	margin: 0 auto 20px;
	padding: 0 0 15px;
	list-style-type: none;
	border-bottom: 1px dashed #CCC;
}

.mainContents__news__timeline li:last-child {
	border-bottom: none;
}

.mainContents__news__timeline li p.date {
	margin: 0 0 15px;
	font-size: 3vw;
	color: #CCC;
}

.mainContents__news__timeline li p.subj {
	font-size: 3.5vw;
	line-height: 1.5;
	text-decoration: underline;
}

.mainContents__news__heading {
	position: absolute;
	top: 28px;
	left: 0;
	right: 0;
	width: 339px;
	height: 44px;
	margin: auto;
	background: url( https://precatus.com/assets/img/sp/top/heading_news.png ) no-repeat center top;
}

.mainContents__movie {
	width: 750px;
	margin: 1145px auto 110px;
}

.mainContents__movie__heading {
	width: 339px;
	height: 44px;
	margin: 0 auto 40px;
	background: url( https://precatus.com/assets/img/sp/top/heading_movie.png ) no-repeat center top;
}

.mainContents__movie a {
	display: block;
	width: 550px;
	height: 308px;
	margin: 0 auto;
	background: url( ../../img/pc/top/thumb_pv_03.png ) no-repeat center top;
	background-size: 550px 308px;
	transition: all 0.2s ease-out;
}

.mainContents__staff {
	width: 750px;
	margin: 0 auto 100px;
	text-align: center;
	color: #FFF;
	font-size: 3vw;
}

.mainContents__staff__heading {
	width: 339px;
	height: 44px;
	margin: 0 auto 30px;
	background: url( https://precatus.com/assets/img/sp/top/heading_staff.png ) no-repeat center top;
}

.mainContents__staff p {
	padding: 0 20px;
	line-height: 2;
	cursor: default;
}

.mainContents__staff p:last-child {
	margin: 0;
}

.mainContents__cast {
	width: 750px;
	margin: 0 auto 100px;
	text-align: center;
	color: #FFF;
	font-size: 3vw;
}

.mainContents__cast__heading {
	width: 339px;
	height: 44px;
	margin: 0 auto 30px;
	background: url( https://precatus.com/assets/img/sp/top/heading_cast.png ) no-repeat center top;
}

.mainContents__cast p {
	padding: 0 20px;
	line-height: 2;
	cursor: default;
}

.mainContents__cast p:nth-child( 11 ) {
	margin: 0 0 80px;
}

.mainContents__cast p:last-child {
	width: 750px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.scrollIn {
	transition: opacity 1.5s;
	opacity: 0;
}

.scrollIn.active {
	opacity: 1;
}

/*---------- Main NEWS ----------*/

main.news::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/pc/story/bg_story.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.main__newsContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__newsContents__heading {
	display: none;
	width: 600px;
	height: 102px;
	margin: 160px auto 70px;
	background: url( https://precatus.com/assets/img/sp/news/heading_news.png ) no-repeat center top;
	animation: contentsHeading 1s ease-out 1.5s 1 normal both;
}

.main__newsContents__timeline {
	width: 600px;
    margin: 0 auto 100px;
    color: #FFF;
    text-align: left;
}

.main__newsContents__timeline li {
	width: 100%;
	margin: 0 auto 20px;
	padding: 0 0 15px;
	list-style-type: none;
	border-bottom: 1px dashed #CCC;
}

.main__newsContents__timeline li:last-child {
	border-bottom: none;
}

.main__newsContents__timeline li p.date {
	margin: 0 0 15px;
	font-size: 3vw;
	color: #CCC;
}

.main__newsContents__timeline li p.subj {
	font-size: 3.5vw;
	line-height: 1.5;
	text-decoration: underline;
}

.main__newsContents__article {
	width: 600px;
	margin: 0 auto 50px;
}

.main__newsContents__article__heading {
	margin: 0 auto 20px;
	padding: 10px 0;
	color: #FFF;
	text-align: left;
	border-top: 1px dashed #CCC;
	border-bottom: 1px dashed #CCC;
}

.main__newsContents__article__heading p.date {
	line-height: 1.5;
	font-size: 3vw;
	color: #CCC;
}

.main__newsContents__article__heading p.subj {
	font-size: 3.5vw;
	line-height: 1.5;
}

.main__newsContents__article__img {
	width: 600px;
	margin: 0 auto 15px;
}

.main__newsContents__article__img img {
	width: 100%;
}

.main__newsContents__article__txt {
	margin: 0 auto 50px;
	line-height: 1.7;
	font-size: 3vw;
    color: #FFF;
    text-align: left;
}

.main__newsContents__article__snsShare {
	position: relative;
	width: 600px;
	margin: 0 auto;
	padding: 20px 0;
	border-top: 1px dashed #CCC;
	border-bottom: 1px dashed #CCC;
}

.main__newsContents__article__snsShare ul {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.main__newsContents__article__snsShare .txt {
	font-size: 4vw;
	color: #FFF;
}

.main__newsContents__article__snsShare .tw a {
	display: block;
    width: 48px;
    height: 40px;
    margin: 0 0 0 30px;
    background: url( https://precatus.com/assets/img/common/footer_tw.png ) no-repeat center top;
    background-size: 48px 40px;
}

.main__newsContents__article__snsShare .line a {
    display: block;
    width: 48px;
    height: 46px;
    margin: 0 0 0 30px;
    background: url( https://precatus.com/assets/img/common/footer_line.png ) no-repeat center top;
    background-size: 48px 46px;
}

.main__newsContents__article__snsShare .fb a {
	display: block;
    width: 48px;
    height: 48px;
    margin: 0 0 0 35px;
    background: url( https://precatus.com/assets/img/common/footer_fb.png ) no-repeat center top;
    background-size: 48px 48px;
}

.main__newsContents__btnNewsTop a {
	display: block;
	width: 330px;
	height: 62px;
	margin: 0 auto 100px;
	background: url( https://precatus.com/assets/img/sp/news/btn_news_top.png ) no-repeat center top;
}

/*---------- Main STORY ----------*/

main.story::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/pc/story/bg_story.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.main__storyContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__storyContents__heading {
	width: 600px;
	height: 102px;
	margin: 160px auto 70px;
	background: url( https://precatus.com/assets/img/sp/story/heading_story.png ) no-repeat center top;
	animation: contentsHeading 1s ease-out 1.5s 1 normal both;
}

.main__storyContents__txt01 {
	width: 641px;
	height: 102px;
	margin: 0 auto 70px;
	background: url( https://precatus.com/assets/img/sp/story/txt_story_01.png ) no-repeat center top;
}

.main__storyContents__txt02 {
	width: 504px;
	height: 659px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/story/txt_story_02.png ) no-repeat center top;
}

.main__storyContents__txt03 {
	width: 564px;
	height: 647px;
	margin: 0 auto 70px;
	background: url( https://precatus.com/assets/img/sp/story/txt_story_03.png ) no-repeat center top;
}

.main__storyContents__txt04 {
	width: 455px;
	height: 103px;
	margin: 0 auto 100px;
	background: url( https://precatus.com/assets/img/sp/story/txt_story_04.png ) no-repeat center top;
}

/*---------- Main CHARACTER ----------*/

main.character::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( ../../img/pc/character/bg_character.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.main__characterContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__characterContents__heading {
	width: 600px;
	height: 102px;
	margin: 160px auto 70px;
	background: url( https://precatus.com/assets/img/sp/character/heading_character.png ) no-repeat center top;
	animation: contentsHeading 1s ease-out 1.5s 1 normal both;
}

.main__characterContents__worldSelect {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	position: relative;
	width: 680px;
	margin: 0 auto 100px;
}

.worldSelect__vellum a {
	display: block;
	width: 330px;
	height: 330px;
	margin: 0 0 20px;
	background: url( ../../img/sp/character/btn_vellum.png ) no-repeat center top;
	background-size: 330px 330px;
}

.worldSelect__vellum.show a {
	animation: worldSelectSlidein 0.6s ease-out 1.7s 1 normal both;
}

.worldSelect__ordis a {
	display: block;
	width: 330px;
	height: 330px;
	margin: 0 0 20px 20px;
	background: url( ../../img/sp/character/btn_ordis.png ) no-repeat center top;
	background-size: 330px 330px;
}

.worldSelect__ordis.show a {
	animation: worldSelectSlidein 0.6s ease-out 1.8s 1 normal both;
}

.worldSelect__gelida a {
	display: block;
	width: 330px;
	height: 330px;
	margin: 0 0 20px;
	background: url( ../../img/sp/character/btn_gelida.png ) no-repeat center top;
	background-size: 330px 330px;
}

.worldSelect__gelida.show a {
	animation: worldSelectSlidein 0.6s ease-out 1.9s 1 normal both;
}

.worldSelect__paradia a {
	display: block;
	width: 330px;
	height: 330px;
	margin: 0 0 20px 20px;
	background: url( ../../img/sp/character/btn_paradia.png ) no-repeat center top;
	background-size: 330px 330px;
}

.worldSelect__paradia.show a {
	animation: worldSelectSlidein 0.6s ease-out 2s 1 normal both;
}

.worldSelect__arsforma a {
	display: block;
	width: 330px;
	height: 330px;
	margin: 0 0 20px;
	background: url( ../../img/sp/character/btn_arsforma.png ) no-repeat center top;
	background-size: 330px 330px;
}

.worldSelect__arsforma.show a {
	animation: worldSelectSlidein 0.6s ease-out 2.1s 1 normal both;
}

.worldSelect__libbel a {
	display: block;
	width: 330px;
	height: 330px;
	margin: 0 0 20px 20px;
	background: url( ../../img/sp/character/btn_libbel.png ) no-repeat center top;
	background-size: 330px 330px;
}

.worldSelect__libbel.show a {
	animation: worldSelectSlidein 0.6s ease-out 2.2s 1 normal both;
}

.worldSelect__amatsu a {
	display: block;
	width: 330px;
	height: 330px;
	margin: 0 175px;
	background: url( ../../img/sp/character/btn_amatsu.png ) no-repeat center top;
	background-size: 330px 330px;
}

.worldSelect__amatsu.show a {
	animation: worldSelectSlidein 0.6s ease-out 2.3s 1 normal both;
}

@keyframes worldSelectSlidein {
	0% { transform: translateY( -30px ); opacity: 0; }
	100% { transform: translateX( 0 ); opacity: 1; }
}

.main__characterContents__worldSelect li.active {
	animation: worldSelectBtnActive 0.6s ease-out 0.2s 1 normal both;
}

@keyframes worldSelectBtnActive {
	0% { transform: scale( 1 ); }
	25% { transform: scale( 1.3 ); }
	50% { transform: scale( 1 ); opacity: 1; }
	100% { transform: scale( 2.5 ); opacity: 0; }
}

.main__characterContents__worldSelect li.hide01 {
	animation: worldSelectBtnHide01 0.4s ease-out 0s 1 normal both;
}

@keyframes worldSelectBtnHide01 {
	from { transform: translateX( 0 ); opacity: 1; }
	to { transform: translateX( 100% ); opacity: 0; }
}

.main__characterContents__worldSelect li.hide02 {
	animation: worldSelectBtnHide02 0.4s ease-out 0s 1 normal both;
}

@keyframes worldSelectBtnHide02 {
	from { transform: translateY( 0 ); opacity: 1; }
	to { transform: translateY( 100% ); opacity: 0; }
}

.main__characterContents__worldSelect li.hide03 {
	animation: worldSelectBtnHide03 0.4s ease-out 0s 1 normal both;
}

@keyframes worldSelectBtnHide03 {
	from { transform: translateX( 0 ); opacity: 1; }
	to { transform: translateX( -100% ); opacity: 0; }
}

.main__characterContents__worldSelect li.hide04 {
	animation: worldSelectBtnHide04 0.4s ease-out 0s 1 normal both;
}

@keyframes worldSelectBtnHide04 {
	from { transform: translateY( 0 ); opacity: 1; }
	to { transform: translateY( -100% ); opacity: 0; }
}

.main__characterContents__btnCharacterTop a {
	display: block;
	width: 330px;
	height: 62px;
	margin: 0 auto 100px;
	background: url( ../../img/sp/character/btn_character_top.png ) no-repeat center top;
}

.main__characterContents__worldSelect .iconUpdate {
	display: block;
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	width: 200px;
	height: 43px;
	margin: auto;
	background: url( ../../img/common/icon_update.png ) no-repeat center top;
	background-size: 200px 43px;
	content: "";
	animation: iconNewUpdate 1s ease-out 0s infinite alternate both;
}

/*---------- Main CHARACTER - VELLUM ----------*/

main.vellum.onLoad::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/character/vellum/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
	animation: worldBgShow 10s ease-out 0s 1 normal both;
}

.main__vellumContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__vellumContents__heading {
	position: relative;
	width: 450px;
	height: 80px;
	margin: 0 0 50px;
	background: url( https://precatus.com/assets/img/sp/character/vellum/bg_world_name.png ) no-repeat center bottom;
}

.main__vellumContents__heading.show {
	animation: vellumHeading 1s ease-out 1.5s 1 normal both;
}

@keyframes vellumHeading {
	from { transform: translateX( -30px ); opacity: 0; }
	to { transform: translateX( 0 ); opacity: 1; }
}

.main__vellumContents__heading > h2 {
	position: absolute;
    top: 20px;
    left: 10px;
	z-index: 20;
	width: 232px;
	height: 56px;
	background: url( https://precatus.com/assets/img/sp/character/vellum/txt_world_name.png ) no-repeat center bottom;
}

.main__vellumContents__heading > h2.show {
	animation: vellumHeading 1s ease-out 1.7s 1 normal both;
}

.main__vellumContents__heading > h3 {
	position: absolute;
    top: -8px;
    left: 10px;
	z-index: 10;
	width: 356px;
	height: 36px;
	background: url( https://precatus.com/assets/img/sp/character/vellum/txt_world_catchcopy.png ) no-repeat center bottom;
}

.main__vellumContents__heading > h3.show {
	animation: vellumHeading 1s ease-out 1.9s 1 normal both;
}

.main__vellumContents__intro {
	width: 624px;
	height: 442px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/vellum/emblem_world_intro.png ) no-repeat center bottom;
}

.main__vellumContents__intro.show {
	animation: vellumIntro 1.5s ease-out 2.1s 1 normal both;
}

@keyframes vellumIntro {
	from { transform: scale( 1.1 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}

.main__vellumContents__pv a {
	display: block;
	width: 558px;
	height: 92px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/vellum/thumb_pv.png ) no-repeat center top;
	background-size: 558px 92px;
}

.main__vellumContents__pv a.show {
	animation: worldPv 1s ease-out 2.7s 1 normal both;
}

#charaThumbSp {
	width: 568px;
	height: auto;
	margin: 0 auto 50px;
}

.main__vellumContents__charaThumb {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	width: 568px;
	height: auto;
	margin: -30px auto 0;
}

.main__vellumContents__charaThumb.mgSp {
	margin: 0 auto;
}

.main__vellumContents__charaThumb li {
	margin: 0 0 0 10px;
}

.main__vellumContents__charaThumb li:first-child {
	margin: 0;
}

.main__vellumContents__charaThumb li a {
	display: block;
	width: 132px;
	height: 152px;
	opacity: 0.7;
	transition: opacity 0.3s ease-out;
}

.main__vellumContents__charaThumb li a.thumbnail-current {
	opacity: 1;
}

.main__vellumContents__charaThumb li a:first-child {
	margin: 0;
}

.main__vellumContents__charaThumb.lastMg {
	transform: translateX( 0px );
}

.main__vellumContents__inr {
	position: relative;
	width: 750px;
	height: 930px;
	overflow: hidden;
}

.main__vellumContents__charaIntro {
	width: 750px;
	height: 930px;
	margin: 0 auto 20px;
}

.main__vellumContents__charaIntro li {
	width: 750px;
	height: 930px;
}

.charaThumb__lienhard a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_lienhard.png ) no-repeat center top; }
.charaThumb__christia a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_christia.png ) no-repeat center top; }
.charaThumb__sierra a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_sierra.png ) no-repeat center top; }
.charaThumb__elma a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_elma.png ) no-repeat center top; }
.charaThumb__glealf a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_glealf.png ) no-repeat center top; }
.charaThumb__elise a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_elise.png ) no-repeat center top; }
.charaThumb__dieter a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_dieter.png ) no-repeat center top; }
.charaThumb__kevin a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_kevin.png ) no-repeat center top; }
.charaThumb__arun a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_arun.png ) no-repeat center top; }
.charaThumb__patrick a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_patrick.png ) no-repeat center top; }
.charaThumb__gerda a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_gerda.png ) no-repeat center top; }
.charaThumb__travis a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_travis.png ) no-repeat center top; }
.charaThumb__mirva a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_mirva.png ) no-repeat center top; }
.charaThumb__rola a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_rola.png ) no-repeat center top; }
.charaThumb__garavel a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_garavel.png ) no-repeat center top; }
.charaThumb__prim a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_prim.png ) no-repeat center top; }
.charaThumb__liam a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_liam.png ) no-repeat center top; }
.charaThumb__anton a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_anton.png ) no-repeat center top; }
.charaThumb__sido a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_sido.png ) no-repeat center top; }
.charaThumb__vivian a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_vivian.png ) no-repeat center top; }
.charaThumb__george a { background: url( https://precatus.com/assets/img/sp/character/vellum/icon_george.png ) no-repeat center top; }

.charaIntro__lienhard { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_lienhard.png ) no-repeat center top; }
.charaIntro__christia { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_christia.png ) no-repeat center top; }
.charaIntro__sierra { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_sierra.png ) no-repeat center top; }
.charaIntro__elma { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_elma.png ) no-repeat center top; }
.charaIntro__glealf { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_glealf.png ) no-repeat center top; }
.charaIntro__elise { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_elise.png ) no-repeat center top; }
.charaIntro__dieter { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_dieter.png ) no-repeat center top; }
.charaIntro__kevin { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_kevin.png ) no-repeat center top; }
.charaIntro__arun { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_arun.png ) no-repeat center top; }
.charaIntro__patrick { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_patrick.png ) no-repeat center top; }
.charaIntro__gerda { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_gerda.png ) no-repeat center top; }
.charaIntro__travis { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_travis.png ) no-repeat center top; }
.charaIntro__mirva { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_mirva.png ) no-repeat center top; }
.charaIntro__rola { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_rola.png ) no-repeat center top; }
.charaIntro__garavel { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_garavel.png ) no-repeat center top; }
.charaIntro__prim { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_prim.png ) no-repeat center top; }
.charaIntro__liam { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_liam.png ) no-repeat center top; }
.charaIntro__anton { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_anton.png ) no-repeat center top; }
.charaIntro__sido { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_sido.png ) no-repeat center top; }
.charaIntro__vivian { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_vivian.png ) no-repeat center top; }
.charaIntro__george { background: url( https://precatus.com/assets/img/sp/character/vellum/intro_george.png ) no-repeat center top; }

/*---------- Main CHARACTER - ORDIS ----------*/

main.ordis.onLoad::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/character/ordis/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
	animation: worldBgShow 10s ease-out 0s 1 normal both;
}

.main__ordisContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__ordisContents__heading {
	position: relative;
	width: 450px;
	height: 80px;
	margin: 0 0 50px;
	background: url( https://precatus.com/assets/img/sp/character/ordis/bg_world_name.png ) no-repeat center bottom;
}

.main__ordisContents__heading.show {
	animation: ordisHeading 1s ease-out 1.5s 1 normal both;
}

@keyframes ordisHeading {
	from { transform: translateX( -30px ); opacity: 0; }
	to { transform: translateX( 0 ); opacity: 1; }
}

.main__ordisContents__heading > h2 {
	position: absolute;
    top: 20px;
    left: 10px;
	z-index: 20;
	width: 361px;
	height: 55px;
	background: url( https://precatus.com/assets/img/sp/character/ordis/txt_world_name.png ) no-repeat center bottom;
}

.main__ordisContents__heading > h2.show {
	animation: ordisHeading 1s ease-out 1.7s 1 normal both;
}

.main__ordisContents__heading > h3 {
	position: absolute;
    top: -8px;
    left: 10px;
	z-index: 10;
	width: 276px;
	height: 37px;
	background: url( https://precatus.com/assets/img/sp/character/ordis/txt_world_catchcopy.png ) no-repeat center bottom;
}

.main__ordisContents__heading > h3.show {
	animation: ordisHeading 1s ease-out 1.9s 1 normal both;
}

.main__ordisContents__intro {
	width: 611px;
	height: 442px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/ordis/emblem_world_intro.png ) no-repeat center bottom;
}

.main__ordisContents__intro.show {
	animation: ordisIntro 1.5s ease-out 2.1s 1 normal both;
}

@keyframes ordisIntro {
	from { transform: scale( 1.1 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}

.main__ordisContents__pv a {
	display: block;
	width: 558px;
	height: 92px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/ordis/thumb_pv.png ) no-repeat center top;
	background-size: 558px 92px;
}

.main__ordisContents__pv a.show {
	animation: worldPv 1s ease-out 2.7s 1 normal both;
}

.main__ordisContents__charaThumb {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	width: 568px;
	height: auto;
	margin: -30px auto 0;
}

.main__ordisContents__charaThumb.mgSp {
	margin: 0 auto;
}

.main__ordisContents__charaThumb li {
	margin: 0 0 0 10px;
}

.main__ordisContents__charaThumb li:first-child {
	margin: 0;
}

.main__ordisContents__charaThumb li a {
	display: block;
	width: 132px;
	height: 152px;
	opacity: 0.7;
	transition: opacity 0.3s ease-out;
}

.main__ordisContents__charaThumb li a.thumbnail-current {
	opacity: 1;
}

.main__ordisContents__charaThumb li a:first-child {
	margin: 0;
}

.main__ordisContents__charaThumb.lastMg {
	transform: translateX( -72px );
}

.main__ordisContents__inr {
	position: relative;
	width: 750px;
	height: 930px;
	overflow: hidden;
}

.main__ordisContents__charaIntro {
	width: 750px;
	height: 930px;
	margin: 0 auto 20px;
}

.main__ordisContents__charaIntro li {
	width: 750px;
	height: 930px;
}

.charaThumb__ashley a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_ashley.png ) no-repeat center top; }
.charaThumb__ophelia a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_ophelia.png ) no-repeat center top; }
.charaThumb__wolfgang a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_wolfgang.png ) no-repeat center top; }
.charaThumb__william a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_william.png ) no-repeat center top; }
.charaThumb__judith a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_judith.png ) no-repeat center top; }
.charaThumb__judithCos01 a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_judith_cos_01.png ) no-repeat center top; }
.charaThumb__charlotte a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_charlotte.png ) no-repeat center top; }
.charaThumb__charlotteCos01 a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_charlotte_cos_01.png ) no-repeat center top; }
.charaThumb__douglas a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_douglas.png ) no-repeat center top; }
.charaThumb__paul a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_paul.png ) no-repeat center top; }
.charaThumb__nephry a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_nephry.png ) no-repeat center top; }
.charaThumb__tony a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_tony.png ) no-repeat center top; }
.charaThumb__tabatha a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_tabatha.png ) no-repeat center top; }
.charaThumb__julius a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_julius.png ) no-repeat center top; }
.charaThumb__nerga a { background: url( https://precatus.com/assets/img/sp/character/ordis/icon_nerga.png ) no-repeat center top; }

.charaIntro__ashley { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_ashley.png ) no-repeat center top; }
.charaIntro__ophelia { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_ophelia.png ) no-repeat center top; }
.charaIntro__wolfgang { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_wolfgang.png ) no-repeat center top; }
.charaIntro__william { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_william.png ) no-repeat center top; }
.charaIntro__judith { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_judith.png ) no-repeat center top; }
.charaIntro__judithCos01 { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_judith_cos_01.png ) no-repeat center top; }
.charaIntro__charlotte { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_charlotte.png ) no-repeat center top; }
.charaIntro__charlotteCos01 { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_charlotte_cos_01.png ) no-repeat center top; }
.charaIntro__douglas { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_douglas.png ) no-repeat center top; }
.charaIntro__paul { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_paul.png ) no-repeat center top; }
.charaIntro__nephry { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_nephry.png ) no-repeat center top; }
.charaIntro__tony { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_tony.png ) no-repeat center top; }
.charaIntro__tabatha { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_tabatha.png ) no-repeat center top; }
.charaIntro__julius { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_julius.png ) no-repeat center top; }
.charaIntro__nerga { background: url( https://precatus.com/assets/img/sp/character/ordis/intro_nerga.png ) no-repeat center top; }

/*---------- Main CHARACTER - GELIDA ----------*/

main.gelida.onLoad::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/character/gelida/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
	animation: worldBgShow 10s ease-out 0s 1 normal both;
}

.main__gelidaContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__gelidaContents__heading {
	position: relative;
	width: 450px;
	height: 80px;
	margin: 0 0 50px;
	background: url( ../../img/sp/character/gelida/bg_world_name.png ) no-repeat center bottom;
}

.main__gelidaContents__heading.show {
	animation: gelidaHeading 1s ease-out 1.5s 1 normal both;
}

@keyframes gelidaHeading {
	from { transform: translateX( -30px ); opacity: 0; }
	to { transform: translateX( 0 ); opacity: 1; }
}

.main__gelidaContents__heading > h2 {
	position: absolute;
    top: 20px;
    left: 10px;
	z-index: 20;
	width: 259px;
	height: 54px;
	background: url( ../../img/sp/character/gelida/txt_world_name.png ) no-repeat center bottom;
}

.main__gelidaContents__heading > h2.show {
	animation: gelidaHeading 1s ease-out 1.7s 1 normal both;
}

.main__gelidaContents__heading > h3 {
	position: absolute;
    top: -8px;
    left: 10px;
	z-index: 10;
	width: 236px;
	height: 36px;
	background: url( ../../img/sp/character/gelida/txt_world_catchcopy.png ) no-repeat center bottom;
}

.main__gelidaContents__heading > h3.show {
	animation: gelidaHeading 1s ease-out 1.9s 1 normal both;
}

.main__gelidaContents__intro {
	width: 607px;
	height: 442px;
	margin: 0 auto 50px;
	background: url( ../../img/sp/character/gelida/emblem_world_intro.png ) no-repeat center bottom;
}

.main__gelidaContents__intro.show {
	animation: gelidaIntro 1.5s ease-out 2.1s 1 normal both;
}

@keyframes gelidaIntro {
	from { transform: scale( 1.1 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}

.main__gelidaContents__pv a {
	display: block;
	width: 558px;
	height: 92px;
	margin: 0 auto 50px;
	background: url( ../../img/sp/character/gelida/thumb_pv.png ) no-repeat center top;
	background-size: 558px 92px;
}

.main__gelidaContents__pv a.show {
	animation: worldPv 1s ease-out 2.7s 1 normal both;
}

.main__gelidaContents__charaThumb {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	width: 568px;
	height: auto;
	margin: -30px auto 0;
}

.main__gelidaContents__charaThumb.mgSp {
	margin: 0 auto;
}

.main__gelidaContents__charaThumb li {
	margin: 0 0 0 10px;
}

.main__gelidaContents__charaThumb li:first-child {
	margin: 0;
}

.main__gelidaContents__charaThumb li a {
	display: block;
	width: 132px;
	height: 152px;
	opacity: 0.7;
	transition: opacity 0.3s ease-out;
}

.main__gelidaContents__charaThumb li a.thumbnail-current {
	opacity: 1;
}

.main__gelidaContents__charaThumb li a:first-child {
	margin: 0;
}
.main__gelidaContents__charaThumb.lastMg {
	transform: translateX( -72px );
}

.main__gelidaContents__inr {
	position: relative;
	width: 750px;
	height: 930px;
	overflow: hidden;
}

.main__gelidaContents__charaIntro {
	width: 750px;
	height: 930px;
	margin: 0 auto 20px;
}

.main__gelidaContents__charaIntro li {
	width: 750px;
	height: 930px;
}

.charaThumb__serafina a { background: url( ../../img/sp/character/gelida/icon_serafina.png ) no-repeat center top; }
.charaThumb__renato a { background: url( ../../img/sp/character/gelida/icon_renato.png ) no-repeat center top; }
.charaThumb__rozaria a { background: url( ../../img/sp/character/gelida/icon_rozaria.png ) no-repeat center top; }
.charaThumb__rozaria_201904 a { background: url( https://precatus.com/assets/img/sp/character/gelida/icon_rozaria_201904.png ) no-repeat center top; }
.charaThumb__maksim a { background: url( ../../img/sp/character/gelida/icon_maksim.png ) no-repeat center top; }
.charaThumb__valery a { background: url( ../../img/sp/character/gelida/icon_valery.png ) no-repeat center top; }
.charaThumb__luca a { background: url( ../../img/sp/character/gelida/icon_luca.png ) no-repeat center top; }
.charaThumb__rife a { background: url( ../../img/sp/character/gelida/icon_rife.png ) no-repeat center top; }
.charaThumb__sven a { background: url( ../../img/sp/character/gelida/icon_sven.png ) no-repeat center top; }
.charaThumb__mirror a { background: url( ../../img/sp/character/gelida/icon_mirror.png ) no-repeat center top; }
.charaThumb__keet a { background: url( ../../img/sp/character/gelida/icon_keet.png ) no-repeat center top; }
.charaThumb__sania a { background: url( ../../img/sp/character/gelida/icon_sania.png ) no-repeat center top; }
.charaThumb__wilfred a { background: url( https://precatus.com/assets/img/sp/character/gelida/icon_wilfred.png ) no-repeat center top; }
.charaThumb__johann a { background: url( https://precatus.com/assets/img/sp/character/gelida/icon_johann.png ) no-repeat center top; }
.charaThumb__Luca a { background: url( ../../img/sp/character/gelida/icon_luca.png ) no-repeat center top; }
.charaThumb__Valery a { background: url( ../../img/sp/character/gelida/icon_valery.png ) no-repeat center top; }
.charaThumb__diana a { background: url( https://precatus.com/assets/img/sp/character/gelida/icon_diana.png ) no-repeat center top; }

.charaIntro__serafina { background: url( ../../img/sp/character/gelida/intro_serafina.png ) no-repeat center top; }
.charaIntro__renato { background: url( ../../img/sp/character/gelida/intro_renato.png ) no-repeat center top; }
.charaIntro__rozaria { background: url( ../../img/sp/character/gelida/intro_rozaria.png ) no-repeat center top; }
.charaIntro__rozaria_201904 { background: url( https://precatus.com/assets/img/sp/character/gelida/intro_rozaria_201904.png ) no-repeat center top; }
.charaIntro__maksim { background: url( ../../img/sp/character/gelida/intro_maksim.png ) no-repeat center top; }
.charaIntro__valery { background: url( ../../img/sp/character/gelida/intro_valery.png ) no-repeat center top; }
.charaIntro__luca { background: url( ../../img/sp/character/gelida/intro_luca.png ) no-repeat center top; }
.charaIntro__rife { background: url( ../../img/sp/character/gelida/intro_rife.png ) no-repeat center top; }
.charaIntro__sven { background: url( ../../img/sp/character/gelida/intro_sven.png ) no-repeat center top; }
.charaIntro__mirror { background: url( ../../img/sp/character/gelida/intro_mirror.png ) no-repeat center top; }
.charaIntro__keet { background: url( ../../img/sp/character/gelida/intro_keet.png ) no-repeat center top; }
.charaIntro__sania { background: url( ../../img/sp/character/gelida/intro_sania.png ) no-repeat center top; }
.charaIntro__wilfred { background: url( https://precatus.com/assets/img/sp/character/gelida/intro_wilfred.png ) no-repeat center top; }
.charaIntro__johann { background: url( https://precatus.com/assets/img/sp/character/gelida/intro_johann.png ) no-repeat center top; }
.charaIntro__Luca { background: url( ../../img/sp/character/gelida/intro_luca.png ) no-repeat center top; }
.charaIntro__Valery { background: url( ../../img/sp/character/gelida/intro_valery.png ) no-repeat center top; }
.charaIntro__diana { background: url( https://precatus.com/assets/img/sp/character/gelida/intro_diana.png ) no-repeat center top; }

/*---------- Main CHARACTER - PARADIA ----------*/

main.paradia.onLoad::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/character/paradia/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
	animation: worldBgShow 10s ease-out 0s 1 normal both;
}

.main__paradiaContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__paradiaContents__heading {
	position: relative;
	width: 450px;
	height: 80px;
	margin: 0 0 50px;
	background: url( https://precatus.com/assets/img/sp/character/paradia/bg_world_name.png ) no-repeat center bottom;
}

.main__paradiaContents__heading.show {
	animation: paradiaHeading 1s ease-out 1.5s 1 normal both;
}

@keyframes paradiaHeading {
	from { transform: translateX( -30px ); opacity: 0; }
	to { transform: translateX( 0 ); opacity: 1; }
}

.main__paradiaContents__heading > h2 {
	position: absolute;
    top: 20px;
    left: 10px;
	z-index: 20;
	width: 264px;
	height: 55px;
	background: url( https://precatus.com/assets/img/sp/character/paradia/txt_world_name.png ) no-repeat center bottom;
}

.main__paradiaContents__heading > h2.show {
	animation: paradiaHeading 1s ease-out 1.7s 1 normal both;
}

.main__paradiaContents__heading > h3 {
	position: absolute;
    top: -8px;
    left: 10px;
	z-index: 10;
	width: 336px;
	height: 37px;
	background: url( https://precatus.com/assets/img/sp/character/paradia/txt_world_catchcopy.png ) no-repeat center bottom;
}

.main__paradiaContents__heading > h3.show {
	animation: paradiaHeading 1s ease-out 1.9s 1 normal both;
}

.main__paradiaContents__intro {
	width: 583px;
	height: 478px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/paradia/emblem_world_intro.png ) no-repeat center bottom;
}

.main__paradiaContents__intro.show {
	animation: paradiaIntro 1.5s ease-out 2.1s 1 normal both;
}

@keyframes paradiaIntro {
	from { transform: scale( 1.1 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}

.main__paradiaContents__pv a {
	display: block;
	width: 558px;
	height: 92px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/paradia/thumb_pv.png ) no-repeat center top;
	background-size: 558px 92px;
}

.main__paradiaContents__pv a.show {
	animation: worldPv 1s ease-out 2.7s 1 normal both;
}

.main__paradiaContents__charaThumb {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	width: 568px;
	height: auto;
	margin: -30px auto 0;
}

.main__paradiaContents__charaThumb.mgSp {
	margin: 0 auto;
}

.main__paradiaContents__charaThumb li {
	margin: 0 0 0 10px;
}

.main__paradiaContents__charaThumb li:first-child {
	margin: 0;
}


.main__paradiaContents__charaThumb li a {
	display: block;
	width: 132px;
	height: 152px;
	opacity: 0.7;
	transition: opacity 0.3s ease-out;
}

.main__paradiaContents__charaThumb li a.thumbnail-current {
	opacity: 1;
}

.main__paradiaContents__charaThumb li a:first-child {
	margin: 0;
}

.main__paradiaContents__inr {
	position: relative;
	width: 750px;
	height: 930px;
	overflow: hidden;
}

.main__paradiaContents__charaIntro {
	width: 750px;
	height: 930px;
	margin: 0 auto 20px;
}

.main__paradiaContents__charaIntro li {
	width: 750px;
	height: 930px;
}

.charaThumb__ivar a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_ivar.png ) no-repeat center top; }
.charaThumb__shunran a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_shunran.png ) no-repeat center top; }
.charaThumb__roi a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_roi.png ) no-repeat center top; }
.charaThumb__eva a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_eva.png ) no-repeat center top; }
.charaThumb__nina a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_nina.png ) no-repeat center top; }
.charaThumb__cahier a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_cahier.png ) no-repeat center top; }
.charaThumb__duster a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_duster.png ) no-repeat center top; }
.charaThumb__yack a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_yack.png ) no-repeat center top; }
.charaThumb__lani a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_lani.png ) no-repeat center top; }
.charaThumb__geese a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_geese.png ) no-repeat center top; }
.charaThumb__rufus a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_rufus.png ) no-repeat center top; }
.charaThumb__claudio a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_claudio.png ) no-repeat center top; }
.charaThumb__luscinia a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_luscinia.png ) no-repeat center top; }
.charaThumb__nene a { background: url( https://precatus.com/assets/img/sp/character/paradia/icon_nene.png ) no-repeat center top; }

.charaIntro__ivar { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_ivar.png ) no-repeat center top; }
.charaIntro__shunran { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_shunran.png ) no-repeat center top; }
.charaIntro__roi { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_roi.png ) no-repeat center top; }
.charaIntro__eva { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_eva.png ) no-repeat center top; }
.charaIntro__nina { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_nina.png ) no-repeat center top; }
.charaIntro__cahier { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_cahier.png ) no-repeat center top; }
.charaIntro__duster { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_duster.png ) no-repeat center top; }
.charaIntro__yack { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_yack.png ) no-repeat center top; }
.charaIntro__lani { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_lani.png ) no-repeat center top; }
.charaIntro__geese { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_geese.png ) no-repeat center top; }
.charaIntro__rufus { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_rufus.png ) no-repeat center top; }
.charaIntro__claudio { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_claudio.png ) no-repeat center top; }
.charaIntro__luscinia { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_luscinia.png ) no-repeat center top; }
.charaIntro__nene { background: url( https://precatus.com/assets/img/sp/character/paradia/intro_nene.png ) no-repeat center top; }

/*---------- Main CHARACTER - ARS=FORMA ----------*/

main.ars-forma.onLoad::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/character/ars-forma/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
	animation: worldBgShow 10s ease-out 0s 1 normal both;
}

.main__ars-formaContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__ars-formaContents__heading {
	position: relative;
	width: 450px;
	height: 80px;
	margin: 0 0 50px;
	background: url( https://precatus.com/assets/img/sp/character/ars-forma/bg_world_name.png ) no-repeat center bottom;
}

.main__ars-formaContents__heading.show {
	animation: ars-formaHeading 1s ease-out 1.5s 1 normal both;
}

@keyframes ars-formaHeading {
	from { transform: translateX( -30px ); opacity: 0; }
	to { transform: translateX( 0 ); opacity: 1; }
}

.main__ars-formaContents__heading > h2 {
	position: absolute;
    top: 20px;
    left: 10px;
	z-index: 20;
	width: 406px;
	height: 55px;
	background: url( https://precatus.com/assets/img/sp/character/ars-forma/txt_world_name.png ) no-repeat center bottom;
}

.main__ars-formaContents__heading > h2.show {
	animation: ars-formaHeading 1s ease-out 1.7s 1 normal both;
}

.main__ars-formaContents__heading > h3 {
	position: absolute;
    top: -8px;
    left: 10px;
	z-index: 10;
	width: 296px;
	height: 36px;
	background: url( https://precatus.com/assets/img/sp/character/ars-forma/txt_world_catchcopy.png ) no-repeat center bottom;
}

.main__ars-formaContents__heading > h3.show {
	animation: ars-formaHeading 1s ease-out 1.9s 1 normal both;
}

.main__ars-formaContents__intro {
	width: 583px;
	height: 463px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/ars-forma/emblem_world_intro.png ) no-repeat center bottom;
}

.main__ars-formaContents__intro.show {
	animation: ars-formaIntro 1.5s ease-out 2.1s 1 normal both;
}

@keyframes ars-formaIntro {
	from { transform: scale( 1.1 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}

.main__ars-formaContents__pv a {
	display: block;
	width: 558px;
	height: 92px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/ars-forma/thumb_pv.png ) no-repeat center top;
	background-size: 558px 92px;
}

.main__ars-formaContents__pv a.show {
	animation: worldPv 1s ease-out 2.7s 1 normal both;
}

.main__ars-formaContents__charaThumb {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	width: 568px;
	height: auto;
	margin: -30px auto 0;
}

.main__ars-formaContents__charaThumb.mgSp {
	margin: 0 auto;
}

.main__ars-formaContents__charaThumb li {
	margin: 0 0 0 10px;
}

.main__ars-formaContents__charaThumb li:first-child {
	margin: 0;
}

.main__ars-formaContents__charaThumb li a {
	display: block;
	width: 132px;
	height: 152px;
	opacity: 0.7;
	transition: opacity 0.3s ease-out;
}

.main__ars-formaContents__charaThumb li a.thumbnail-current {
	opacity: 1;
}

.main__ars-formaContents__charaThumb li a:first-child {
	margin: 0;
}

.main__ars-formaContents__charaThumb.lastMg {
	transform: translateX( -72px );
}

.main__ars-formaContents__inr {
	position: relative;
	width: 750px;
	height: 930px;
	overflow: hidden;
}

.main__ars-formaContents__charaIntro {
	width: 750px;
	height: 930px;
	margin: 0 auto 20px;
}

.main__ars-formaContents__charaIntro li {
	width: 750px;
	height: 930px;
}

.charaThumb__laciel a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_laciel.png ) no-repeat center top; }
.charaThumb__hugues a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_hugues.png ) no-repeat center top; }
.charaThumb__viola a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_viola.png ) no-repeat center top; }
.charaThumb__albert a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_albert.png ) no-repeat center top; }
.charaThumb__lydia a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_lydia.png ) no-repeat center top; }
.charaThumb__theodore a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_theodore.png ) no-repeat center top; }
.charaThumb__sarah a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_sarah.png ) no-repeat center top; }
.charaThumb__holm a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_holm.png ) no-repeat center top; }
.charaThumb__melaine a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_melaine.png ) no-repeat center top; }
.charaThumb__goran a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_goran.png ) no-repeat center top; }
.charaThumb__pollet a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_pollet.png ) no-repeat center top; }
.charaThumb__noel a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_noel.png ) no-repeat center top; }
.charaThumb__celine a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_celine.png ) no-repeat center top; }
.charaThumb__emilio a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_emilio.png ) no-repeat center top; }
.charaThumb__agnes a { background: url( https://precatus.com/assets/img/sp/character/ars-forma/icon_agnes.png ) no-repeat center top; }


.charaIntro__laciel { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_laciel.png ) no-repeat center top; }
.charaIntro__hugues { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_hugues.png ) no-repeat center top; }
.charaIntro__viola { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_viola.png ) no-repeat center top; }
.charaIntro__albert { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_albert.png ) no-repeat center top; }
.charaIntro__lydia { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_lydia.png ) no-repeat center top; }
.charaIntro__theodore { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_theodore.png ) no-repeat center top; }
.charaIntro__sarah { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_sarah.png ) no-repeat center top; }
.charaIntro__holm { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_holm.png ) no-repeat center top; }
.charaIntro__melaine { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_melaine.png ) no-repeat center top; }
.charaIntro__goran { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_goran.png ) no-repeat center top; }
.charaIntro__pollet { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_pollet.png ) no-repeat center top; }
.charaIntro__noel { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_noel.png ) no-repeat center top; }
.charaIntro__celine { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_celine.png ) no-repeat center top; }
.charaIntro__emilio { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_emilio.png ) no-repeat center top; }
.charaIntro__agnes { background: url( https://precatus.com/assets/img/sp/character/ars-forma/intro_agnes.png ) no-repeat center top; }


/*---------- Main CHARACTER - LIBBEL ----------*/

main.libbel.onLoad::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/character/libbel/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
	animation: worldBgShow 10s ease-out 0s 1 normal both;
}

.main__libbelContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__libbelContents__heading {
	position: relative;
	width: 450px;
	height: 80px;
	margin: 0 0 50px;
	background: url( ../../img/sp/character/libbel/bg_world_name.png ) no-repeat center bottom;
}

.main__libbelContents__heading.show {
	animation: libbelHeading 1s ease-out 1.5s 1 normal both;
}

@keyframes libbelHeading {
	from { transform: translateX( -30px ); opacity: 0; }
	to { transform: translateX( 0 ); opacity: 1; }
}

.main__libbelContents__heading > h2 {
	position: absolute;
    top: 20px;
    left: 10px;
	z-index: 20;
	width: 236px;
	height: 55px;
	background: url( ../../img/sp/character/libbel/txt_world_name.png ) no-repeat center bottom;
}

.main__libbelContents__heading > h2.show {
	animation: libbelHeading 1s ease-out 1.7s 1 normal both;
}

.main__libbelContents__heading > h3 {
	position: absolute;
    top: -8px;
    left: 10px;
	z-index: 10;
	width: 196px;
	height: 37px;
	background: url( ../../img/sp/character/libbel/txt_world_catchcopy.png ) no-repeat center bottom;
}

.main__libbelContents__heading > h3.show {
	animation: libbelHeading 1s ease-out 1.9s 1 normal both;
}

.main__libbelContents__intro {
	width: 556px;
	height: 442px;
	margin: 0 auto 50px;
	background: url( ../../img/sp/character/libbel/emblem_world_intro.png ) no-repeat center bottom;
}

.main__libbelContents__intro.show {
	animation: libbelIntro 1.5s ease-out 2.1s 1 normal both;
}

@keyframes libbelIntro {
	from { transform: scale( 1.1 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}

.main__libbelContents__pv a {
	display: block;
	width: 558px;
	height: 92px;
	margin: 0 auto 50px;
	background: url( ../../img/sp/character/libbel/thumb_pv.png ) no-repeat center top;
	background-size: 558px 92px;
}

.main__libbelContents__pv a.show {
	animation: worldPv 1s ease-out 2.7s 1 normal both;
}

.main__libbelContents__charaThumb {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	width: 568px;
	height: auto;
	margin: -30px auto 0;
}

.main__libbelContents__charaThumb.mgSp {
	margin: 0 auto;
}

.main__libbelContents__charaThumb li {
	margin: 0 0 0 10px;
}

.main__libbelContents__charaThumb li:first-child {
	margin: 0;
}

.main__libbelContents__charaThumb li a {
	display: block;
	width: 132px;
	height: 152px;
	opacity: 0.7;
	transition: opacity 0.3s ease-out;
}

.main__libbelContents__charaThumb li a.thumbnail-current {
	opacity: 1;
}

.main__libbelContents__charaThumb li a:first-child {
	margin: 0;
}

.main__libbelContents__inr {
	position: relative;
	width: 750px;
	height: 930px;
	overflow: hidden;
}

.main__libbelContents__charaIntro {
	width: 750px;
	height: 930px;
	margin: 0 auto 20px;
}

.main__libbelContents__charaIntro li {
	width: 750px;
	height: 930px;
}

.charaThumb__justin a { background: url( ../../img/sp/character/libbel/icon_justin.png ) no-repeat center top; }
.charaThumb__aria a { background: url( ../../img/sp/character/libbel/icon_aria.png ) no-repeat center top; }
.charaThumb__mischa a { background: url( ../../img/sp/character/libbel/icon_mischa.png ) no-repeat center top; }
.charaThumb__brad a { background: url( ../../img/sp/character/libbel/icon_brad.png ) no-repeat center top; }
.charaThumb__rebecca a { background: url( ../../img/sp/character/libbel/icon_rebecca.png ) no-repeat center top; }
.charaThumb__oliver a { background: url( ../../img/sp/character/libbel/icon_oliver.png ) no-repeat center top; }
.charaThumb__clarith a { background: url( ../../img/sp/character/libbel/icon_clarith.png ) no-repeat center top; }
.charaThumb__cedric a { background: url( ../../img/sp/character/libbel/icon_cedric.png ) no-repeat center top; }
.charaThumb__faris a { background: url( ../../img/sp/character/libbel/icon_faris.png ) no-repeat center top; }
.charaThumb__bart a { background: url( ../../img/sp/character/libbel/icon_bart.png ) no-repeat center top; }
.charaThumb__kamila a { background: url( ../../img/sp/character/libbel/icon_kamila.png ) no-repeat center top; }
.charaThumb__nathaniel a { background: url( https://precatus.com/assets/img/sp/character/libbel/icon_nathaniel.png ) no-repeat center top; }

.charaIntro__justin { background: url( ../../img/sp/character/libbel/intro_justin.png ) no-repeat center top; }
.charaIntro__aria { background: url( ../../img/sp/character/libbel/intro_aria.png ) no-repeat center top; }
.charaIntro__mischa { background: url( ../../img/sp/character/libbel/intro_mischa.png ) no-repeat center top; }
.charaIntro__brad { background: url( ../../img/sp/character/libbel/intro_brad.png ) no-repeat center top; }
.charaIntro__rebecca { background: url( ../../img/sp/character/libbel/intro_rebecca.png ) no-repeat center top; }
.charaIntro__oliver { background: url( ../../img/sp/character/libbel/intro_oliver.png ) no-repeat center top; }
.charaIntro__clarith { background: url( ../../img/sp/character/libbel/intro_clarith.png ) no-repeat center top; }
.charaIntro__cedric { background: url( ../../img/sp/character/libbel/intro_cedric.png ) no-repeat center top; }
.charaIntro__faris { background: url( ../../img/sp/character/libbel/intro_faris.png ) no-repeat center top; }
.charaIntro__bart { background: url( ../../img/sp/character/libbel/intro_bart.png ) no-repeat center top; }
.charaIntro__kamila { background: url( ../../img/sp/character/libbel/intro_kamila.png ) no-repeat center top; }
.charaIntro__nathaniel { background: url( https://precatus.com/assets/img/sp/character/libbel/intro_nathaniel.png ) no-repeat center top; }

/*---------- Main CHARACTER - AMATSU ----------*/

main.amatsu.onLoad::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/character/amatsu/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
	animation: worldBgShow 10s ease-out 0s 1 normal both;
}

.main__amatsuContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__amatsuContents__heading {
	position: relative;
	width: 450px;
	height: 80px;
	margin: 0 0 50px;
	background: url( https://precatus.com/assets/img/sp/character/amatsu/bg_world_name.png ) no-repeat center bottom;
}

.main__amatsuContents__heading.show {
	animation: amatsuHeading 1s ease-out 1.5s 1 normal both;
}

@keyframes amatsuHeading {
	from { transform: translateX( -30px ); opacity: 0; }
	to { transform: translateX( 0 ); opacity: 1; }
}

.main__amatsuContents__heading > h2 {
	position: absolute;
    top: 20px;
    left: 10px;
	z-index: 20;
	width: 200px;
	height: 54px;
	background: url( https://precatus.com/assets/img/sp/character/amatsu/txt_world_name.png ) no-repeat center bottom;
}

.main__amatsuContents__heading > h2.show {
	animation: amatsuHeading 1s ease-out 1.7s 1 normal both;
}

.main__amatsuContents__heading > h3 {
	position: absolute;
    top: -8px;
    left: 10px;
	z-index: 10;
	width: 275px;
	height: 37px;
	background: url( https://precatus.com/assets/img/sp/character/amatsu/txt_world_catchcopy.png ) no-repeat center bottom;
}

.main__amatsuContents__heading > h3.show {
	animation: amatsuHeading 1s ease-out 1.9s 1 normal both;
}

.main__amatsuContents__intro {
	width: 619px;
	height: 442px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/amatsu/emblem_world_intro.png ) no-repeat center bottom;
}

.main__amatsuContents__intro.show {
	animation: amatsuIntro 1.5s ease-out 2.1s 1 normal both;
}

@keyframes amatsuIntro {
	from { transform: scale( 1.1 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}

.main__amatsuContents__pv a {
	display: block;
	width: 558px;
	height: 92px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/character/amatsu/thumb_pv.png ) no-repeat center top;
	background-size: 558px 92px;
}

.main__amatsuContents__pv a.show {
	animation: worldPv 1s ease-out 2.7s 1 normal both;
}

.main__amatsuContents__charaThumb {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	width: 568px;
	height: auto;
	margin: -30px auto 0;
}

.main__amatsuContents__charaThumb.mgSp {
	margin: 0 auto;
}

.main__amatsuContents__charaThumb li {
	margin: 0 0 0 10px;
}

.main__amatsuContents__charaThumb li:first-child {
	margin: 0;
}

.main__amatsuContents__charaThumb li a {
	display: block;
	width: 132px;
	height: 152px;
	opacity: 0.7;
	transition: opacity 0.3s ease-out;
}

.main__amatsuContents__charaThumb li a.thumbnail-current {
	opacity: 1;
}

.main__amatsuContents__charaThumb li a:first-child {
	margin: 0;
}

.main__amatsuContents__inr {
	position: relative;
	width: 750px;
	height: 930px;
	overflow: hidden;
}

.main__amatsuContents__charaIntro {
	width: 750px;
	height: 930px;
	margin: 0 auto 20px;
}

.main__amatsuContents__charaIntro li {
	width: 750px;
	height: 930px;
}

.charaThumb__renka a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_renka.png ) no-repeat center top; }
.charaThumb__iori a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_iori.png ) no-repeat center top; }
.charaThumb__mashiro a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_mashiro.png ) no-repeat center top; }
.charaThumb__shin a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_shin.png ) no-repeat center top; }
.charaThumb__himari a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_himari.png ) no-repeat center top; }
.charaThumb__suirei a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_suirei.png ) no-repeat center top; }
.charaThumb__yuzuriha a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_yuzuriha.png ) no-repeat center top; }
.charaThumb__tetsu a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_tetsu.png ) no-repeat center top; }
.charaThumb__wakana a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_wakana.png ) no-repeat center top; }
.charaThumb__hayato a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_hayato.png ) no-repeat center top; }
.charaThumb__sae a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_sae.png ) no-repeat center top; }
.charaThumb__lise a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_lise.png ) no-repeat center top; }
.charaThumb__rasetsu a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_rasetsu.png ) no-repeat center top; }
.charaThumb__kushina a { background: url( https://precatus.com/assets/img/sp/character/amatsu/icon_kushina.png ) no-repeat center top; }

.charaIntro__renka { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_renka.png ) no-repeat center top; }
.charaIntro__iori { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_iori.png ) no-repeat center top; }
.charaIntro__mashiro { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_mashiro.png ) no-repeat center top; }
.charaIntro__shin { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_shin.png ) no-repeat center top; }
.charaIntro__himari { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_himari.png ) no-repeat center top; }
.charaIntro__suirei { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_suirei.png ) no-repeat center top; }
.charaIntro__yuzuriha { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_yuzuriha.png ) no-repeat center top; }
.charaIntro__tetsu { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_tetsu.png ) no-repeat center top; }
.charaIntro__wakana { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_wakana.png ) no-repeat center top; }
.charaIntro__hayato { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_hayato.png ) no-repeat center top; }
.charaIntro__sae { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_sae.png ) no-repeat center top; }
.charaIntro__lise { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_lise.png ) no-repeat center top; }
.charaIntro__rasetsu { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_rasetsu.png ) no-repeat center top; }
.charaIntro__kushina { background: url( https://precatus.com/assets/img/sp/character/amatsu/intro_kushina.png ) no-repeat center top; }

@keyframes worldBgShow {
	from { transform: scale( 1.5 ); }
	to { transform: scale( 1 ); }
}

@keyframes worldPv {
	from { transform: translateY( 30px ); opacity: 0; }
	to { transform: translateY( 0 ); opacity: 1; }
}

.scrollDown {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 60px;
	height: 200px;
	margin: auto;
	opacity: 0;
}

.scrollDown.show {
	transition: opacity 1s ease-out 2.9s;
	opacity: 0;
}

.scrollDown.active {
	transition: opacity 0.5s ease-out 0s;
	opacity: 0;
}

/*.scrollDown span:nth-child( 1 ) {
	display: block;
	width: 62px;
	height: 20px;
	transform: rotate( -90deg );
	color: #FFF;
	font-size: 2vw;
	letter-spacing: 3px;
	white-space: nowrap;
}

.scrollDown span:nth-child( 2 ) {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	margin: auto;
	background: #FFF;
	animation: scrollDown 1.5s ease-in-out 0s infinite alternate both;
}

@keyframes scrollDown {
	0% { height: 1px; }
	100% { height: 150px; }
}*/

.iconSwipe {
	position: absolute;
	top: 0;
	right: 75px;
	bottom: 0;
	z-index: 1000;
	width: 103px;
	height: 84px;
	margin: auto;
	background: url( https://precatus.com/assets/img/common/icon_swipe.png ) no-repeat center top;
}

.iconSwipe.active {
	animation: iconSwipe 2s ease-out 0s 1 normal both;
}

@keyframes iconSwipe {
	0% { transform: translateY( 20px ); opacity: 0; }
	20% { transform: translateX( 0 ) translateY( 0 ); opacity: 1; }
	80% { transform: translateX( -500px ) translateY( 0 ); opacity: 1; }
	100% { transform: translateX( -500px ) translateY( 0 ); opacity: 0; }
}

#charaThumbSp li a {
	position: relative;
}

#charaThumbSp .iconNew {
	display: block;
	position: absolute;
	top: 10px;
	left: 5px;
	width: 73px;
	height: 26px;
	margin: auto;
	background: url( https://precatus.com/assets/img/common/icon_new.png ) no-repeat center top;
	background-size: 73px 26px;
	content: "";
	animation: iconNewUpdate 1s ease-out 0s infinite alternate both;
}

/*---------- Main SYSTEM ----------*/

main.system::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/pc/system/bg_system.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.main__systemContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__systemContents__heading {
	width: 600px;
	height: 102px;
	margin: 160px auto 70px;
	background: url( https://precatus.com/assets/img/sp/system/heading_system.png ) no-repeat center top;
	animation: contentsHeading 1s ease-out 1.5s 1 normal both;
}

.main__systemContents__txt01 {
	width: 604px;
	height: 191px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/system/txt_system_01.png ) no-repeat center top;
}

.main__systemContents__txt02 {
	width: 498px;
	height: 168px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/system/txt_system_02.png ) no-repeat center top;
}

.main__systemContents__img01 {
	width: 550px;
	margin: 0 auto;
}

.main__systemContents__img01__01 {
	width: 550px;
	height: 314px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/system/multi_vellum.png ) no-repeat center top;
	background-size: 550px 314px;
}

.main__systemContents__img01__02 {
	width: 550px;
	height: 314px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/system/multi_ordis.png ) no-repeat center top;
	background-size: 550px 314px;
}

.main__systemContents__img02 {
	width: 550px;
	margin: 0 auto;
}

.main__systemContents__img02__01 {
	width: 550px;
	height: 314px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/system/multi_arsforma.png ) no-repeat center top;
	background-size: 550px 314px;
}

.main__systemContents__img02__02 {
	width: 550px;
	height: 314px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/system/multi_paradia.png ) no-repeat center top;
	background-size: 550px 314px;
}

.main__systemContents__txt03 {
	width: 535px;
	height: 141px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/system/txt_system_03.png ) no-repeat center top;
}

.main__systemContents__txt04 {
	width: 611px;
	height: 348px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/system/txt_system_04.png ) no-repeat center top;
}

.main__systemContents__img03 {
	width: 550px;
	height: 310px;
	margin: 0 auto 100px;
	background: url( https://precatus.com/assets/img/pc/system/battle_img.png ) no-repeat center top;
	background-size: 550px 310px;
}

/*---------- Main MOVIE ----------*/

main.movie::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/pc/movie/bg_movie.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.main__movieContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__movieContents__heading {
	width: 600px;
	height: 102px;
	margin: 160px auto 70px;
	background: url( https://precatus.com/assets/img/sp/movie/heading_movie.png ) no-repeat center top;
	animation: contentsHeading 1s ease-out 1.5s 1 normal both;
}

.main__movieContents__subHeading {
	width: 402px;
	height: 62px;
	line-height: 62px;
	margin: 0 auto 50px;
	background: url( https://precatus.com/assets/img/sp/movie/heading_sub_01.png ) no-repeat center top;
	text-align: center;
	color: #FFF;
	font-size: 3.5vw;
	white-space: nowrap;
}

.main__movieContents__subHeading.active {
	animation: movieSubHeading 0.5s ease-out 0s 1 normal both;
}

@keyframes movieSubHeading {
	0% { transform: translateX( -20px ); opacity: 0; }
	100% { transform: translateX( 0 ); opacity: 1; }
}

.main__movieContents__thumb {
	width: 480px;
	margin: 0 auto 15px;
}

.main__movieContents__thumb h3 {
	width: 480px;
	height: auto;
	margin: 0 0 10px;
	text-align: center;
	color: #FFF;
	font-size: 3.5vw;
	white-space: nowrap;
}

.main__movieContents__thumb a {
	display: block;
	width: 480px;
	height: 270px;
	box-shadow: inset 0 0 0 2px #9e7a51;
}

/*---------- Main MOVIE thumbnail ----------*/
.movie .thumbPv01 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_launch.png ) no-repeat center top; }
.movie .thumbPv02 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_PV_02.png ) no-repeat center top; }
.movie .thumbPv03 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_PV_03.png ) no-repeat center top; }
.movie .thumbWorldPv01 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_world_pv_vellum.png ) no-repeat center top; }
.movie .thumbWorldPv02 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_world_pv_ordis.png ) no-repeat center top; }
.movie .thumbWorldPv03 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_world_pv_gelida.png ) no-repeat center top; }
.movie .thumbWorldPv04 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_world_pv_paradia.png ) no-repeat center top; }
.movie .thumbWorldPv05 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_world_pv_ars-forma.png ) no-repeat center top; }
.movie .thumbWorldPv06 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_world_pv_libbel.png ) no-repeat center top; }
.movie .thumbWorldPv07 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_world_pv_amatsu.png ) no-repeat center top; }
.movie .thumbVoice01 a { background: url( https://precatus.com/assets/img/thumb/movie/thumb_movie_spcm_lienhard.png ) no-repeat center top; }
.movie .thumbVoice02 a { background: url( https://precatus.com/assets/img/thumb/movie/thumb_movie_spcm_ashley.png ) no-repeat center top; }
.movie .thumbVoice03 a { background: url( https://precatus.com/assets/img/thumb/movie/thumb_movie_spcm_serafina.png ) no-repeat center top; }
.movie .thumbVoice04 a { background: url( https://precatus.com/assets/img/thumb/movie/thumb_movie_spcm_ivar.png ) no-repeat center top; }
.movie .thumbVoice05 a { background: url( https://precatus.com/assets/img/thumb/movie/thumb_movie_spcm_laciel.png ) no-repeat center top; }
.movie .thumbVoice06 a { background: url( https://precatus.com/assets/img/thumb/movie/thumb_movie_spcm_justin.png ) no-repeat center top; }
.movie .thumbVoice07 a { background: url( https://precatus.com/assets/img/thumb/movie/thumb_movie_spcm_renka.png ) no-repeat center top; }
.movie .thumbEvent01 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_movie_01.png ) no-repeat center top; }
.movie .thumbEvent02 a { background: url( https://precatus.com/assets/img/thumb/movie/movie_thumb_movie_02.png ) no-repeat center top; }

.main__movieContents ul li:last-child {
	margin-bottom: 50px;
}

.movie .thumbEvent01 a {
	margin-bottom: 100px !important;
}

/*---------- Main SPECIAL ----------*/

main.special::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/special/bg_special.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.main__specialContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__specialContents__heading {
	width: 600px;
	height: 102px;
	margin: 160px auto 70px;
	background: url( https://precatus.com/assets/img/sp/special/heading_special.png ) no-repeat center top;
	animation: contentsHeading 1s ease-out 1.5s 1 normal both;
}

.main__specialContents__inr {
	width: 576px;
	height: auto;
	margin: 0 auto 100px;
}

.main__specialContents__inr li {
	position: relative;
}

.main__specialContents__inr a .arrow {
	display: none;
	position: absolute;
	top: 0;
	left: -65px;
	bottom: 0;
	width: 53px;
	height: 52px;
	margin: auto;
	background: url( https://precatus.com/assets/img/sp/special/arrow.png ) no-repeat center top;
	animation: specialBtnArrow01 0.3s ease-out 0s 1 normal both,
			   specialBtnArrow02 0.6s linear 0.3s 1 normal forwards;
}

.main__specialContents__inr a.arrowOn .arrow {
	display: block;
}

@keyframes specialBtnArrow01 {
	0% { transform: translate( -30px ); opacity: 0; }
	100% { transform: translate( 0 ); opacity: 1; }
}

@keyframes specialBtnArrow02 {
	0% { transform: translate( 0 ); }
	25% { transform: translate( 7px ); }
	50% { transform: translate( 0 ); }
	75% { transform: translate( 7px ); }
	100% { transform: translate( 0 ); }
}

.main__specialContents__btnSpecial01 a {
	display: block;
	width: 576px;
	height: 79px;
	margin: 0 0 0 auto;
	background: url( https://precatus.com/assets/img/sp/special/bnr_special_01.png ) no-repeat center top;
	animation: specialSelectSlideIn 0.6s ease-out 2.4s 1 normal both;
}

.main__specialContents__btnSpecial02 a {
	display: block;
	width: 576px;
	height: 79px;
	margin: 0 0 25px auto;
	background: url( https://precatus.com/assets/img/sp/special/bnr_special_02.png ) no-repeat center top;
	animation: specialSelectSlideIn 0.6s ease-out 2.3s 1 normal both;
}

.main__specialContents__btnSpecial03 a {
	display: block;
	width: 576px;
	height: 79px;
	margin: 0 0 25px auto;
	background: url( https://precatus.com/assets/img/sp/special/bnr_special_03.png ) no-repeat center top;
	animation: specialSelectSlideIn 0.6s ease-out 2.2s 1 normal both;
}

.main__specialContents__btnSpecial04 a {
	display: block;
	width: 576px;
	height: 79px;
	margin: 0 0 25px auto;
	background: url( https://precatus.com/assets/img/sp/special/bnr_special_04.png ) no-repeat center top;
	animation: specialSelectSlideIn 0.6s ease-out 2.1s 1 normal both;
}

.main__specialContents__btnSpecial05 a {
	display: block;
	width: 576px;
	height: 79px;
	margin: 0 0 25px auto;
	background: url( https://precatus.com/assets/img/sp/special/bnr_special_05.png ) no-repeat center top;
	animation: specialSelectSlideIn 0.6s ease-out 2s 1 normal both;
}

.main__specialContents__btnSpecial06 a {
	display: block;
	width: 576px;
	height: 79px;
	margin: 0 0 25px auto;
	background: url( https://precatus.com/assets/img/sp/special/bnr_special_06.png ) no-repeat center top;
	animation: specialSelectSlideIn 0.6s ease-out 1.9s 1 normal both;
}

.main__specialContents__btnSpecial07 a {
	display: block;
	width: 576px;
	height: 79px;
	margin: 0 0 25px auto;
	background: url( https://precatus.com/assets/img/sp/special/bnr_special_07.png ) no-repeat center top;
	animation: specialSelectSlideIn 0.6s ease-out 1.8s 1 normal both;
}

.main__specialContents__btnSpecial08 a {
	display: block;
	width: 576px;
	height: 79px;
	margin: 0 0 25px auto;
	background: url( https://precatus.com/assets/img/sp/special/bnr_special_08.png ) no-repeat center top;
	animation: specialSelectSlideIn 0.6s ease-out 1.7s 1 normal both;
}

@keyframes specialSelectSlideIn {
	0% { transform: translateX( -30px ); opacity: 0; }
	100% { transform: translateX( 0 ); opacity: 1; }
}

.fadeOutOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2000;
	width: 100%;
	height: 100%;
	background: #000;
	animation: fadeOutOverlay 0.5s ease-out 0s 1 normal both;
}

@keyframes fadeOutOverlay {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.main__specialContents__btnSpecialTop a {
	display: block;
	width: 330px;
	height: 62px;
	margin: 0 auto 100px;
	background: url( ../../img/sp/special/btn_special_top.png ) no-repeat center top;
}

.main__downloadContents__heading {
	width: 600px;
	height: 102px;
	margin: 160px auto 70px;
	background: url( https://precatus.com/assets/img/sp/special/heading_download.png ) no-repeat center top;
	animation: contentsHeading 1s ease-out 1.5s 1 normal both;
}

/*---------- Main SPECIAL COMIC ----------*/

main.comic::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/special/comic/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.main__comicContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__comicContents__heading {
	width: 600px;
	height: 154px;
	margin: 160px auto 70px;
	background: url( ../../img/special/comic/heading_comic.png ) no-repeat center top;
	background-size: 600px 154px;
	animation: contentsHeading 1s ease-out 1.5s 1 normal both;
}

.main__comicContents__latest {
	width: 450px;
	height: 335px;
	margin: 0 auto 50px;
}

.main__comicContents__latest a {
	position: relative;
	display: block;
	width: 450px;
	height: 335px;
}

.main__comicContents__latest a::before {
	display: block;
	position: absolute;
	top: -30px;
	left: 0;
	width: 250px;
	height: 80px;
	background: url( ../../img/special/comic/icon_new.png ) no-repeat center top;
	content: "";
}

.main__comicContents__inr {
	width: 600px;
	height: auto;
	margin: 0 auto 40px;
	transform-origin: center 20%;
	opacity: 0;
}

.main__comicContents__inr.show,
.main__comicContents__latest a.show {
	animation: comicInr 1s ease-out 0.7s 1 normal both;
}

@keyframes comicInr {
	0% { transform: translateY( 30px ); opacity: 0; }
	100% { transform: translateY( 0 ); opacity: 1; }
}

.main__comicContents__inr::after {
	content: "";
	display: block;
	clear: both;
}

.main__comicContents__inr li {
	float: left;
	width: 290px;
	height: 216px;
	margin: 0 0 20px 20px;
}

.main__comicContents__inr li:nth-child( 2n+1 ) {
	margin: 0 0 20px 0;
}

.main__comicContents__inr li a {
	display: block;
	width: 290px;
	height: 216px;
}

.main__comicOverlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1900;
	width: 750px;
	height: 100%;
	margin: auto;
	overflow: hidden;
}

.main__comicOverlay span {
	display: block;
	width: 750px;
	height: 100%;
	background: url( https://precatus.com/assets/img/special/comic/bg_overlay.png ) no-repeat center center;
	transform-origin: 50% 50%;
	content: "";
}

.main__comicOverlay.show span {
	animation: comicOverlay 1.2s linear 0.5s 1 normal both;
}

@keyframes comicOverlay {
	0% { transform: scale( 1 ); opacity: 1; }
	50% { transform: scale( 1.5 ); opacity: 1; }
	90% { transform: scale( 7 ); opacity: 0.2; }
	100% { transform: scale( 8 ); opacity: 0; }
}

.main__comicContents__comicImg {
	width: 600px;
	height: auto;
	margin: 0 auto 50px;
}

.main__comicContents__comicImg img {
	width: 600px;
	height: auto;
}

.main__comicContents__comicImg.show {
	animation: comicInr 1s ease-out 0.7s 1 normal both;
}

.main__comicContents__pager {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 600px;
	height: 62px;
	margin: 0 auto 100px;
}

.main__comicContents__pager__btnArrowNext a {
	display: block;
	width: 103px;
	height: 60px;
	background: url( https://precatus.com/assets/img/special/comic/arrow_next.png ) no-repeat center top;
}

.main__comicContents__pager__btnTop a {
	display: block;
	width: 330px;
	height: 62px;
	background: url( https://precatus.com/assets/img/special/comic/btn_comic_top.png ) no-repeat center top;
}

.main__comicContents__pager__btnArrowPrev a {
	display: block;
	width: 103px;
	height: 60px;
	background: url( https://precatus.com/assets/img/special/comic/arrow_prev.png ) no-repeat center top;
}

@keyframes contentsHeading {
	0% { transform: scale( 1.05 ); opacity: 0; }
	100% { transform: scale( 1 ); opacity: 1; }
}

/*---------- Footer ----------*/

footer {
	position: relative;
	width: 750px;
	height: auto;
	padding: 1px 0;
	background: rgba( 0, 0, 0, 1 );
	color: #FFF;
}

footer::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background: url( https://precatus.com/assets/img/sp/top/line_01_foot.png ) repeat-x center top;
	content: "";
}

.footer__storeLink {
	margin: 60px auto 45px;
	width: 590px;
	height: 92px;
}

.footer__storeLink ul {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
}

.footer__storeLink__appStore a {
	display: block;
    width: 252px;
    height: 92px;
    background: url( https://precatus.com/assets/img/sp/top/badge_appstore.png ) no-repeat center top;
	background-size: 252px 92px;
}

.footer__storeLink__googlePlay a {
	display: block;
    width: 310px;
    height: 92px;
	margin: 0 0 0 28px;
    background: url( https://precatus.com/assets/img/sp/top/badge_googleplay.png ) no-repeat center top;
	background-size: 310px 92px;
}

.footer__storeLink__appStore a:hover, .footer__storeLink__googlePlay a:hover {
	opacity: 0.7;
}

.footer__spec {
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 690px;
	margin: 0 auto 40px;
}

.footer__spec__gameIcon {
	width: 190px;
	height: 190px;
	margin: 2px 0 0 28px;
	background: url( ../../img/common/icon_app.png ) no-repeat center top;
	background-size: 190px 190px;
}

.footer__spec__txt {
	width: 440px;
	height: auto;
	text-align: left;
	font-size: 3vw;
	line-height: 1.7;
	cursor: default;
}

.footer__spec__txt p {
	white-space: nowrap;
}

.footer__spec__txt p span {
	opacity: 0;
}

.footer__txt, .footer__copyright {
	margin: 0 auto 30px;
	font-size: 2.5vw;
	text-align: center;
	line-height: 1.7;
	cursor: default;
}

.footer__copyright {
	margin: 0 auto 40px !important;
}

.btnScrollTop {
	position: fixed;
	bottom: 0;
	right: 20px;
	z-index: 997;
	width: 80px;
	height: 80px;
	background: url( ../../img/pc/top/btn_scroll_top.png ) no-repeat center top;
	background-size: 80px 80px;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}

.btnScrollTop.active {
	visibility: visible;
	opacity: 1;
	transform: translateY( -20px );
}

.siteBgm__btnPlay {
	position: fixed;
	/*top: 0; //左寄せ */
	top: -260px;
	/*left: 0.5%; //左寄せ */
	right: 20px;
	bottom: 0;
	z-index: 900;
	margin: auto;
	width: 42px;
	height: 42px;
	cursor: pointer;
	overflow: hidden;
	/*transform: scale(1.7); //左寄せ */
	transform: scale(1.4);
    transform-origin: left center;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}

.siteBgm__btnPlay.play span:nth-child( 1 ) {
	position: absolute;
	bottom: 0;
	left: 6px;
	width: 3px;
	height: 6px;
	background: #FFFFFF;
	animation: btnPlayOn 0.8s ease-out 0s infinite normal both;
}

.siteBgm__btnPlay.play span:nth-child( 2 ) {
	position: absolute;
	bottom: 0;
	left: 15px;
	width: 3px;
	height: 6px;
	background: #FFFFFF;
	animation: btnPlayOn 0.8s ease-out 0.4s infinite normal both;
}

.siteBgm__btnPlay.play span:nth-child( 3 ) {
	position: absolute;
	bottom: 0;
	right: 15px;
	width: 3px;
	height: 6px;
	background: #FFFFFF;
	animation: btnPlayOn 0.8s ease-out 0.2s infinite normal both;
}

.siteBgm__btnPlay.play span:nth-child( 4 ) {
	position: absolute;
	bottom: 0;
	right: 6px;
	width: 3px;
	height: 6px;
	background: #FFFFFF;
	animation: btnPlayOn 0.8s ease-out 0.6s infinite normal both;
}

@keyframes btnPlayOn {
	0% { height: 6px; }
	70% { height: 14px; }
	100% { height: 6px; }
}

.siteBgm__btnPlay.pause span:nth-child( 1 ) {
	position: absolute;
	bottom: 0;
	left: 6px;
	width: 3px;
	background: #FFFFFF;
	animation: btnPlayOff01 0.5s ease-out 0s 1 normal both;
}

.siteBgm__btnPlay.pause span:nth-child( 2 ) {
	position: absolute;
	bottom: 0;
	left: 15px;
	width: 3px;
	background: #FFFFFF;
	animation: btnPlayOff01 0.5s ease-out 0s 1 normal both;
}

.siteBgm__btnPlay.pause span:nth-child( 3 ) {
	position: absolute;
	bottom: 0;
	right: 15px;
	width: 3px;
	background: #FFFFFF;
	animation: btnPlayOff01 0.5s ease-out 0s 1 normal both;
}

.siteBgm__btnPlay.pause span:nth-child( 4 ) {
	position: absolute;
	bottom: 0;
	right: 6px;
	width: 3px;
	background: #FFFFFF;
	animation: btnPlayOff01 0.5s ease-out 0s 1 normal both;
}

@keyframes btnPlayOff01 {
	0% { height: 10px; }
	100% { height: 0px; }
}

.siteBgm__btnPlay.pause span:nth-child( 5 ) {
	position: absolute;
	top: -2px;
	left: 10px;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	margin: auto;
	border-top: 14px solid rgba(0,0,0,0);
	border-left: 14px solid #FFFFFF;
	border-right: 0px solid rgba(0,0,0,0);
	border-bottom: 0px solid rgba(0,0,0,0);
	transform-origin: 40% 50%;
	transform: rotate(45deg);
	animation: btnPlayOff02 0.5s ease-out 0.5s 1 normal both;
}

@keyframes btnPlayOff02 {
	0% { transform: scale( 0.9 ) rotate(45deg); opacity: 0; }
	100% { transform: scale( 1 ) rotate(45deg); opacity: 1; }
}

.siteBgm__btnPlay.pause span:nth-child( 6 ) {
	position: absolute;
	top: 17px;
	left: 14px;
	right: 0;
	bottom: 0;
	width: 10px;
	height: 8px;
	background: #FFF;
	animation: btnPlayOff03 0.5s ease-out 0.5s 1 normal both;
}

.siteBgm__btnPlay.pause span:nth-child( 7 ) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 36px;
	height: 36px;
	margin: auto;
	border: 1px solid #FFF;
	border-radius: 50px;
	transform-origin: 50% 50%;
	animation: btnPlayOff03 0.5s ease-out 0.5s 1 normal both;
}

@keyframes btnPlayOff03 {
	0% { transform: scale( 0.9 ); opacity: 0; }
	100% { transform: scale( 1 ); opacity: 1; }
}

.twitterWindow {
	position: fixed;
	top: 0;
	left: 20px;
	z-index: 1300;
	width: 710px;
	height: 100%;
	//height: 100vh;
	margin: 0 auto;
}

.twitterWindow__lineLt {
	position: absolute;
	top: -320px;
	left: -9px;
	width: 9px;
	height: 1920px;
	background: url( ../../img/common/line_twitter_window_lt.png ) no-repeat center top;
	animation: twitterWindowLineLt 0.6s ease-out 0s 1 normal both;
}

@keyframes twitterWindowLineLt {
	0% { top: 100%; opacity: 0; }
	100% { top: 0%; opacity: 1; }
}

.twitterWindow__lineLt.hide {
	animation: twitterWindowLineLtHide 0.6s ease-out 0s 1 normal both;
}

@keyframes twitterWindowLineLtHide {
	0% { top: 0%; opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

.twitterWindow__lineRt {
	position: absolute;
	bottom: -320px;
	right: -9px;
	width: 9px;
	height: 1920px;
	background: url( ../../img/common/line_twitter_window_rt.png ) no-repeat center top;
	animation: twitterWindowLineRt 0.6s ease-out 0s 1 normal both;
}

@keyframes twitterWindowLineRt {
	0% { bottom: 100%; opacity: 0; }
	100% { bottom: 0%; opacity: 1; }
}

.twitterWindow__lineRt.hide {
	animation: twitterWindowLineRtHide 0.6s ease-out 0s 1 normal both;
}

@keyframes twitterWindowLineRtHide {
	0% { bottom: 0%; opacity: 1; }
	100% { bottom: 100%; opacity: 0; }
}

.twitterWindow__bg {
	width: 710px;
	height: 100%;
	//height: 100vh;
	background: rgba( 0, 0, 0, 0.9 );
	animation: twitterWindowBg 0.6s ease-out 0s 1 normal both;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

@keyframes twitterWindowBg {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.twitterWindow__bg.hide {
	animation: twitterWindowBgHide 0.6s ease-out 0s 1 normal both;
}

@keyframes twitterWindowBgHide {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

#twitter-widget-0 {
	transform: translateX( 2% ) !important;
}

.twitterWindow__btnClose {
	display: none;
	width: 150px;
	height: 150px;
	position: absolute;
	top: 0;
	right: 4px;
	bottom: -85%;
	margin: auto;
	background: url( https://precatus.com/assets/img/common/btn_twitter_close_sp.png ) no-repeat center top;
	background-size: 150px 150px;
	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	transition: all 0.2s ease-out;
	/*animation: twitterWindowBtnClose 0.4s ease-out 0.6s 1 normal both;*/
}

@keyframes twitterWindowBtnClose {
	0% { top: 40px; opacity: 0; }
	100% { top: 0; opacity: 1; }
}

.twitterWindow__btnClose.hide {
	/*animation: twitterWindowBtnCloseHide 0.6s ease-out 0s 1 normal both;*/
}

@keyframes twitterWindowBtnCloseHide {
	0% { top: 0; opacity: 1; }
	20% { top: -100px; }
	80% { top: -150px; opacity: 0.1; }
	100% { top: -300px; opacity: 0; }
}

/*---------- PRIVACYPOLICY ----------*/

main.privacypolicy::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/top/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.main__privacypolicyContents {
	width: 750px;
	height: auto;
	margin: 0 auto;
	padding: 1px 0;
}

.main__privacypolicyContents__heading {
	width: 600px;
	height: 102px;
	margin: 160px auto 70px;
	background: url( https://precatus.com/assets/img/sp/privacypolicy/heading_privacypolicy.png ) no-repeat center top;
	animation: contentsHeading 1s ease-out 1.5s 1 normal both;
}

.main__privacypolicyContents__inr {
	width: 600px;
	margin: 0 auto 100px;
	line-height: 1.5;
    color: #AAA;
    font-size: 3vw;
}

.main__privacypolicyContents__inr h3 {
	color: #FFF;
	font-size: 3.5vw;
}

.main__privacypolicyContents__inr a {
	text-decoration: underline;
}

/*---------- ERROR ----------*/

main.error {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-webkit-justify-content: center;
	justify-content: center;
	width: 750px;
	height: 100%;
}

main.error::before {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	width: 750px;
	height: 100vh;
	background: url( https://precatus.com/assets/img/sp/top/bg.jpg ) no-repeat center top;
	background-size: cover;
	content: "";
}

.error__notfound {
	width: 509px;
	height: 192px;
	margin: 0 auto 70px;
	background: url( https://precatus.com/assets/img/common/error/txt_txt_not_found.png) no-repeat center top;
}

.error__btn {
	width: 143px;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

.error__btn img {
	display: inline-block;
}

.error__btn img:nth-child( 1 ) {
	margin: 0 0 10px;
}