body {
	background-image: url(../images/common/bg-green-light.png);
	background-repeat: repeat;
	background-position: 0 0;
	/*background-attachment: fixed;*/
}

#MainContent{
	padding-bottom: 175px;
}

/* ==========================================================================
   Create Navi
   ========================================================================== */

#CreateNavi {
	position: absolute;
	width: 237px;
	height: 49px;
	right: 40px;
	top: 80px;
	overflow: visible;
	z-index: 30;
}

#CreateNavi li {
	position:absolute;
	margin-bottom: 3px;
}

#CreateNavi .main {
	width: 237px;
	height: 70px;
	position: absolute;
	overflow: visible;
}
#CreateNavi li a {
	background-repeat: no-repeat;
	background-image: url(../images/create/navi.png);
	background-size: 711px 369px;
	text-indent: -9999px;
	display: block;
	overflow: hidden;
	width: 237px;
	height: 49px;
	
}

#CreateNavi .create { margin-top: 0px; z-index: 15 }
#CreateNavi .combi	{ margin-top: 52px; z-index: 14 }
#CreateNavi .stage	{ margin-top: 104px; z-index: 13 }
#CreateNavi .series	{ margin-top: 156px; z-index: 12 }
#CreateNavi .sound	{ margin-top: 208px; z-index: 11 }

#CreateNavi .create	a { background-position: 0px 0px; }
#CreateNavi .combi	a { background-position: 0px -49px; }
#CreateNavi .stage	a { background-position: 0px -98px; }
#CreateNavi .series	a { background-position: 0px -147px; }
#CreateNavi .sound	a { background-position: 0px -196px; }

#CreateNavi .create a:hover { background-position: -237px 0px; }
#CreateNavi .combi  a:hover { background-position: -237px -49px; }
#CreateNavi .stage  a:hover { background-position: -237px -98px; }
#CreateNavi .series a:hover { background-position: -237px -147px; }
#CreateNavi .sound	a:hover { background-position: -237px -196px; }

#CreateNavi .sub {
	position: absolute;
	margin-top: 263px;
}

#CreateNavi .icon {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-image: url(../images/create/navi.png);
	background-size: 711px 369px;
	background-position: 0px -294px;
	text-indent: -9999px;
	display: block;
	overflow: hidden;
	width: 25px;
	height: 25px;
	margin-left: 196px;
	margin-top: 10px;
}

#CreateNavi .create a:hover .icon {
	margin-left: 199px;
	margin-top: 13px;
}

body.createIndex #CreateNavi a:hover .icon {
	margin-left: 196px;
	margin-top: 10px;
}

#CreateNavi .sub li {
	width: 115px;
	height: 49px;
	display: block;
	float: left;
}

#CreateNavi .arrange {
	margin-left: 122px;
}

#CreateNavi .arrange a {
	width: 115px;
	height: 49px;
	margin-right: 14px;
	background-position: 0px -245px;
}
#CreateNavi .arrange a:hover {background-position: -237px -245px;}

#CreateNavi .share {
	margin-right: 7px;
}
#CreateNavi .share a {
	width: 115px;
	height: 49px;
	background-position: -116px -245px;
}
#CreateNavi .share a:hover {background-position: -353px -245px;}


/* ページによって切り替え　*/

body.createIndex #CreateNavi.open .create	a { background-position: -474px 0px; }

body.createCombi #CreateNavi.open .combi	a { background-position: -474px -49px; }
body.createCombi #CreateNavi.close .create a { background-position: 0px -49px; }
body.createCombi #CreateNavi.close .create a:hover { background-position: -237px -49px; }

body.createStage #CreateNavi.open .stage	a { background-position: -474px -98px; }
body.createStage #CreateNavi.close .create a { background-position: 0px -98px; }
body.createStage #CreateNavi.close .create a:hover { background-position: -237px -98px; }

body.createSeries #CreateNavi.open .series	a { background-position: -474px -147px; }
body.createSeries #CreateNavi.close .create a { background-position: -0px -147px; }
body.createSeries #CreateNavi.close .create a:hover { background-position: -237px -147px }

