@charset "UTF-8";

/**********************************************************************
 * 
 * author: YOSHIDA Hiroki
 * 
 * version: 0.20090630
 * 
 **********************************************************************/


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

   タイプセレクタ： html タグに対する設定

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

/* 全てのタグ（全称セレクタ） */
* {
	margin: 0;
	padding: 0;
}

/* body */
body {
	color: #303030;
	font-size: 75%; /* small, 11pt, 75% */
	line-height: 180%;
	letter-spacing: 1px;
}

/* 見出し各種 */
h1 {
	font-size: 170%;
}

h2 {
	font-size: 140%;
	color: #666666;
}

h3 {
	font-size: 110%;
	color: #666666;
	border-bottom: 2px dotted #BABABA;
}

h4 {
	font-size: 100%;
}

/* 段落 */
p {
	margin-bottom: 0.5em;
/*	text-align: justify; */
}

/* 頭字語（略語）の元の単語を説明する時に使うタグ */
acronym {
	font-size: 100%;
	border-bottom: 1px dotted #FFEAEA;
}

/* アンカー（リンク） */
a:link {
	color: #336699;
	text-decoration: none;
}

a:visited {
	color: #306090;
	text-decoration: none;
}

a:hover, a:active {
	color: #FF6600;
	text-decoration: underline;
}

a img {
	border: none;
}

/* 順不同リスト */
ul {
	list-style: none;
}

/* テーブル */
table {
	margin: 40px auto 0;
	width: 500px;
	border-collapse: collapse;
/* css hack! for IE6 */
	_margin: 20px auto 40px;
}

* html table {
/* css hack! for IE7 */
	margin: 20px auto 40px;
}

table tr th {
	padding: 5px 10px;
	white-space: nowrap;
	border: 1px solid #CCCCCC;
	background-color: #F0F0F0;
}

table tr td {
	padding: 5px 10px;
	white-space: nowrap;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
}

table tfoot td {
	/* IE 以外のブラウザでヘッダの下部（<tfoot> を記述した場所）にもボーダーが表示されてしまう */
	border-top: 3px double #CCCCCC;
}

table tr th.table-break, table tr td.table-break {
	border-right: 3px double #CCCCCC;
}

table caption {
	margin-bottom: 20px;
	padding: 0.5em 0;
	color: #909090;
	text-align: right;
/* IE6 非対応につき注意 */
	caption-side: bottom;
}


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

   一意セレクタ： id に対する設定

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

/* 全体 */
body {
	background: #4577A9;
	background: #235587;
	background: #AAAAAA url(../images/background.png) center top repeat-y;
}

#container {
	margin: 0 auto;
	padding: 0 10px;
	width: 880px;
	background: #FFFFFF url(../images/header-02.png) center top no-repeat;
}

/* ヘッダ */
#logo {
	height: 162px;
}

#logo a {
	display: block;
	width: 530px;
	height: 84px;
	text-indent: -9999px;
	z-index: 2;
	position: relative;
	top: 38px;
	left: 34px;
}

#header-menu {
	margin: 0 auto;
	padding: 4px;
	width: 810px;
	height: 85px;
	background: transparent url(../images/header-menu.png) left top no-repeat;
	position: relative;
	left: 3px;
	z-index: 3;
/* css hack! for IE6 */
	_left: 4px;
}

* html #header-menu {
/* css hack! for IE7 */
	left: 4px;
}

#header-menu ul li {
	float: left;
	display: block;
	width: 200px;
	height: 77px;
	background-repeat: no-repeat;
	background-position: center top;
}

#header-menu ul li a {
	display: block;
	width: 200px;
	height: 77px;
	line-height: 77px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: left top;
}

#header-menu ul li#menu-index, #header-menu ul li#menu-index a {
	width: 202px;
	background-image: url(../images/header-menu-item-01.png);
}

#header-menu ul li#menu-about, #header-menu ul li#menu-about a {
	background-image: url(../images/header-menu-item-02.png);
}

#header-menu ul li#menu-activity, #header-menu ul li#menu-activity a {
	background-image: url(../images/header-menu-item-03.png);
}

#header-menu ul li#menu-sponsor, #header-menu ul li#menu-sponsor a {
	background-image: url(../images/header-menu-item-04.png);
}

#header-menu ul li#menu-index a:hover, #header-menu ul li#menu-about a:hover, #header-menu ul li#menu-activity a:hover, #header-menu ul li#menu-sponsor a:hover {
	background-image: none;
}

