@charset "UTF-8";

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

/* ========================================
	MV
======================================== */
.p-story-mv{
	position: relative;
	width: 66.6666666%; /* 1280 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;	
}
.p-story-mv.bg{
	position: relative;
}
.p-story-mv h1{
	position: absolute;
	width: 44%; /* 564 / 1280 * 100 */
	top: 9.1973244%; /* 55 / 598 * 100 */
	left: 10.9375%; /* 140 / 1280 * 100 */
}
.p-story-mv_line{
	position: absolute;
	width: 83.59375%; /* 1070 / 1280  * 100 */
	top: 54.347826%; /* 325 / 598 * 100 */
	left: -25%; /* 320 / 1280 * 100 */
}
.p-story-mv_mario{
	position: absolute;
	width: 31.484375%; /* 403 / 1280  * 100 */
	top: 17.8929765%; /* 107 / 598 * 100 */
	left: 66.5625%; /* 852 / 1280 * 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;
	margin-top: -1%;
	background: url(../images/story/cont01_bg.png) no-repeat top center;
	background-size: auto 100%;
	z-index: 10;
}
.p-story-cont01 .Inner{
	position: relative;
	padding-top: 59%;
}
.p-story-cont01_in{
	position: relative;
	width: 58.177%; /* 1117 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
	text-align: left;
	top:0;
	left: 0;
	right: 0;
}
.p-story-cont01_h{
	position: absolute;
	width: 73.8585496%; /* 825 / 1117 * 100 */
	top: 15%;
	left: 0;
}
.p-story-cont01_lead{
	position: absolute;
	width: 37.6%; /* 420 / 1117 * 100 */
	top: 41%;
	left: 1%;
	transition-delay: 200ms !important;
}
.p-story-cont01_p{
	position: absolute;
	width: 41.45%; /* 463 / 1117 * 100 */
	top: 27%;
	left: 38.4959713% /* 430 / 1117 * 100 */
}
/* movie */
.mov_wrap{
	position: absolute;
	width: 87%;
	height: 0px;
	padding-bottom: 53.5%;
  z-index: 1;
  overflow: hidden;
	top: 9.0%;
	left: 5.5%;
	transform: rotate(4.1deg);
	-moz-transform: rotate(4.1deg);
	-webkit-transform: rotate(4.1deg);
}
.mov{
	position: absolute;
	top: 0;
	left: -4.0%;
	width: 109%;
	height: 100%;
}
/* ========================================
	chara
======================================== */
.p-story-cont-chara_wrap{
	cursor: pointer;
}
.luigi.p-story-cont-chara{
	position: absolute;
	width: 29.8119964%; /* 333 / 1117 * 100 */
	top: 16%;
	left: 77.0%; /* 865 / 1117 * 100 */
	z-index: 10;
}
.luigi_btn.p-story-cont-btn{
	top: 74%;
	left: 66.7%; /* 745 / 1117 * 100 */
}
.p-story-cont-btn{
	position: absolute;
	display: block;
	width: 21.3% !important; /* 238 / 1117 * 100 */
	z-index: 100;
}
.p-story-cont-chara_wrap img{
	transition: 0.4s, -webkit-transform 0.4s, transform 0.4s;
}
.active.p-story-cont-chara_wrap .p-story-cont-chara img,
.p-story-cont-chara_wrap:hover .p-story-cont-chara img{
	-moz-transform: scale(1.15,1.15);
  -webkit-transform: scale(1.15,1.15);
  transform: scale(1.15,1.15);	
}
.is-tablet .active.p-story-cont-chara_wrap .p-story-cont-chara img,
.is-tablet .p-story-cont-chara_wrap:hover .p-story-cont-chara img{
	-moz-transform: scale(1.0,1.0);
  -webkit-transform: scale(1.0,1.0);
  transform: scale(1.0,1.0);
}
/* ========================================
	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: -7%;
	z-index: 5;
}
.p-story-cont02_bg{
	display: block;
	position: relative;
}
.p-story-cont02_in{
	position: relative;
	width: 62.5%; /* 1200 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
	text-align: left;
}
.p-story-cont02_h{
	position: absolute;
	width: 36.6666666%; /* 440 / 1200 * 100 */
	top: 26.7%;/* 215 / 805 * 100 */
	left: 48.4375%; /* 620 / 1200 * 100 */
}
.p-story-cont02_lead{
	position: absolute;
	width: 32.9166666%; /* 395 / 1200 * 100 */
	top: 51.677%;/* 416 / 805 * 100 */
	left: 50%;
	transition-delay: 200ms !important;
}

