@charset "shift_jis";


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	file name : mario.css

 : :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

@import "../../assets/styles/reset.css";
@import "../../assets/styles/class.css";

	
/* ********************************************************************************
 * Link
 * ******************************************************************************** */

a {
	outline: none;
}
/* a:link */
a:link {
	color: #ffffff;
	text-decoration: none;
}
/* a:active */
a:active {
	color: #ffffff;
	text-decoration: none;
}
/* a:visited */
a:visited {
	color: #ffffff;
	text-decoration: none;
}
/* a:hover */
a:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* ********************************************************************************
 * Base Layout
 * ******************************************************************************** */

/* html */
html,body {
	height: 100%;
}
/* body */
body {
	background: #fff;
	font-family: "メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	text-align: left;
}


/* ********************************************************************************
 * ■マリオのキホンの操作
 * file path : /action/mario/action*.html
 * body id name : body#action
 * ******************************************************************************** */

/* div#content
 * ================================================================================ */
body#action div#content {
	position:absolute; top:50%; left:50%;
	width: 706px;
	height: 347px;
	margin: -173px 0 0 -353px;
	background: url(images/bg_content.jpg) 0 0 no-repeat;
}
/* p#title */
body#action div#content p#title {
	position:absolute; top:-28px; right:13px;
	z-index: 100;
}
/* ul.sliderNav
------------------------------------------------------------*/
body#action div#content ul.sliderNav {
	position:absolute; top:39px; left:59px;
	width: 608px;
}
body#action div#content ul.sliderNav li {
	float: left;
	width: 132px;
	height: 28px;
	margin-right: 20px;
	background: 0 0 no-repeat;
	text-indent: -9000px;
	font-size: 0;
	line-height: 0;
}
body#action div#content ul.sliderNav li a {
	display: block;
	width: 132px;
	height: 28px;
	background: 0 0 no-repeat;
}
body#action div#content ul.sliderNav li.run,
body#action div#content ul.sliderNav li.run a {
	background-image: url(../../action/images/mario/action_btn_run.jpg);
}
body#action div#content ul.sliderNav li.jump,
body#action div#content ul.sliderNav li.jump a {
	background-image: url(../../action/images/mario/action_btn_jump.jpg);
}
body#action div#content ul.sliderNav li.spin,
body#action div#content ul.sliderNav li.spin a {
	background-image: url(../../action/images/mario/action_btn_spin.jpg);
}
body#action div#content ul.sliderNav li.starpiece,
body#action div#content ul.sliderNav li.starpiece a {
	background-image: url(../../action/images/mario/action_btn_starpiece.jpg);
}
body#action div#content ul.sliderNav li.run,
body#action div#content ul.sliderNav li.jump,
body#action div#content ul.sliderNav li.spin,
body#action div#content ul.sliderNav li.starpiece,
body#action div#content ul.sliderNav li.run a:hover,
body#action div#content ul.sliderNav li.jump a:hover,
body#action div#content ul.sliderNav li.spin a:hover,
body#action div#content ul.sliderNav li.starpiece a:hover {
	background-position: 0 100%;
}
/* div.img */
body#action div#content div.img {
	position:absolute; top:97px; left:59px;
}
/* p.txt_1 */
body#action div#content p.txt_1 {
	position:absolute; top:97px; left:410px;
}
/* p.btnPrev */
body#action div#content p.btnPrev {
	position:absolute; top:291px; left:25px;
}
body#action div#content p.btnPrev a {
	display: block;
	width: 67px;
	height: 37px;
	background: url(images/btn_prev.jpg) 0 0 no-repeat;
	text-indent: -9000px;
	font-size: 0;
	line-height: 0;
}
body#action div#content p.btnPrev a:hover {
	background-position: 0 100%;
}
/* p.btnNext */
body#action div#content p.btnNext {
	position:absolute; top:291px; right:27px;
}
body#action div#content p.btnNext a {
	display: block;
	width: 70px;
	height: 37px;
	background: url(images/btn_next.jpg) 0 0 no-repeat;
	text-indent: -9000px;
	font-size: 0;
	line-height: 0;
}
body#action div#content p.btnNext a:hover {
	background-position: 0 100%;
}

/* ********************************************************************************
 * ■しかけいっぱいのフィールドで
 * file path : /apparatus/mario/apparatus*.html
 * body id name : body#apparatus
 * ******************************************************************************** */

/* div#content
 * ================================================================================ */
