@charset "UTF-8";

/*

**************************************************************************

*	fields eva15 top style.css

**************************************************************************/



/* --------------------------------------------------		override

-------------------------------------------------- */

.l-title {

	padding-top: 2px;

}

.c-h2__title {

	background-color: unset;

}



@media screen and (max-width: 767px) {

.l-title {

	padding-top: 4px;

}

}





/* --------------------------------------------------

		opening

-------------------------------------------------- */



@media screen and (max-width: 767px) {

}





/* --------------------------------------------------

		visual

-------------------------------------------------- */

.visual {

	position: relative;

	overflow: hidden;

	height: 770px;

	background-color: #000000;

}



.visual .u-cts__inner {

	height: 100%;

}

.visual__logo {

	position: absolute;

	z-index: 2;

	top: 230px;

	left: 2.562225475841874%;

	opacity: 0;

}

.visual__text {

	position: absolute;

	z-index: 2;

	top: 540px;

	left: 9.516837481698389%;

	opacity: 0;

}

.visual__image {

	position: absolute;

	bottom: 58px;

	right: -300px;

	width: 760px;

	opacity: 0;

}

.visual_bg {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-image: url(../img/visual_04.png), url(../img/visual_03.jpg);

	background-size: 100px 100px, cover;

	background-position: center center;

	opacity: 0;

}



@media screen and (max-width: 1097px) {



.visual__logo {

	left: 2.562225475841874%;

	width: 61.48148148148148%;

}

.visual__text {

	left: 9.516837481698389%;

	width: 67.40740740740741%;

}

}



@media screen and (max-width: 767px) {

.visual_bg {

	height: 136vw;

	background-image: url(../img/visual_04.png), url(../img/visual_03_sp.jpg);

	background-size: 50px 50px, cover;

}

.visual__logo {

	top: 70.93333333333333vw;

	left: 5.7333333333334%;

	width: 88.53333333333333%;

}

.visual__text {

	top: 88vw;

	left: 11.33333333333333%;

	width: 77.33333333333333%;

}

.visual__image {

	right: 30%;

	bottom: 40%;

	width: 40.6666666666667%;

}

}



/* --------------------------------------------------

		cg

-------------------------------------------------- */

.cg {

	padding: 60px 0;

}

.cg-box {

	display: flex;

	flex-direction: row-reverse;

	justify-content: space-between;

	align-items: center;

	margin: 0 -6.329113924050633%;

}

.cg-box__body {

	width: 37.7207062600321%;

}

.cg-box__body .button {

	font-size: 3.4rem;

	display: inline-block;

	padding-left: 50px;

	background-image: url(../common/img/icon_play.png);

	background-repeat: no-repeat;

	background-position: left center;

	background-size: 40px 40px;

	transition: opacity .3s ease;

}

.cg-box__body .button:hover {

	opacity: 0.8;

}

.cg-box__body .c-h2__title {

	text-align: left;

	padding-top: 0;

	padding-bottom: 20px;

}

.cg-box__body .c-h2__title .jp {

	font-size: 4.0rem;

}

.cg-box__button {

	width: 53.93258426966292%;

}

.cg-box__button .image {

	border: 1px solid #ff0000;

}



@media screen and (max-width: 767px) {

.cg {

	padding: 30px 0;

}

.cg-box {

	display: block;

	margin: 0 0;

}

.cg-box__body {

	width: 100%;

	margin-bottom: 20px;

}

.cg-box__body .button {

	font-size: 2.2rem;

	padding-left: 40px;

	background-size: 30px 30px;

}

.cg-box__body .button:hover {

	opacity: 1;

}

.cg-box__body .c-h2__title {

	padding-bottom: 10px;

}

.cg-box__body .c-h2__title .jp {

	font-size: 2.5rem;

}

.cg-box__button {

	width: 100%;

}

}





/* --------------------------------------------------

		gameflow

-------------------------------------------------- */

.gameflow-box {

	position: relative;

	padding: 60px 0;

	background-image: url(../img/gameflow_02.jpg);

	background-repeat: no-repeat;

	background-position: center center;

	background-size: cover;

}

.gameflow-box:before {

	content: "";

	position: absolute;

	top: 0;

	right: 0;

	width: 600px;

	height: 100%;

	background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.9));

	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));

}

.gameflow__title {

	text-align: center;

	margin-bottom: 30px;

}



@media screen and (max-width: 767px) {

.gameflow-box {

	padding: 30px 0;

}

.gameflow-box:before {

	width: 30%;

}

.gameflow__title {

	padding: 0 4.166666666666667%;

	margin-bottom: 15px;

}

.gameflow__image {

	padding: 0 4.166666666666667%;

}

}





/* --------------------------------------------------

		spec

-------------------------------------------------- */

.spec-box {

	position: relative;

	background-image: url(../img/spec_03.jpg);

	background-repeat: no-repeat;

	background-position: center center;

	background-size: cover;

	padding: 60px 0 200px;

}

.spec-box:before {

	content: "";

	position: absolute;

	top: 0;

	left: 0;

	width: 600px;

	height: 100%;

	background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0.9));

	background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.9));

}

.spec-box:after {

	content: "";

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	height: 150px;

	background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));

	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));

}

.spec__image--01 {

	margin-bottom: 60px;

}

.spec__title-sub {

	text-align: center;

	margin-bottom: 40px;

}

.machine-box {

	position: relative;

	z-index: 1;

	margin-top: -100px;

}

.machine__image {

	text-align: center;

}



@media screen and (max-width: 767px) {

.spec-box {

	padding: 30px 0 100px;

}

.spec-box:before {

	width: 30%;

}

.spec-box:after {

	height: 80px;

}

.spec__image--01 {

	margin-bottom: 30px;

}

.spec__title-sub {

	padding: 0 4.166666666666667%;

	margin-bottom: 20px;

}

.machine-box {

	margin-top: -50px;

}

.machine__image {

	margin: 0 -15%;

	text-align: center;

}

}





/* --------------------------------------------------

		※※※※※

-------------------------------------------------- */



@media screen and (max-width: 767px) {

}