/* ========================================
	cont03
======================================== */
.p-story-cont03{
	position: relative;
	margin-top: -6.5%;
	background: url(../images/story/cont03_bg.png) no-repeat top center;
	background-size: auto 100%;
	z-index: 10;
}
.p-story-cont03 .Inner{
	position: relative;
	padding-top: 66.6363636%;/* 733 / 1100 * 100 */
}
.p-story-cont03_in{
	position: relative;
	width: 58.177%; /* 1117 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
	text-align: left;
	top:0;
	left: 0;
	right: 0;
}
.p-story-cont03_h{
	position: absolute;
	width:49.7761862%; /* 556 / 1117 * 100 */
	top: 22%; /* 170 / 770 * 100 */
	left: 22.9185317%; /* 256 / 1117 * 100 */
}
.p-story-cont03_lead{
	position: absolute;
	width: 35.9892569%; /* 402 / 1117 * 100 */
	top: 43.8961%; /* 338 / 770 * 100 */
	left: 25.2461951%; /* 282 / 1117 * 100 */
	transition-delay: 200ms !important;
}
.p-story-cont03_p{
	position: absolute ;
	width: 41.1817367%; /* 460 / 1117 * 100 */
	top: 33.3766233%; /* 257 / 770 * 100 */
	left: 65.3536257% /* 730 / 1117 * 100 */
}
.ghost.p-story-cont-chara{
	position: absolute;
	width: 40.1666666%; /* 482 / 1200 * 100 */
	top: -28%;
	left: 70%; /* 840 / 1200 * 100 */
	webkit-animation: ghost 5s infinite;
	animation: ghost 5s infinite;
}
.ghost_btn.p-story-cont-btn{
	top: -2%;
	left: 65%; /* 780 / 1200 * 100 */
}
.professor.p-story-cont-chara{
	position: absolute;
	width: 32.8558639%; /* 367 / 1117 * 100 */
	top: 8.8311688%;/* 68 / 770 * 100 */
	left: -8.2363473%; /* 92 / 1117 * 100 */
}
.professor_btn.p-story-cont-btn{
	top: 66.2337662%;/* 510 / 770 * 100 */
	left: -2%;
}
.boo.p-story-cont-chara{
	position: absolute;
	width: 33.393%; /* 373 / 1117 * 100 */
	bottom: -31%;
	left: 40.1%; /* 448 / 1117 * 100 */
	webkit-animation: ghost 5s infinite;
	animation: ghost 5s infinite;
	-webkit-animation-delay:-3s;
	animation-delay:-3s;
}
.boo_btn.p-story-cont-btn{
	bottom: -13%;
	left: 68.5%; /* 760 / 1117 * 100 */
}

/* ========================================
	trip
======================================== */
.p-story-trip{
	position: relative;
	width: 57.2916666%; /* 1100 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
}
.p-story-trip_bg{
	position: relative;
	display: block;
}
.p-story-trip h3{
	position: absolute;
	width: 90%; /* 990 / 1100 * 100 */
	top: 16.9%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.p-story-trip p{
	position: absolute;
	width: 57.5454545%; /* 633 / 1100 * 100 */
	top: 35%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	transition-delay: 200ms !important;
}

/* ========================================
	popup
======================================== */
.l-modal_contents{
	overflow-x: hidden !important;
}
.slide_chara-modalbody{
	position: relative;
	max-width: 2000px;
	min-width: 960px;
	margin: 0 auto;
	width: 66.6666666%; /* 1280 / 1920 * 100 */
}
.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: 7.34375%; /* 94 / 1280 * 100 */
	padding-top: 10.7%; /* 118 / 1100 * 100*/
}
.slide_chara-content .bx-prev {
	background: url(../images/common/ico_prev.png) no-repeat 0 0;
	background-size: 100% auto;
	top: 43% !important;
	left: 0 !important;
}
.slide_chara-content .bx-next {
	background: url(../images/common/ico_next.png) no-repeat 0 0;
	background-size: 100% auto;
	top: 43% !important;
	right: 0 !important;
}
.slide_chara-content .bx-prev:hover,
.slide_chara-content .bx-next:hover {
	opacity: 0.8;
}
.l-modal_close{
	top: 108% !important;
	left: 27.7%;
	width: 17% !important; /* 218 / 1280 * 100 */
}
.l-modal_close img{
	width: 100%;
	height: auto;
}
.slide_chara-content li{
	position: relative;
	width: 100%;
	margin: 0 auto;
}
.slide_chara-content .slide_lead{
	width: 59.53125%; /* 762 / 1280 * 100 */
	text-align: right;
}
.slide_chara-content .slide_lead img{
	width: 78.74% !important; /* 600 / 762 * 100 */
}
.slide_chara-content .slide_chara{
	position: absolute;
}
.slide_luigi .slide_chara{
	width: 28.75%; /* 368 / 1280 * 100 */
	top:-30%;
	left: 58.59375%; /* 750 / 1280 * 100 */
}
.slide_ghost .slide_chara{
	width: 41.64%; /* 533 / 1280 * 100 */
	top: -5%;
	left: 50.3125%; /* 644 / 1280 * 100 */
}
.slide_professor .slide_chara{
	width: 37.89%; /* 485 / 1280 * 100 */
	top: -29%;
	left: 52%; /* 666 / 1280 * 100 */
}
.slide_boo .slide_chara{
	width: 37.89%; /* 485 / 1280 * 100 */
	top: 0%;
	left: 52%; /* 666 / 1280 * 100 */
}