@charset "UTF-8";
/*------------------------------------------------------------
	layout
------------------------------------------------------------*/
#wrapper {
	min-width: 960px;
	overflow: hidden;
	background: url(../img/story/wrapper_bg.jpg) center top repeat;
}
.contents_section {
	min-width: 960px;
	background: url(../img/story/contents_bg.png) center top repeat-y;
}



/*------------------------------------------------------------
	section
------------------------------------------------------------*/
.title_section,
.section1,
.section2,
.section3,
.section4,
.section5,
.section6 {
	position: relative;
	max-width: 1046px;
	min-width: 960px;
	margin: 0 auto;
	background-position: center top;
	background-repeat: no-repeat;
}
.title_body,
.section1_body,
.section2_body,
.section3_body,
.section4_body,
.section5_body,
.section6_body {
	position: relative;
	height: 100%;
	width: 960px;
	margin: 0 auto;
}



/*------------------------------------------------------------
	title_section
------------------------------------------------------------*/
.title_section {
	z-index: 1;
	height: 223px;
	background-image: url(../img/story/title_bg.png);
}
.title {
	position: absolute;
	top: -40px;
    left: 259px;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}



/*------------------------------------------------------------
	section1
------------------------------------------------------------*/
.section1 {
	z-index: 1;
	height: 443px;
	background-image: url(../img/story/section1_bg.png);
}
.section1_body > p,
.section1_body > div {
	position: absolute;
}
.section1_text {
	top: 55px;
	left: 111px;
}
.chara_mario {
    top: -78px;
    left: -173px;
    opacity: 0;
}
.tablet-mode .chara_mario {
	opacity: 1;
}
.chara_mario .rotor {
	width: 278px;
	height: 385px;
	background-image: url(../img/story/chara_img_mario.png);
}
.chara_btn_mario {
    margin: -60px 0 0 41px;
}
.section1_img_mario {
    top: -28px;
    left: 341px;
}



/*------------------------------------------------------------
	section2
------------------------------------------------------------*/
.section2 {
	z-index: 1;
	height: 300px;
	background-image: url(../img/story/section2_bg.png);
}
.section2_body > p,
.section2_body > div {
	position: absolute;
}
.section2_text {
    top: 36px;
    left: 534px;
}
.badge_mario {
    top: 242px;
    left: -112px;
}
.chara_peach {
    top: 50px;
    left: 792px;
    opacity: 0;
}
.tablet-mode .chara_peach {
	opacity: 1;
}
.chara_peach .rotor {
	width: 287px;
	height: 449px;
	background-image: url(../img/story/chara_img_peach.png);
}
.chara_btn_peach {
    margin: -33px 0 0 1px;
}
.badge_mario .rotor {
    top: 238px;
    left: -92px;
    width: 265px;
    height: 267px;
    background-image: url(../img/story/section2_img_mario.png);
}



/*------------------------------------------------------------
	section3
------------------------------------------------------------*/
.section3 {
	z-index: 0;
	height: 594px;
	overflow: hidden;
	margin-top: -51px;
}
.section3_body:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 20px;
	height: 100%;
	margin-left: -523px;
	background: url(../img/story/inner_shadow_left.png);
}
.section3_body:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 50%;
	width: 20px;
	height: 100%;
	margin-right: -523px;
	background: url(../img/story/inner_shadow_right.png);
}
.section3 .video_wrap {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	margin-left: -528px;
}
.section3 .video_wrap .fallback {
	display: none;
}
.tablet-mode .section3 .video_wrap video {
	display: none;
}
.tablet-mode .section3 .video_wrap .fallback {
	display: block;
	position: relative;
}
.tablet-mode .section3 .video_wrap .fallback li {
	position: absolute;
	top: 0;
	left: 0;
}


/*------------------------------------------------------------
	section4
------------------------------------------------------------*/
.section4 {
	z-index: 1;
	height: 466px;
	margin-top: -78px;
	background-image: url(../img/story/section4_bg.png);
}
.section4_body > p,
.section4_body > div {
	position: absolute;
}
.section4_text {
    top: 165px;
    left: 17px;
}
.chara_kinopio {
    top: -185px;
    left: -112px;
    opacity: 0;
}
.tablet-mode .chara_kinopio {
	opacity: 1;
}
.chara_kinopio .rotor {
	width: 251px;
    height: 345px;
    background-image: url(../img/story/chara_img_kinopio.png);
}
.chara_btn_kinopio {
    margin: -75px 0 0 11px;
}
.section4_letter {
    top: 273px;
    left: 790px;
    width: 356px;
    height: 335px;
}
.section4_letter span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.section4_letter .base {
	width: 100%;
    height: 100%;
    background-image: url(../img/story/section4_img_letter.png);
}
.section4_letter .effect {
	opacity: 0;
	width: 100%;
    height: 100%;
    background-image: url(../img/story/section4_img_letter_effect.png);
}
.section4_card {
    top: 397px;
    left: -133px;
}

.section4_card .rotor {
	width: 345px;
    height: 436px;
    background-image: url(../img/story/section4_img_map.png);
}



/*------------------------------------------------------------
	section5
------------------------------------------------------------*/
.section5 {
	z-index: 0;
	height: 594px;
	overflow: hidden;
	margin-top: -14px;
}
.section5_body:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 20px;
	height: 100%;
	margin-left: -523px;
	background: url(../img/story/inner_shadow_left.png);
}
.section5_body:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 50%;
	width: 20px;
	height: 100%;
	margin-right: -523px;
	background: url(../img/story/inner_shadow_right.png);
}
.section5_body > p,
.section5_body > div {
	position: absolute;
}
.section5 .video_wrap {
	top: 0;
	left: 50%;
	z-index: -1;
	margin-left: -528px;
}
.section5 .video_wrap .fallback {
	display: none;
}
.tablet-mode .section5 .video_wrap video {
	display: none;
}
.tablet-mode .section5 .video_wrap .fallback {
	display: block;
	position: relative;
}
.tablet-mode .section5 .video_wrap .fallback li {
	position: absolute;
	top: 0;
	left: 0;
}
.section5_text {
    top: 293px;
    left: 73px;
}



/*------------------------------------------------------------
	section6
------------------------------------------------------------*/
.section6 {
	z-index: 1;
	height: 343px;
    margin-top: -14px;
	background-image: url(../img/story/section6_bg.png);
}
.section6_body > p {
	position: absolute;
}
.section6_text {
  top: 77px;
  left: 583px;
}
.section6_btn {
    top: 215px;
    left: 630px;
}