body#apparatus div#content {
	position:absolute; top:50%; left:50%;
	width: 706px;
	height: 347px;
	margin: -173px 0 0 -353px;
	background: url(images/bg_content.jpg) 0 0 no-repeat;
}
/* p#title */
body#apparatus div#content p#title {
	position:absolute; top:-28px; right:13px;
	z-index: 100;
}
/* ul.sliderNav
------------------------------------------------------------*/
body#apparatus div#content ul.sliderNav {
	position:absolute; top:39px; left:50px;
	width: 635px;
}
body#apparatus div#content ul.sliderNav li {
	float: left;
	margin-right: 21px;
}
/* li.off */
body#apparatus div#content ul.sliderNav li {
	float: left;
	margin-right: 21px;
	width: 182px;
	height: 28px;
	text-indent: -9000px;
	font-size: 0;
	line-height: 0;
}
body#apparatus div#content ul.sliderNav li a {
	display: block;
	width: 182px;
	height: 28px;
	background: 0 0 no-repeat;
	text-indent: -9000px;
	font-size: 0;
	line-height: 0;
}
body#apparatus div#content ul.sliderNav li.drill,
body#apparatus div#content ul.sliderNav li.drill a {
	background-image: url(../images/mario/apparatus_btn_drill.jpg);
}
body#apparatus div#content ul.sliderNav li.ride,
body#apparatus div#content ul.sliderNav li.ride a {
	background-image: url(../images/mario/apparatus_btn_ride.jpg);
}
body#apparatus div#content ul.sliderNav li.other,
body#apparatus div#content ul.sliderNav li.other a {
	background-image: url(../images/mario/apparatus_btn_other.jpg);
}
body#apparatus div#content ul.sliderNav li.drill,
body#apparatus div#content ul.sliderNav li.drill a:hover,
body#apparatus div#content ul.sliderNav li.ride,
body#apparatus div#content ul.sliderNav li.ride a:hover,
body#apparatus div#content ul.sliderNav li.other,
body#apparatus div#content ul.sliderNav li.other a:hover {
	background-position: 0 100%;
}
/* div.img */
body#apparatus div#content div.img {
	margin: 97px 0 0 50px;
}
/* p.txt_1 */
body#apparatus div#content p.txt_1 {
	position:absolute; top:84px; left:410px;
}
/* p.btnPrev */
body#apparatus div#content p.btnPrev {
	position:absolute; top:291px; left:25px;
}
body#apparatus div#content p.btnPrev a {
	display: block;
	width: 67px;
	height: 37px;
	background: url(images/btn_prev.jpg) 0 0 no-repeat;
	text-indent: -9000px;
	font-size: 0;
	line-height: 0;
}
body#apparatus div#content p.btnPrev a:hover {
	background-position: 0 100%;
}
/* p.btnNext */
body#apparatus div#content p.btnNext {
	position:absolute; top:291px; right:27px;
}
body#apparatus div#content p.btnNext a {
	display: block;
	width: 70px;
	height: 37px;
	background: url(images/btn_next.jpg) 0 0 no-repeat;
	text-indent: -9000px;
	font-size: 0;
	line-height: 0;
}
body#apparatus div#content p.btnNext a:hover {
	background-position: 0 100%;
}


/* ********************************************************************************
 * ■新しい変身アクション
 * file path : /apparatus/mario/transform*.html
 * body id name : body#transform1
 * ******************************************************************************** */

/* div#content
 * ================================================================================ */
body#transform1 div#content {
	position:absolute; top:50%; left:50%;
	width: 706px;
	height: 347px;
	margin: -173px 0 0 -353px;
	background: url(images/bg_content.jpg) 0 0 no-repeat;
}
/* p#title */
body#transform1 div#content p#title {
	position:absolute; top:-28px; right:13px;
	z-index: 100;
}
/* h2 */
body#transform1 div#content h2 {
	position:absolute; top:29px; left:56px;
}
/* div.img */
body#transform1 div#content div.img {
	position:absolute; top:87px; left:59px;
}
/* p.txt_cloud */
body#transform1 div#content p.txt_cloud {
	position:absolute; top:23px; left:410px;
}
/* p.txt_rock */
body#transform1 div#content p.txt_rock {
	position:absolute; top:87px; left:410px;
}
/* p.btnPrev */
body#transform1 div#content p.btnPrev {
	position:absolute; top:291px; left:25px;
}
body#transform1 div#content p.btnPrev a {
	display: block;
	width: 67px;
	height: 37px;
	background: url(images/btn_prev.jpg) 0 0 no-repeat;
	text-indent: -9000px;
	font-size: 0;
	line-height: 0;
}
body#transform1 div#content p.btnPrev a:hover {
	background-position: 0 100%;
}
/* p.btnNext */
body#transform1 div#content p.btnNext {
	position:absolute; top:291px; right:27px;
}
body#transform1 div#content p.btnNext a {
	display: block;
	width: 70px;
	height: 37px;
	background: url(images/btn_next.jpg) 0 0 no-repeat;
	text-indent: -9000px;
	font-size: 0;
	line-height: 0;
}
body#transform1 div#content p.btnNext a:hover {
	background-position: 0 100%;
}

/* ********************************************************************************
 * ■おなじみの変身アクションも
 * file path : /apparatus/mario/transform3.html
 * body id name : body#transform3
 * ******************************************************************************** */

/* div#content
 * ================================================================================ */
body#transform3 div#content {
	position:absolute; top:50%; left:50%;
	width: 706px;
	height: 473px;
	margin: -236px 0 0 -353px;
	background: url(images/transform3_bg_content.jpg) 0 0 no-repeat;
}
/* p#title */
body#transform3 div#content p#title {
	position:absolute; top:-28px; right:13px;
	z-index: 100;
}
/* h2 */
body#transform3 div#content h2 {
	position:absolute; top:28px; left:57px;
}
/* p.txt_1 */
body#transform3 div#content p.txt_1 {
	position:absolute; top:89px; left:78px;
}
/* p.txt_2 */
body#transform3 div#content p.txt_2 {
	position:absolute; top:89px; left:270px;
}
/* p.txt_3 */
body#transform3 div#content p.txt_3 {
	position:absolute; top:89px; left:476px;
}
/* p.txt_4 */
body#transform3 div#content p.txt_4 {
	position:absolute; top:271px; left:129px;
}/* p.txt_5 */
body#transform3 div#content p.txt_5 {
	position:absolute; top:271px; left:389px;
}
/* p.btnClose */
body#transform3 div#content p.btnClose {
	position:absolute; top:441px;
}