body.createSound #CreateNavi.open .sound	a { background-position: -474px -196px; }
body.createSound #CreateNavi.close .create a { background-position: -0px -196px; }
body.createSound #CreateNavi.close .create a:hover { background-position: -237px -196px }

body.createArrange #CreateNavi .arrange	a { background-position: -474px -245px; }

body.createShare #CreateNavi .share	a { background-position: -590px -245px; }

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


/* ==========================================================================
   Prev / Next button
   ========================================================================== */
#PageNavi #PrevButton {
	display: block;
	position: fixed;
	left: 20px;
	top: 50%;
	margin-top: -45px;
	width: 75px;
	height: 75px;
	background-image: url(../images/create/navi.png);
	background-repeat: no-repeat;
	background-size: 711px 369px;
	background-position: -175px -294px;
	text-indent: -9999px;
}

#PageNavi #PrevButton:hover {
	background-position: -250px -294px;
}

#PageNavi #NextButton {
	display: block;
	position: fixed;
	right: 20px;
	top: 50%;
	margin-top: -35px;
	width: 75px;
	height: 75px;
	background-image: url(../images/create/navi.png);
	background-repeat: no-repeat;
	background-size: 711px 369px;
	background-position: -25px -294px;
	text-indent: -9999px;
}

#PageNavi #NextButton:hover {
	background-position: -100px -294px;
}
/* ==========================================================================
   Create Top
   ========================================================================== */
body.createIndex h1 {
	display: block;
	margin-left: 5%;
	background-image: url(../images/create/title-create.png);
	background-repeat: no-repeat;
	background-size: 688px 207px;
	text-indent: -9999px;
	width: 688px;
	height: 207px;
}

body.createIndex h1 .title {
	display: block;
	width: 688px;
	height: 207px;
}

body.createIndex h1 .image {
	display: block;
	margin-left: -40px;
	margin-top: 15px;
}

body.createIndex #MainVideo {
	margin: -70px auto auto auto;
	width: 940px;
	height: 520px;
	background-image: url(../images/create/image-gamepad.png);
	background-repeat: no-repeat;
	background-size: 940px 520px;
}

body.createIndex #MainVideo .inner {
	padding-left: 230px;
	padding-top: 127px;
}

body.createIndex #MainVideo .ytVideo {
	display: block;
	background-color: #000;
	width: 480px;
	height: 270px;
}

body.createIndex #MainContent{
	margin-top: 60px;
}


/* ==========================================================================
   Create / Combi
   ========================================================================== */

body.createCombi #MainContent {
	width: 100%;
	min-width: 960px;
	height: -webkit-calc( 100% - 120px );
	height: calc( 100% - 120px );
	padding: 0;
	overflow: hidden;
}

body.createCombi #MainContent .left {
	width: 50%;
	height: 100%;
	float: left;
}

body.createCombi #MainContent .description {
	width: 518px;
	height: 320px;
	background-image: url(../images/create/combi/title-combi.png);
	background-repeat: no-repeat;
	background-size: 518px 320px;
	text-indent: -9999px;
	margin-top: 60px;
	margin-left: 40px;
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
}

body.createCombi #MainContent .description img {
	display: block;
	position: absolute;
	margin-top: -20px;
	margin-left: 440px;
}

body.createCombi #MainContent .left > img.marioImg {
	display: block;
	position: absolute;
	height: auto;
	bottom: 0%;
	left: 0%;
}

body.createCombi #MainContent .right {
	width: 50%;
	height: 100%;
	float: right;
	background-image: url(../images/create/combi/bg-characters.png);
	background-repeat: repeat;
	background-size: 960px 720px;
}

body.createCombi #MainContent .right .slot {
	position: absolute;
	top: 50%;
	width: 50%;
	height: 230px;
	overflow: hidden;
	margin-top: -115px;
	background-image: url(../images/create/combi/bg-main.png);
	background-repeat: repeat;
	background-size: 12px 12px;
}

