@charset "UTF-8";

/* ========================================
	content
======================================== */
.l-contents{
	background: url(../images/adventure/cont_bg.png) repeat-y top center;
}
@media screen and (min-width: 1921px) {
	.l-contents{
		background-size:100% auto;
	}
}
/* ========================================
	MV
======================================== */
.p-adventure-mv{
	position: relative;
	width: 57.32916666%; /* 1100 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
	text-align: left;
}
.p-adventure-mv .Inner{
	position: relative;
	padding-top: 57.818%; /* 636 / 1100 * 100*/
}
.p-adventure-mv h1{
	position: absolute;
	width: 53.6363636%; /* 590 / 1100 * 100 */
	top: 14.15%; /* 90 / 636 * 100 */
	left: 22.3636363%; /* 246 / 1100 * 100 */
	z-index: 10;
}
.p-adventure-mv_bg{
	position: absolute;
	width: 107.6363636%; /* 1184 / 1100 * 100 */
	top: 2%;
	left: -3.8181818%; /* 42 / 1100 * 100 */
	z-index: 0;
}
.p-adventure-mv_line{
	position: absolute;
	width: 71.2727272%; /* 784 / 1100 * 100 */
	top: 35.85%; /* 228 / 636 * 100 */
	left: 13.9%; /* 153 / 1100 * 100 */
	z-index: 10;
}
.p-adventure-mv_lead{
	position: absolute;
	width: 40.1818181%; /* 442 / 1100 * 100 */
	z-index: 10;
	top: 54%; /* 344 / 636 * 100 */
	left: 29.8181818%; /* 328 / 1100 * 100 */
}
.p-adventure-mv_luigi{
	position: absolute;
	width: 53.7272727%; /* 591 / 1100 * 100 */
	top: 2.35849%; /* 15 / 636 * 100 */
	left: -15.4545454%; /* 170 / 1100 * 100 */
	z-index: 1;
}
.p-adventure-mv_ghost{
	position: absolute;
	width: 40.9%; /* 450 / 1100 * 100 */
	top: 31.44654%; /* 200 / 636 * 100 */
	left: 68%;
	z-index: 10;
}