#header-menu ul li#menu-index a.current, #header-menu ul li#menu-about a.current, #header-menu ul li#menu-activity a.current, #header-menu ul li#menu-sponsor a.current,
#header-menu ul li#menu-index a.active, #header-menu ul li#menu-about a.active, #header-menu ul li#menu-activity a.active, #header-menu ul li#menu-sponsor a.active {
	background-position: right top;
}

/* ボディ */
#contents {
	clear: both;
	padding: 20px 0;
}

#sidebar {
	float: left;
	margin-bottom: 20px;
	width: 244px;
	z-index: 2;
	position: relative;

	background: transparent url(../images/sidebar-body.png) left top repeat-y;
}

#sidebar h2 {
	height: 60px;
	line-height: 60px;
	text-indent: 20px;
	color: #F0F0FF;
	background: transparent url(../images/sidebar-header.png) left top no-repeat;
}

#sidebar h2 a {
	display: block;
	width: 232px;
	height: 48px;
	line-height: 48px;
	text-indent: 14px;
	color: #F0F0FF;
	position: relative;
	top: 6px;
	left: 6px;
}

#sidebar-body {
	padding: 0 6px 6px;
	background: transparent url(../images/sidebar-footer.png) left bottom no-repeat;
}

#sidebar-body h3 {
	margin-bottom: 2px;
	height: 40px;
	line-height: 40px;
	padding: 0 1em;
	color: #80906A;
}

#sidebar-body h3:first-letter {
	color: #AACC60;
}

#sidebar-body ul li {
	padding-bottom: 2px;
	height: 52px;
	background: transparent url(../images/sidebar-item.png) left center no-repeat;
}

#sidebar-body ul li a.current {
/* IE6 だとマウスオーバ時にちらつくが、仕様上、問題の解消は難しい */
	color: #666666;
	background: transparent url(../images/sidebar-item-current.png) left center no-repeat;
}

#sidebar-body ul li a {
	display: block;
	height: 52px;
	line-height: 52px;
	font-weight: bold;
	text-indent: 1.5em;
}

#main-contents {
	float: right;
	width: 615px;
	margin-bottom: 20px;
}

#topic-path {
	margin: -10px 10px 10px;
/* 今のところパンくずリストは不要 */
	display: none;
}

#topic-path a.current {
/* for IE6 */
	color: #666666;
}

/* フッタ  */
#footer {
	clear: both;
}

#footer-menu {
	float: left;
	width: 633px;
	margin: 10px 0 25px;
	font-size: 90%;
	background: transparent url(../images/footer-menu-start.png) left top no-repeat;
	position: relative;
	left: 123px;  /* (880 - 633) / 2 = 123.5px */
}

#footer-menu ul {
	float: left;
	width: 613px;
	padding: 20px;
	padding-left: 0;
	background: transparent url(../images/footer-menu-end.png) left bottom no-repeat;
}

#footer-menu ul li {
	float: left;
	margin: 5px 0;
	margin-left: 53px;
	text-indent: 16px;
	background: transparent url(../images/marker-01.gif) left 5px no-repeat;
/* css hack! for IE6 */
	_margin-left: 31px;
	_margin-right: 10px;
}

* html #footer-menu ul li {
/* css hack! for IE7 */
	margin-left: 31px;
	margin-right: 10px;
}

#footer-menu ul li a {
	font-weight: bold;
	color: #8A807A;
	text-decoration: none;
	border-bottom: 1px dotted #8A807A;
}

#footer-menu ul li a:hover {
	text-decoration: none;
	border-bottom: 1px solid #8A807A;
}

#footer-menu ul li a.current {
	color: #EEAA66;
	border-bottom: 1px dotted #EEAA66;
}

#footer-menu ul li a:hover.current {
	text-decoration: none;
	border-bottom: 1px solid #EEAA66;
}

#footer-menu ul li ul {
	float: none;
	width: auto;
	padding: 0;
	background: none;
}

#footer-menu ul li ul li {
	float: none;
	margin-left: 0;
	background: transparent url(../images/marker-02.gif) left 6px no-repeat;
}

#footer-menu ul li ul li a {
	font-weight: normal;
	color: #808080;
	border-bottom: none;
}

#footer-menu ul li ul li a:hover {
	text-decoration: underline;
	border-bottom: none;
}

#footer-menu ul li ul li a.current {
	border-bottom: none;
}