body.createCombi #MainContent .right .slot > .inner {
	width: 610px;
	height: 230px;
	margin: auto;
}
body.createCombi #MainContent .slot img {
	display: block;
	float: left;
}

body.createCombi #MainContent .slot .part1 {
	margin-top: 65px;
	margin-left: 0px;
}

body.createCombi #MainContent .slot .plus {
	margin-top: 97px;
	margin-left: 15px;
}

body.createCombi #MainContent .slot .part2 {
	margin-top: 65px;
	margin-left: 18px;
}

body.createCombi #MainContent .slot .equal {
	margin-top: 97px;
	margin-left: 15px;
}

body.createCombi #MainContent .slot .part1,
body.createCombi #MainContent .slot .part2 {
	float: left;
	width: 113px;
	height: 113px;
	background-image: url(../images/create/combi/bg-combi.png);
	background-size: 113px 113px;
}

body.createCombi #MainContent .slot .part1 .inner {
	width: 110px;
	height: 110px;
	background-image: url(../images/create/combi/image-combi1.png);
	background-size: 113px 2373px;
}

body.createCombi #MainContent .slot .part2 .inner {
	width: 110px;
	height: 110px;
	background-image: url(../images/create/combi/image-combi2.png);
	background-size: 113px 2373px;
}

body.createCombi #MainContent .slot .combined {
	float: left;
	width: 230px;
	height: 230px;
	margin-left: -25px;
	overflow: visible;
}

body.createCombi #MainContent .slot .combined .inner {
	width: 270px;
	height: 230px;
	background-image: url(../images/create/combi/image-combi3.png);
	background-repeat: no-repeat;
	background-position: 450px 0px;
	background-size: 1890px 230px;
}

/* ==========================================================================
   Create / Stage
   ========================================================================== */

body.createStage #MainContent {
	/*width: 100%;
	min-width: 960px;
	height: -webkit-calc( 100% - 120px );
	height: calc( 100% - 120px );
	padding: 0;
	overflow: hidden;*/
	height: -webkit-calc( 100% - 120px );
	height: calc( 100% - 120px );
	padding-bottom: 0;
}


body.createStage #MainContent .left {
	width: 50%;
	height: 100%;
	float: left;
}

body.createStage #MainContent .description {
	width: 518px;
	height: 320px;
	background-image: url(../images/create/stage/title-stage.png);
	background-repeat: no-repeat;
	background-size: 518px 320px;
	text-indent: -9999px;
	margin-top: 60px;
	margin-left: 40px;
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
}

body.createStage #MainContent .description img {
	display: block;
	position: absolute;
	margin-top: 60px;
	margin-left: 430px;

}
body.createStage #MainContent .left > img.marioImg {
	display: block;
	position: absolute;
/* 	margin: 40px auto auto auto; */
/* 	width: 80%; */
	height: auto;
	bottom: 0%;
	left: 0%;
	
}

body.createStage #MainContent .description img {
	display: block;
	position: absolute;
}

/*
@keyframes cloudmove {
	0% {background-position: 0 0;}
	100% {background-position: 0 -4608px;}
}

@-webkit-keyframes cloudmove {
	0% {background-position: 0 0;}
	100% {background-position: 0 -4608px;}
}

@-moz-keyframes cloudmove {
	0% {background-position: 0 0;}
	100% {background-position: 0 -4608px;}
}
*/

body.createStage #MainContent .right {
	width: 50%;
	height: 100%;
	
	float: right;
	background: url(../images/create/stage/bg-stages.png);
	background-repeat: repeat-y;
	background-size: 100% auto;
	z-index: 1;
/* 	background-position: 0 calc( 1368px * 4617px); */
	
	/*
	animation: cloudmove 5s linear infinite;
	-webkit-animation: cloudmove 5s linear infinite;
	-moz-animation: cloudmove 5s linear infinite;
	*/

}


