@charset "Shift_JIS";

/* CSS Information ==========================================

	File Name: styles.css

	Description: reset and styles

	Editors: Redmoai.com

	Date: 2009.04.30

========================================================== */





/* スタイルリセット */

* {

	margin: 0;

	padding: 0;

	border: none;

	color: #ffffff;

	font-size: 100%;

	font-weight: normal;

	font-style: normal; /* addressやemなどの斜体を通常体に戻す */

	text-decoration: none;

	line-height: 1.0;

}



/* スクロールバー */

html {

	overflow: scroll;

	overflow: -moz-scrollbars-vertical;

	overflow-x: scroll;

}



/* テーブルボーダー */

table {

	border-collapse;

	border-spacing: 0;

}



/* フォントサイズ */

body {

	font: 13px/1.231 arial, helvetica, clean, sans-serif; /* 通常のブラウザ */

	*font-size: small; /* IE全般 */

	*font: x-small; /* IE6/7後方互換モード */

}



/* IE6以前でtableへフォントサイズの継承が上手くいかない問題を回避 */

table {font-size: inherit; font: 100%;}



/* IE全般でpreやcodeの等幅フォントのサイズが小さくなるのを回避 */

pre, code, kbd, samp, tt {

	font-family: monospace;

	*font-size: 108%;

	line-height: 100%;

}



/* フォントの種類 */

* {

	font-family:

		"ヒラギノ角ゴ Pro W3", "Hiragino kaku Gothic Pro",

		"メイリオ", Meiryo,

		Osaka,

		"MS P ゴシック", "MS P Gothic",

		sans-serif;

}



/* IE7に対するフォントの種類 */

*:first-child+html * {

	font-family:

		"メイリオ", Meiryo,

		"MS P ゴシック", "MS P Gothic",

		sans-serif;

}



/* IE6に対するフォントの種類 */

* html * {

	font-family:

		"メイリオ", Meiryo,

		"MS P ゴシック", "MS P Gothic",

		sans-serif;

}

/* =========================================================

	header

========================================================== */

/* header */

#header {

	position: relative;

	width: 780px;

	height: 270px;

	margin: 0 auto;

	padding-top: 0px;

	background: url(img/title.gif) no-repeat 0px 20px;

	background-color: #ffffff;

}



p#header_str {

	position: absolute;

	top:  0px;

	left: 0px;

	width: 780px;

	font-size: 11px;

	color: #ffffff;

	text-align: center;

	padding-top: 2px;

	padding-bottom: 2px;

	background-color: #7F00FF;

}



#header h1 {

	width: 0px;

	height: 0px;

	overflow: hidden;

}



/* global_nav */

#global_nav {

	position: absolute;

	width: 457px;

	height: 14px;

	margin: 0 auto;

	padding-top: 0px;

	top: 154px;

	right: 0px;

	background: #ffffff;

}



#global_nav h2 {

	width: 0px;

	height: 0px;

	overflow: hidden;

}



#global_nav ul {

	position: absolute;

	width: 457px;

	height: 14px;

	top: 0px;

	left: 0px;

}



#global_nav li {

	list-style: none;

	float: left;

	width: 90px;

	height: 14px;

	font-size: 12px;

	padding-top: 2px;

	border-left: 1px solid #313131;

}



#global_nav li a {

	display: block;

	text-align: center;

	color: #313131;

}



#global_nav li a:hover {

	color: orangered;

}



/* keyvisual_1 */

#keyvisual_1 {

	position: absolute;

	width: 780px;

	height: 100px;

	top: 170px;

	left: 0px;

	background: url(img/key_bar.gif) no-repeat;

}



#keyvisual_1 h2 {

	width: 0px;

	height: 0px;

	overflow: hidden;

}



#key_1 {

	position: absolute;

	top: 10px;

	left: 6px;

}



#key_2 {

	position: absolute;

	top: 10px;

	left: 92px;

}



#key_3 {

	position: absolute;

	top: 10px;

	left: 178px;

}



#key_4 {

	position: absolute;

	top: 10px;

	left: 264px;

}



#key_5 {

	position: absolute;

	top: 10px;

	left: 350px;

}



#key_6 {

	position: absolute;

	top: 10px;

	left: 436px;

}



#key_7 {

	position: absolute;

	top: 10px;

	left: 522px;

}



#key_8 {

	position: absolute;

	top: 10px;

	left: 608px;

}



#key_9 {

	position: absolute;

	top: 10px;

	left: 694px;

}



/* =========================================================

	container

========================================================== */

/* container */

#container {

	position: relative;

	width: 780px;

	height: 400px;

	margin: 0 auto;

	padding-top: 0px;

	background-color: #ffffff;

}



/* contents */

#contents {

	position: absolute;

	width: 150px;

	height: 400px;

	top: 0px;

	left: 0px;

	background: #E3C7FE;

}



#contents h2 {

	width: 0px;

	height: 0px;

	overflow: hidden;

}



#contents ul {

	position: absolute;

	width: 140px;

	top: 5px;

	left: 5px;

}



#contents li {

	list-style: none;

	display: block;

	width: 140px;

	height: 15px;

	border: 1px solid #313131;

	padding-top: 4px;

	margin-top: 3px;

	font-size: 12px;

	color: #313131;

	text-align: center;

	background: #cc99ff;

}



#contents li#main {

	background: url(img/menu_bg.gif) no-repeat;

}



#contents li a {

	color: #313131;

}



#contents li a:hover {

	color: #ffffff;

}



/* counter */

#counter {

	position: absolute;

	bottom: 5px;

	left: 5px;

}



/* str */

#str {

	position: absolute;

	width: 300px;

	top: 0px;

	left: 160px;

	padding-top: 40px;

	background: #ffffff;

	z-index: 2;

}



#str h2 {

	position: absolute;

	top: 10px;

	left: 0px;

}



#str p {

	font-size: 13px;

	color: #313131;

	text-indent: 1.0em;

	line-height: 1.5;

}



#str a {

	text-decoration: underline;

	color: blue;

}



#str a:hover {

	color: orangered;

}



/* keyvisual_2 */

#keyvisual_2 {

	position: absolute;

	width: 300px;

	height: 200px;

	top: 10px;

	right: 10px;

	background: #313131;

	z-index: 1;

}



/* str_2*/

#str_2 {

	position: absolute;

	width: 600px;

	height: 140px;

	bottom: 5px;

	left: 160px;

	background: #ffffff;

}



#str_2 h3 {

	width: 0px;

	height: 0px;

	overflow: hidden;

}



#str_2 p {

	line-height: 1.5;

	color: #313131;

}



#str_2 a {

	color: blue;

}



#str_2 a:hover {

	color: orangered;

}



/* character */

#character {

	position: absolute;

	bottom: 0px;

	right: 5px;

}



/* =========================================================

	copyright

========================================================== */

/* copyright */

#copyright {

	position: relative;

	width: 780px;

	margin: 0 auto;

	top: 0px;

	left: 0px;

	background: #ffffff;

}



#copyright p {

	position: absolute;

	width: 780px;

	top: 0px;

	left: 0px;

	font-size: 13px;

	color: #ffffff;

	padding-top: 5px;

	padding-bottom: 5px;

	text-align: center;

	background-color: #7F00FF;

}