#footer-menu ul li ul li a:hover.current {
	text-decoration: underline;
	border-bottom: none;
}

#footer-content {
	clear: both;
	padding: 30px 20px 20px;
	line-height: 100%;
	color: #909090;
	text-align: right;
	background: #666666 url(../images/footer.png) left top no-repeat;
/* css hack! for IE6 */
	_padding-top: 15px;
}

* html #footer-content {
/* css hack! for IE7 */
	padding-top: 15px;
}

#footer-content #contact {
	margin: 15px 0 1em;
	color: #AAAAAA;
}

#footer-content #contact p img {
	vertical-align: -6px;
}


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

   クラスセレクタ： class に対する設定

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

.content {
	clear: both;
	margin-bottom: 30px;
	background: transparent url(../images/content-body.png) left top repeat-y;
}

.content-body {
	padding: 10px 25px 25px;
	background: transparent url(../images/content-footer.png) left bottom no-repeat;
}

.content h2 {
	margin-bottom: 10px;
	padding-left: 20px;
	height: 63px;
	line-height: 60px;
	background: transparent url(../images/content-header.png) left top no-repeat;
}

.sub-content {
	clear: both;
	margin-top: 30px;
}

.sub-content h3 {
	margin: 0 -20px 20px;
	padding-left: 20px;
	height: 40px;
	line-height: 40px;
}

.sub-content h3:first-letter {
	font-size: 140%;
	color: #FF6600;
}

.sub-content .block {
	margin-top: 30px;
}

.sub-content .block h4 {
	margin: 0 5px 5px;
	text-indent: 16px;
	background: transparent url(../images/marker-01.gif) left 5px no-repeat;
}

.content dt {
	margin-top: 1.5em;
	font-weight: bold;

	padding: 0 16px;
	background: transparent url(../images/marker-02.gif) left 6px no-repeat;
}

.content dd {
	margin-left: 30px;
	color: #404040;
}


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

   その他： 細かいデザイン調整

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

img.email-address {
	vertical-align: -3px;
}

a.current {
	color: #666666;
}

.description {
	color: #909090;
}

.align-left {
	clear: both;
	text-align: left;
}

.align-right {
	clear: both;
	text-align: right;
}

.align-center {
	clear: both;
	text-align: center;
}

/* パネル（コンテンツを左右に分ける） */
.content .panel {
	float: left;
	margin-top: 10px;
	margin-bottom: 30px;
/* css hack! for IE6 */
	_float: none;
}

* html #footer-content {
/* css hack! for IE7 */
	float: none;
}

.content .panel-left {
	float: left;
	width: 262px;
	padding-right: 20px;
}

.content .panel-right {
	float: left;
	width: 262px;
	padding-left: 20px;
}

.clear {
	clear: both;
}

/* お知らせ（更新履歴） */
#news dl {
	margin: 20px 0 0;
	line-height: 150%;

	padding: 0 1.5em 1.5em;
	height: 150px;
	background-color: #EEEEEE;
	border: 1px solid #DADADA;
	overflow: auto;
}

#news dl dt {
	margin-top: 1.5em;
	width: 120px;
	font-weight: bold;
	background-position: left 5px;
}

#news dl dd {
	margin: -1.5em 0 1.5em 136px; /* 120 + 16 = 136px */
}

#history dl dt {
	clear: right;
}

#history dl dd.screenshot {
	float: right;
	margin-bottom: 1.5em;
	margin-left: 1em;
}

#history dl dd.screenshot img {
	border: 2px solid #CCCCCC;
}

/* 動画 */
.movie {
	margin: 1.5em 0;
	color: #999999;
}

/* 写真一覧 */
.photo-list ul li {
	display: inline;
	margin-right: 10px;
}

.photo-list a img {
	vertical-align: middle;
	border: 2px solid #CCCCCC;
}

.photo img {
	border: 2px solid #CCCCCC;
}

/* ファイル一覧 */
ul.file-list {
	margin: 30px 20px 0;
}

ul.file-list li {
	float: left;
	display: block;
	text-align: center;
	width: 125px;
}

ul.file-list a img {
	vertical-align: middle;
	border: 1px solid #000000;
}

ul.file-list p {
	margin-top: 0.5em;
	word-wrap: break-word;
}

/* 不可視テキスト */
.hidden-text {
	float: right;
	color: #AAAAAA;
	position: relative;
	top: 20px;
}

.hidden-text a {
	color: #AAAAAA;
	text-decoration: none;
}