@charset 'utf-8';

/*-------------------------------------
Main
---------------------------------------*/
#Content {
	line-height: 1;
	text-align: center;
	background: #eee;
}
div.base_inside div.sample_box {
	display: inline-block;
	position: relative;
	z-index: 1;
	margin-left: 40px;
	vertical-align: top;
}
div.base_inside div.sample_box:first-of-type {margin-left: 0;}
#Content .two_tone {
	max-width: 2000px;
	position: relative;
	margin: 0 auto;
}
#Content .two_tone.bg01{
	background: url('../images/twotone_bg01.png') center center repeat-y;
}
#Content .two_tone.bg02{
	background: url('../images/twotone_bg02.png') center top repeat-y;
}
#Content .two_tone:before,
#Content .two_tone:after {
	content: '';
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
}
#Content .two_tone:before {
	width: 202px;
	right: 50%;
	margin-right: 798px;
	background: #9d231a;
}
#Content .two_tone:after {
	width: 202px;
	left: 50%;
	margin-left: 798px;
	background: #133e78;
}

/*-------------------------------------
Intro
---------------------------------------*/
div.intro div.base_wrap {background-image: url('../images/intro_bg01.jpg');}
div.intro div.base_inside {height: 435px;}
div.intro h2 {
	margin: 0 0 58px;
	padding: 132px 0 0;
}

/*-------------------------------------
Gym
---------------------------------------*/
div.gym h2 {
	height: 100px;
}
div.gym h2 img {
	position: absolute;
}
div.gym h2 img.ttl {
	top: 28px;
	left: 50%;
	margin-left: -329px;
}
div.gym h2 img.chara01 {
	top: -87px;
	left: 50%;
	margin-left: -689px;
}
div.gym h2 img.chara02 {
	top: -130px;
	left: 50%;
	margin-left: 282px;
}
div.gym div.outline.base_wrap {background-image: url('../images/gym_bg01.jpg');}
div.gym div.outline div.base_inside {height: 457px;}
div.gym p.lead {
	margin: 0 0 40px;
	padding: 60px 0 0;
}
div.gym div.choose div.base_inside {height: 490px;}
div.gym div.choose h3 {padding: 294px 3px 0 0;}
div.gym div.choose ul.scene li {position: absolute;}
div.gym div.choose ul.scene li.scene01 {top: 228px;left: -164px;}
div.gym div.choose ul.scene li.scene02 {z-index: 1;top: 59px;left: -2px;}
div.gym div.choose ul.scene li.scene03 {top: 36px;left: 261px;}
div.gym div.choose ul.scene li.scene04 {z-index: 1;top: 136px;left: 389px;}
div.gym div.choose ul.scene li.scene05 {z-index: 2;top: 59px;left: 638px;}
div.gym div.choose ul.scene li.scene06 {top: 229px;left: 815px;}

/*-------------------------------------
Story
---------------------------------------*/
div.story div.base_wrap {background-image: url('../images/story_bg01.jpg');}
div.story div.base_wrap > div.base_inside {height: 275px;}
div.story h2 {
	margin: 0 0 36px;
	padding: 60px 0 0;
}
div.story div.stories div.base_inside {
	height: 1028px;
}
div.story div.stories div.inside {
	height: 841px;
}
div.story div.stories div.inside:after {
	content: '';
	display: block;
	clear: both;
}
div.story div.stories div.inside div.mario,
div.story div.stories div.inside div.sonic {width: 50%; position: relative;}
div.story div.stories div.inside div.mario {float: left;}
div.story div.stories div.inside div.sonic {float: right;}

div.story div.stories div.inside h3,
div.story div.stories div.inside ul li,
div.story div.stories div.inside p.chara {position: absolute;}

div.story div.stories div.inside div.mario h3 {top: 61px;left: 81px;}
div.story div.stories div.inside div.mario li.img01 {top: 173px;left: 250px;}
div.story div.stories div.inside div.mario li.img02 {top: 153px;left: 18px;}
div.story div.stories div.inside div.mario li.img03 {top: 358px;left: 20px;}
div.story div.stories div.inside div.mario li.img04 {top: 623px;left: 154px;}
div.story div.stories div.inside div.mario p.chara {top: 358px;left: -19px;}

div.story div.stories div.inside div.sonic h3 {top: 63px;left: 49px;}
div.story div.stories div.inside div.sonic li.img01 {top: 173px;left: 2px;}
div.story div.stories div.inside div.sonic li.img02 {top: 153px;left: 234px;}
div.story div.stories div.inside div.sonic li.img03 {top: 358px;left: 2px;}
div.story div.stories div.inside div.sonic li.img04 {top: 623px;left: 2px;}
div.story div.stories div.inside div.sonic p.chara {top: 393px;left: 378px;}

/*-------------------------------------
Clear
---------------------------------------*/
div.clear div.base_wrap {background-image: url('../images/clear_bg01.jpg');}
div.clear div.base_inside {height: 905px;}
div.clear h2 {
	margin: 0 0 39px;
	padding: 71px 0 0;
}
div.clear p.text_box {
	position: relative;
	margin: 0 0 45px;
}
div.clear p.text_box a {
	display: block;
	position: absolute;
	top: 73px;
	left: 332px;
}
div.clear p.text_box a span {
	display: inline-block;
}