/* ==========================================================================
   Create / Series
   ========================================================================== */
body.createSeries {
	background-image: none;
	background-color: #37344a;
}
body.createSeries #MainContent {
	width: 100%;
	min-width: 960px;
	height: -webkit-calc( 100% - 120px );
	height: calc( 100% - 120px );
	padding: 0;
	overflow: hidden;
}

body.createSeries #MainContent div.bg {
	float: left;
	width: 100%;
	height: 100%;
}
body.createSeries #MainContent div.bg > div {
	float: left;
	width: 50%;
	height: -webkit-calc( 50% - 100px );
	height: calc( 50% - 100px );
	overflow: hidden;
}

body.createSeries #MainContent div.bg img.bg {
	display: block;
	height: auto;
	width: 100%;
}

body.createSeries #MainContent div.bg img.logo {
	position: absolute;
	display: block;
}

body.createSeries #MainContent .series3,
body.createSeries #MainContent .series4 {
	margin-top: 200px;
}

body.createSeries #MainContent div.bg .series1 img.logo {
	top: calc( 50% - 196px );
	margin-left: -webkit-calc( 50% - 260px );
	margin-left: calc( 50% - 260px );
}
body.createSeries #MainContent div.bg .series2 img.logo {
	top: calc( 50% - 196px );
}
body.createSeries #MainContent div.bg .series3 img.logo {
	margin-left: -webkit-calc( 50% - 260px );
	margin-left: calc( 50% - 260px );
}


body.createSeries #MainContent .description {
	width: 605px;
	height: 120px;
	background-image: url(../images/create/series/title-series.png);
	background-repeat: no-repeat;
	background-size: 605px 120px;
	text-indent: -9999px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -70px;
	margin-left: -360px;
}

body.createSeries #MainContent .mario {
	display: block;
	position: absolute;
	background-image: url(../images/create/series/image-mario.png);
	background-size: 720px 226px;
	background-position: -0px 0px;
	width: 180px;
	height: 226px;
	top: 50%;
	left: 50%;
	margin-top: -155px;
	margin-left: 240px;
}

/* ==========================================================================
   Create / Sound
   ========================================================================== */

body.createSound #MainContent {
	width: 100%;
	min-width: 960px;
	max-width: 1400px;
	height: -webkit-calc( 100% - 120px );
	height: calc( 100% - 120px );
	padding: 0 0 70px 0;
	overflow: hidden;
	min-height: 720px;
	margin: 0 auto;
}

body.createSound #MainContent .right {
	width: 50%;
	height: 100%;
	float: right;
	z-index: 1;
	position: relative;
	margin-top: 10px;
}

body.createSound #MainContent .right #MainSound {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 1;
	width: 543px;
	height: 543px;
}

body.createSound #MainContent .left {
	width: 50%;
	height: 100%;
	float: left;
	position: relative;
	z-index: 10;
}

body.createSound #MainContent .left .inner {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
    left: 15%;
    margin: 10px 0 0;
}

body.createSound #MainContent .left .description {
	width: 518px;
	height: 320px;
	background-image: url(../images/create/sound/title-sound.png);
	background-repeat: no-repeat;
	background-size: 518px 320px;
	text-indent: -9999px;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

body.createSound #MainContent .left .image {
	position: absolute;
	top: -25px;
	left: 420px;
}

body.createSound #MainContent .left .variation {
	position: absolute;
	top: -45px;
	left: 400px;
}

body.createSound #MainContent .left .soundIcon {
	width: 560px;
	height: 256px;
	margin: 40px auto;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

body.createSound #PageNavi #PrevButton,
body.createSound #PageNavi #NextButton {
	z-index: 10;
}

body.createSound #Footer {
	z-index: 20;
}

body.createSound #MainContent #Panel.upper {
	width: 560px;
	margin-left: -10px;
}

body.createSound #MainContent #Panel.lower {
	width: 440px;
	margin-left: 45px;
}

body.createSound #MainContent #Panel li {
	display: block;
	float: left;
	width: 110px;
	height: 120px;
}