.item-y{
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(90px);
	transform: translateY(90px);
	transition:
		opacity 1000ms,
		-webkit-transform 1000ms,
		transform 1000ms;
}
.is-animation .item-y,
.no-js .item-y {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.item-x01{
	-webkit-animation: item-x01 5s infinite;
	animation: item-x01 5s ease-in-out infinite;
}
.item-x02{
	-webkit-animation: item-x02 5s infinite;
	animation: item-x02 5s ease-in-out infinite;
	-webkit-animation-delay:3s;
	animation-delay:3s;
}

/* ========================================
	ghost
======================================== */
.item-ghost{
	webkit-animation: ghost 5s infinite;
	animation: ghost 5s infinite;
}
@-webkit-keyframes ghost {
    0% {
			-webkit-transform: translateY(30px);
			transform: translateY(30px);
    }
    50% {
			-webkit-transform: translateY(-10px);
			transform: translateY(-10px);
    }
		100% {
				-webkit-transform: translateY(30px);
				transform: translateY(30px);
			}
}
@keyframes ghost {
    0% {
			-webkit-transform: translateY(30px);
			transform: translateY(30px);
    }
    50% {
			-webkit-transform: translateY(-10px);
			transform: translateY(-10px);
    }
		100% {
				-webkit-transform: translateY(30px);
				transform: translateY(30px);
			}
}

/* ========================================
	point01
======================================== */
.p-adventure-point01{
	position: relative;
	background: url(../images/adventure/point01_bg.png) no-repeat top center;
	background-size: auto 100%;
	z-index: 10;
	margin-top: -1.5%;
}
.p-adventure-point01 .Inner{
	position: relative;
	padding-top: 95%;
}
.p-adventure-point01_in{
	width: 66.6666666%; /* 1280 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
}
.p-adventure-point01_in_r{
	position: relative;
	width: 92.96875%; /* 1190 / 1280 * 100 */
	float: right;
}
.p-adventure-point01_h{
	position: absolute;
	width: 45.21%; /* 538 / 1190 * 100 */
	top: 6.1837455%; /* 70 / 1132 * 100 */
	left: -2%;
}
.p-adventure-point01_lead{
	position: absolute;
	width: 22.6%; /* 269 / 1190 * 100 */
	top: 17.6678445%; /* 200 / 1132 * 100 */
	left: 46%;
	transition-delay: 200ms !important;
}
.p-adventure-key{
	position: absolute;
	width: 32.4369747%; /* 386 / 1190 * 100 */
	top: 4.8586572%; /* 55 / 1132 * 100 */
	right: -0.5%;
	z-index: 100;
}
.p-adventure-point01_thumbs{
	position: absolute;
	width: 100%;
	top: 31%;
	left: 0;
}
.p-adventure-point01_thumbs ul{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.point01_thumbs01 li{
	width: 33.27731%;
}
.point01_thumbs02{
	width: 100%;
	margin: 1.8% 0 0 3.5%;
	transition-delay: 200ms !important;
}
.point01_thumbs02 li{
	width: 33.27731%;
}
/* ========================================
	point02
======================================== */
.p-adventure-point02{
	position: relative;
	width: 66.6666666%; /* 1280 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
}
.p-adventure-point02 .Inner{
	position: relative;
	padding-top: 76%;
}
.p-adventure-point02_in{
	position: absolute;
	width: 47.65625%; /* 610 / 1280 * 100 */
	top: -2%;
	right: 0%;
}
.p-adventure-point02_bg{
	position: absolute;
	width: 63.9%; /* 818 / 1280 * 100 */
	top: -6%;
	right: -8%;
}
.p-adventure-point02_luigi{
	position: absolute;
	width: 57.578125%; /* 737 / 1280 * 100 */
	top: -12%;
	left: -4.5%;
	z-index: 100;
	webkit-animation: luigi 3s infinite;
	animation: luigi 3s infinite;
}
.p-adventure-point02_lead{
	width: 67.8688524%; /* 414 / 610 * 100 */
	margin-top: 3%;
	margin-left: 13%;
	transition-delay: 200ms !important;
}
.p-adventure-point02_btn{
	width: 55%; /* 336 / 610 * 100 */
	margin-top: 6%;
	margin-left: 10%;
}
.p-adventure-point02_bal{
	position: absolute;
	width: 33.6%; /* 205 / 610 * 100 */
	top: 74.0%;
	left: 13%;
}
/* ========================================
	luigi
======================================== */
@-webkit-keyframes luigi {
    0% {	
			-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
    }
    50% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
    }
	100% {
			-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
    }
}
@keyframes luigi {
    0% {
			-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
    }
    50% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
    }
	100% {
			-webkit-transform: translateX(-100px);
			transform: translateX(-100px);
    }
}
/* ========================================
	muddy
======================================== */
.p-adventure-muddy{
	position: absolute;
	width: 80.39%; /* 1029 / 1280 * 100 */
	top: 45%;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.p-adventure-muddy_bg{
	position: relative;
}
.p-adventure-muddy_h{
	position: absolute;
	width: 49.8542274%; /* 513 / 1029 * 100 */
	top: 12%;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.p-adventure-muddy_p{
	position: absolute;
	width: 47.7162293%; /* 491 / 1029 * 100 */
	top: 21%;
	right: -4%;
}
.p-adventure-other{
	position: absolute;
	width: 56.8513119%; /* 585 / 1029 * 100 */
	top: 55%;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.p-adventure-muddy_thumbs{
	position: absolute;
	width: 67.93%; /* 699 / 1029 * 100 */
	top: 24%;
	left: 5%;
}

/* ========================================
	point03
======================================== */
.p-adventure-point03{	
	position: relative;
	background: url(../images/adventure/point03_bg.png) no-repeat top center;
	background-size: auto 100%;
}
.p-adventure-point03 .Inner{
	position: relative;
	padding-top: 91%;
}
.p-adventure-point03_bg{
	position: relative;
}
.p-adventure-point03_in{
	position: relative;
	width: 66.6666666%; /* 1280 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
}
.p-adventure-point03_h{
	position: absolute;
	width: 44.375%; /* 568 / 1280 * 100 */
	top: 10.5442176%; /* 124 / 1176 * 100 */
	left: 4.14%; /* 53 / 1280 * 100 */
	z-index: 100;
}
.p-adventure-point03-gh01{
	position: absolute;
	width: 43.125%; /* 552 / 1280 * 100 */
	top: -4%;
	left: 41%;
}
.p-adventure-point03-gh02{
	position: absolute;
	width: 16.17%; /* 207 / 1280 * 100 */
	top: 14%;
	left: 80%;
	transition-delay: -400ms !important;
	animation-delay: -2000ms !important;
}
.p-adventure-retry{
	position: absolute;
	width: 79.53125%; /* 1018 / 1280 * 100 */
	top: 46.2%;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.p-adventure-retry_bg{
	position: relative;
}
.p-adventure-retry_in{
	position: absolute;
	width: 78%; /* 795 / 1018 * 100 */
	top: 12%;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: left;
}
.p-adventure-retry_h{
	width: 100%; /* 795 / 790 * 100 */
	margin-bottom:  1%;
}
.p-adventure-retry_l{
	float: left;
	width: 40.5%; /* 322 / 795 * 100 */
}
.p-adventure-retry_r{
	float: right;
	width: 52.5786163%; /* 418 / 795 * 100 */
}
.p-adventure-retry_lead{
	margin: 3.5% 0 4% 2.5%;
}
.p-adventure-retry_btn{
	position: relative;
	margin-left: -2%;
	width: 104.347826%; /* 336 / 322 * 100 */
	cursor: pointer;
}
.p-adventure-horror{
	width: 66.6666666%;  /*1280 / 1920 * 100 */
	margin: 0 auto;
	min-width: 1100px;
	max-width: 2000px;
	padding: 2% 0;
}

/* ========================================
	horror
======================================== */
.p-adventure-horror{margin-bottom: 5%;}
.p-adventure-horror h2{
	width: 87.265625%; /* 1117 / 1280 * 100 */
	margin: 0 auto 2.5% auto;
}
.p-adventure-horror_in{
	position: relative;
	width: 86.484375%; /* 1107 / 1280 * 100 */
	margin: 0 auto;
}
.p-adventure-horror_lead{
	position: absolute;
	width: 31.7976513%; /* 352 / 1107 * 100 */
	top: 9.5%;
	left: 10.569% /* 117 / 1107 * 100 */
}
.p-adventure-horror_game{
	width: 84.2818428%; /* 933 / 1107 * 100 */
	position: absolute;
	top: 6%;
	left: 10.569% /* 117 / 1107 * 100 */
}
.p-adventure-horror_thumbs{
	position: absolute;
	width: 78.3197831%; /* 867 / 1107 * 100 */
	top: 67.5%;
	left: 10.569% /* 117 / 1107 * 100 */
}
/* ========================================
	modal
======================================== */
.p-adventure-modal_wrap{
	position: relative;
	width: 31.25%; /* 600 / 1920 * 100 */
	margin: 0 auto;
	min-width: 600px;
	max-width: 2000px;
}
.p-adventure-modal_bg{
	position: relative;
}
.p-adventure-modal_wrap h2{
	position: absolute;
	width: 80.3333333%; /* 482 / 600 * 100 */	
	top: 7.5%;
	left: 16.0%;
	z-index: 100;
}
.p-adventure-modal_p{
	position: absolute;
	width: 69.666666%; /* 418 / 600 * 100 */
	top: 26%;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.p-adventure-modal_lead{
	width: 65.6666666%; /* 394 / 600 * 100 */	
	top: 71%;
	position: absolute;	
	left: 0;
	right: 0;
	margin: 0 auto;
}
.l-modal_btn__close{
	width: 200px;
	margin: 30px auto 0 auto;
	cursor: pointer;
}