@charset "UTF-8";

/* ========================================
	content
======================================== */
.l-contents{
	background-color: #000;
}

/* ========================================
	MV
======================================== */
.p-story-mv{
	position: relative;
	width: 100%;
}
.p-story-mv.bg{
	position: relative;
}
.p-story-mv h1{
	position: absolute;
	width: 82.8%; /* 621 / 750 * 100 */
	top: 53.7974683%; /* 510 / 948 * 100 */
	left: 0;
}
.p-story-mv_mario{
	position: absolute;
	width: 48.1333333%; /* 361 / 750  * 100 */
	top: 20%; /* 190 / 948 * 100 */
	left: 51.3333333%; /* 385 / 750 * 100 */
	transition-delay: 400ms !important;
}
.is-animation .item-y,
.no-js .item-y {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.item-y{
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(90px);
	transform: translateY(90px);
	transition:
		opacity 1500ms,
		-webkit-transform 1500ms,
		transform 1500ms;
}

/* ========================================
	cont01
======================================== */
.p-story-cont01{
	position: relative;
	z-index: 10;
}
.p-story-cont01_bg{
	position: relative;
}
.p-story-cont01_h{
	position: absolute;
	width: 100%;
	top: 7%;
	left: 0;
}
.p-story-cont01_lead{
	position: absolute;
	width: 51.7333333%; /* 388 / 750 * 100 */
	top: 57%;
	left: 6.4%; /* 48 / 750 * 100 */
	transition-delay: 200ms !important;
}
.p-story-cont01_p{
	position: absolute;
	width: 61.6%; /* 462 / 750 * 100 */
	top: 27.777777%; /* 320 / 1152 * 100 */
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
/* movie */
.mov_wrap{
	position: absolute;
	width: 87%;
	height: 0px;
	padding-bottom: 53.5%;
  z-index: 1;
  overflow: hidden;
	left: 5.5%;
}
.p-story-cont01 .mov_wrap{top: 9.0%;}
.p-story-cont03 .mov_wrap{top: 10%;}
.p-story-cont01_p .mov_wrap,
.p-story-cont01_p .movie_btn{
	transform: rotate(-4.1deg);
	-moz-transform: rotate(-4.1deg);
	-webkit-transform: rotate(-4.1deg);
}
.p-story-cont03_p .mov_wrap,
.p-story-cont03_p .movie_btn{
	transform: rotate(4.1deg);
	-moz-transform: rotate(4.1deg);
	-webkit-transform: rotate(4.1deg);
}
.mov{
	position: absolute;
	top: 0;
	left: 0%;
	width: 100%;
	height: 100%;
}
/**Movie**/
.p-story-yt .mov_wrap{
	/*position: relative;*/
	width: 87%;
	height: 0px;
	padding-bottom: 56.25%;
  z-index: 1;
  overflow: hidden !important;
}
.p-story-yt .mov{
	position: absolute;
	top: 0;
	left: -6%;
	width: 112%;
	height: 96%;
	z-index: 1;
}
.p-story-yt .movie_btn{
	position: absolute;
	top: 8%;
	left: 5%;
	width: 88%;
	height: 80%;
	z-index: 10;
}
.p-story-cont01 .p-story-yt .movie_btn{
	top: 8%;
}
.p-story-cont03 .p-story-yt .movie_btn{
	top: 9.5%;
}
.mov{
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}
.player_wrap{
	display: block;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.yt_player{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

/* ========================================
	chara
======================================== */
.p-story-cont-chara_wrap{
	cursor: pointer;
}
.luigi.p-story-cont-chara{
	position: absolute;
	width: 38.6666666%; /* 290 / 750 * 100 */
	top: 59%; 
	left: 58.5%;
}
.luigi_btn.p-story-cont-btn{
	top: 90%;
	left: 28.2666666%; /* 212 / 750 * 100 */
}
.p-story-cont-btn{
	position: absolute;
	width: 42.4%; /* 318 / 750 * 100 */
}

/* ========================================
	ghost
======================================== */
@keyframes ghost {
    0% {
			visibility: hidden;
			
			-webkit-transform: translateY(30px);
			transform: translateY(30px);
    }
    50% {
			visibility: visible;
			
			-webkit-transform: translateY(-10px);
			transform: translateY(-10px);
    }
		100% {
				visibility: hidden;

				-webkit-transform: translateY(30px);
				transform: translateY(30px);
			}
}

/* ========================================
	cont02
======================================== */
.p-story-cont02{
	position: relative;
	margin-top: -12%;
	z-index: 5;
}
.p-story-cont02_bg{
	display: block;
	position: relative;
}
.p-story-cont02_h{
	position: absolute;
	width: 52.4%; /* 393 / 750 * 100 */
	top: 16.4467897%;/* 187 / 1137 * 100 */
	right: 0;
}
.p-story-cont02_lead{
	position: absolute;
	width: 42.4%; /* 318 / 750 * 100 */
	top: 42.39226%;/* 482 / 1137 * 100 */
	left: 50%;/* 375 / 750 * 100 */
	transition-delay: 200ms !important;
}
.ghost.p-story-cont-chara{
	position: absolute;
	width: 51%; /* 383 / 750 * 100 */
	top: 58%;
	left: 0;
	webkit-animation: ghost 5s infinite;
	animation: ghost 5s infinite;
}
.ghost_btn.p-story-cont-btn{
	top: 85%;
	left: 3%;
}

/* ========================================
	cont03
======================================== */
.p-story-cont03{
	position: relative;
	z-index: 10;
	margin-top: -13%;
}
.p-story-cont03_h{
	position: absolute;
	width: 94.5333333%; /* 709 / 750 * 100 */
	top: 15.9%; /* 219 / 1377 * 100 */
	left: 0;
}
.p-story-cont03_lead{
	position: absolute;
	width: 79%; /* 593 / 750 * 100 */
	top: 61.1474219%; /* 842 / 1377 * 100 */
	left: 5.4666666%; /* 41 / 750 * 100 */
	transition-delay: 200ms !important;
}
.p-story-cont03_p{
	position: absolute;
	width: 61.3333333%; /* 460 / 750 * 100 */
	top: 36%; /* 496 / 1377 * 100 */
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.professor.p-story-cont-chara{
	position: absolute;
	width: 39.8666666%; /* 299 / 750 * 100 */
	top: -2.5%;
	left: 50%;
}
.professor_btn.p-story-cont-btn{
	top: 24%;
	left: 49%;
}
.boo.p-story-cont-chara{
	position: absolute;
	width: 45%; /* 338 / 750 * 100 */
	bottom: -11%;
	left: 49%;
	webkit-animation: ghost 5s infinite;
	animation: ghost 5s infinite;
	-webkit-animation-delay:-3s;
	animation-delay:-3s;
}
.boo_btn.p-story-cont-btn{
	bottom: -8%;
	left: 11.7333333%; /* 88 / 750 * 100 */
}

/* ========================================
	trip
======================================== */
.p-story-trip h3{
	width: 87.2%; /* 654 / 750 * 100 */
	margin: 0 auto;
}
.p-story-trip p{
	transition-delay: 300ms !important;
}
/* ========================================
	popup
======================================== */
.l-modal_contents{
	overflow-x: hidden !important;
}
.slide_chara-modalbody{
	position: relative;
	margin: 0 auto 0 auto;
	width: 100%;
}
.slide_chara-content_inner{
	margin-top: -10%;
}
.slide_chara-content .bx-wrapper {
	margin: 0 auto;
}
.bx-wrapper .bx-viewport{
	overflow: visible !important;
}
.slide_chara-content .bx-prev,
.slide_chara-content .bx-next {
	width: 10.4%; /* 78 / 750 * 100 */
	padding-top: 10.7%;
	display: block;
}
.slide_chara-content .bx-prev {
	background: url(../images/common/ico_prev.png) no-repeat 0 0;
	background-size: 100% auto;
	top: 100% !important;
	left: 4.6666666% !important; /* 35 / 750 * 100 */
}
.slide_chara-content .bx-next {
	background: url(../images/common/ico_next.png) no-repeat 0 0;
	background-size: 100% auto;
	top: 100% !important;
	right: 4.6666666% !important; /* 35 / 750 * 100 */
}
.l-modal_close_story{
	width: 40% !important; /* 300 / 750 * 100 */
	margin: 2% auto 0 auto;
}
.l-modal_close_story img{
	width: 100%;
	height: auto;
}