body.createSound #MainContent #Panel li a {
	display: block;
	background-image: url(../images/create/sound/btn-sound.png);
	background-repeat: no-repeat;
	background-size: 1030px 309px;
	width: 103px;
	height: 103px;
	margin: 6px 5px 6px 0;
	text-indent: -9999px;
}

body.createSound #MainContent .right #MainVideo .inner .ytVideo {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

body.createSound #MainContent .right #MainSound a.closeBtn {
	position: absolute;
    top: 465px;
    left: 435px;
	display: block;
	overflow: hidden;
	width: 60px;
	height: 60px;
	background-image: url(../images/create/sound/btn-close.png);
	background-repeat: no-repeat;
	background-size: 60px 120px;
	text-indent: -9999px;
	z-index: 1;
}

body.createSound #MainContent .right #MainSound a.closeBtn:hover {
	background-position: 0 -60px;
}

body.createSound #MainContent .right #MainSound .variation {
	position: absolute;
    top: 420px;
    left: 405px;
}

body.createSound #MainContent .right #MainSound img {
	z-index: 10;
}

body.createSound #MainContent .right #MainVideo .inner .ytVideo {
	width: 545px;
	height: 545px;
	position: absolute;
	top: 271px;
	overflow: hidden;
}

body.createSound #MainContent .right #MainVideo .inner .ytVideo iframe {
	position: absolute;
	left: -200px;
	top: -79px;
	width: 918px;
	height: 702px;
	z-index: 0;
}

body.createSound #MainContent .right #MainVideo canvas {
	position: absolute;
	top: 50%;
	left: -1px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 0;
}

body.createSound #ModalVideo {
	position: fixed;
	background-color: rgba( 245, 200, 0, 0.85 );
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: none;
}

body.createSound #ModalVideo .ytVideo {
	width: 900px;
	height: 542px;
}

body.createSound #ModalVideo .ytVideo.square {
	width: 542px;
	height: 542px;
	margin:auto;
}


body.createSound #ModalVideo .inner {
	position: absolute;
	width: 900px;
	height: 636px;
	left: 50%;
	top: 50%;
	margin-left: -450px;
	margin-top: -318px;
}

body.createSound #ModalVideo .close {
	margin: auto;
	display: block;
	width: 60px;
	height: 60px;
	background-image: url(../images/common/btn-close.png);
	background-repeat: no-repeat;
	background-size: 60px 60px;
	margin-top: 30px;
	text-indent: -9999px;
}


body.createSound #MainContent #Panel .btn1 a { background-position: 0 0; }
body.createSound #MainContent #Panel .btn2 a { background-position: -103px 0; }
body.createSound #MainContent #Panel .btn3 a { background-position: -206px 0; }
body.createSound #MainContent #Panel .btn4 a { background-position: -309px 0; }
body.createSound #MainContent #Panel .btn5 a { background-position: -412px 0; }
body.createSound #MainContent #Panel .btn6 a { background-position: -515px 0; }
body.createSound #MainContent #Panel .btn7 a { background-position: -618px 0; }
body.createSound #MainContent #Panel .btn8 a { background-position: -721px 0; }
body.createSound #MainContent #Panel .btn9 a { background-position: -824px 0; }
body.createSound #MainContent #Panel .tutorial a { background-position: -927px 0; }

body.createSound #MainContent #Panel .btn1 a:hover { background-position: 0 -103px; }
body.createSound #MainContent #Panel .btn2 a:hover { background-position: -103px -103px; }
body.createSound #MainContent #Panel .btn3 a:hover { background-position: -206px -103px; }
body.createSound #MainContent #Panel .btn4 a:hover { background-position: -309px -103px; }
body.createSound #MainContent #Panel .btn5 a:hover { background-position: -412px -103px; }
body.createSound #MainContent #Panel .btn6 a:hover { background-position: -515px -103px; }
body.createSound #MainContent #Panel .btn7 a:hover { background-position: -618px -103px; }
body.createSound #MainContent #Panel .btn8 a:hover { background-position: -721px -103px; }
body.createSound #MainContent #Panel .btn9 a:hover { background-position: -824px -103px; }
body.createSound #MainContent #Panel .tutorial a:hover { background-position: -927px -103px; }

body.createSound #MainContent #Panel .btn1 a.selected { background-position: 0 -206px; }
body.createSound #MainContent #Panel .btn2 a.selected { background-position: -103px -206px; }
body.createSound #MainContent #Panel .btn3 a.selected { background-position: -206px -206px; }
body.createSound #MainContent #Panel .btn4 a.selected { background-position: -309px -206px; }
body.createSound #MainContent #Panel .btn5 a.selected { background-position: -412px -206px; }
body.createSound #MainContent #Panel .btn6 a.selected { background-position: -515px -206px; }
body.createSound #MainContent #Panel .btn7 a.selected { background-position: -618px -206px; }
body.createSound #MainContent #Panel .btn8 a.selected { background-position: -721px -206px; }
body.createSound #MainContent #Panel .btn9 a.selected { background-position: -824px -206px; }
body.createSound #MainContent #Panel .tutorial a.selected { background-position: -927px -206px; }



/* ==========================================================================
   Create / Share
   ========================================================================== */

body.createShare {
	background-image: url(../images/common/bg-pink-light.png);
	background-repeat: repeat;
	background-attachment: fixed;
}

body.createShare #MainContent {
	width: 840px;
	height: 792px;
	background-image: url(../images/create/share/bg-main.png);
	background-repeat: no-repeat;
	background-size: 840px 792px;
	margin: 60px auto auto auto;
}

body.createShare #MainContent .inner {
	padding-top: 60px;
}

body.createShare #MainContent h1 {
	display: block;
	margin: auto;
	width: 446px;
	height: 155px;
	background-image: url(../images/create/share/title-share.png);
	background-repeat: no-repeat;
	background-size: 446px 155px;
	text-indent: -9999px;
}

body.createShare #MainContent h2 {
	display: block;
	width: 240px;
	height: 36px;
	background-image: url(../images/create/share/title-sub.png);
	background-repeat: no-repeat;
	background-size: 240px 36px;
	text-indent: -9999px;
	margin: 40px auto auto auto;
}

body.createShare #MainContent p {
	display: block;
	width: 610px;
	height: 150px;
	background-image: url(../images/create/share/text-description.png);
	background-repeat: no-repeat;
	background-size: 610px 150px;
	text-indent: -9999px;
	margin: 30px auto auto auto;
}

body.createShare #MainContent img {
	display: block;
	margin: 50px auto auto auto;
}

/* ==========================================================================
   Create / Arrange
   ========================================================================== */

body.createArrange {
	background-image: url(../images/common/bg-pink-light.png);
	background-repeat: repeat;
	background-attachment: fixed;
}

body.createArrange #MainContent {
	width: 840px;
	height: 440px;
	background-image: url(../images/create/arrange/bg-main.png);
	background-repeat: no-repeat;
	background-size: 840px 440px;
	position: absolute;
	top: 50%;
	left:50%;
	margin-left: -420px;
	margin-top: -220px;
	padding:0;
}

body.createArrange #MainContent .inner {
	padding-top: 60px;
}

body.createArrange #MainContent h1 {
	display: block;
	margin: auto;
	width: 386px;
	height: 154px;
	background-image: url(../images/create/arrange/title-arrange.png);
	background-repeat: no-repeat;
	background-size: 386px 154px;
	text-indent: -9999px;
}

body.createArrange #MainContent p {
	display: block;
	width: 618px;
	height: 115px;
	background-image: url(../images/create/arrange/text-description.png);
	background-repeat: no-repeat;
	background-size: 618px 115px;
	text-indent: -9999px;
	margin: 30px auto auto auto;
}

body.createArrange #MainContent img {
	display: block;
	margin: 35px auto auto auto;
}