@charset "utf-8";

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

全体的なスタイル

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

* {
	margin:0; padding:0;				/* 全要素のマージン・パディングをリセット*/
}


body {
	background-color:#ffffcc;			/* ページ全体の背景色*/
	background-image:url("image/bg_body.png");	/* ウェブページ全体の背景画像*/
	font-size:100%;					/* フォントサイズを％で指定する*/
	font-family: "ＭＳ　ゴシック",sans-serif;	/* フォントの種類を指定する*/
	line-height:1.5;				/* 行の高さを倍率で指定する*/
	color:#333333;					/* 文字色 */
}
div#pagebody {
	width:1000px; margin:0 auto;			/* 内容全体をセンタリング*/
	background-color:#ffffff;			/* 内容全体（表示部分）の背景色*/
	background-image:url("image/bg_pagebody.png");	/* コンテンツ全体の背景画像*/
	background-repeat:repeat-y;			/* 背景画像を縦方向に繰り返す*/
}


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

ヘッダー（左右でロゴ・特集画像を分ける場合）

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

div#header {
	height:90px;					/* 左ヘッダー部分の高さ（カウンターを含む）*/
	padding:70px 0px 5px 0px;			/* パディング設定*/
	margin:10px 0px 10px 20px;			/* マージン設定*/
	float:left;					/* 位置を左寄せにする*/
}

div#header h1 {
	font-size:200%;					/* フォントのサイズ*/
	font-family:Arial, Helvetica, sans-serif;	/* フォントの種類*/
}

div#header h1 a {text-decoration:none;}			/* リンクの下線を無くす*/
img {border:0;}						/* 画像のボーダーを0にする*/


div#header2 {
	height:160px;					/* 右ヘッダー部分の高さ*/
	float:right;					/* 位置を右寄せにする*/
	margin:10px 38px 10px 0px;			/* マージン設定*/
}

div#header2 a {
	font-size:200%;					/* フォントのサイズ*/
	font-family:Arial, Helvetica, sans-serif;	/* フォントの種類*/
}

div#header2 h1 a {text-decoration:none;}		/* リンクの下線を無くす*/
img {border:0;}						/* 画像のボーダーを0にする*/

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

ヘッダー（作品紹介ページの簡易ヘッダー）

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

div#header3 {
	height:90px;					/* 左ヘッダー部分の高さ（カウンターを含む）*/
	padding:70px 0px 5px 0px;			/* パディング設定*/
	margin:10px 0px 10px 20px;			/* マージン設定*/
}

div#header3 h1 {
	font-size:200%;					/* フォントのサイズ*/
	font-family:Arial, Helvetica, sans-serif;	/* フォントの種類*/
}

div#header3 h1 a {text-decoration:none;}			/* リンクの下線を無くす*/
img {border:0;}						/* 画像のボーダーを0にする*/


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

メインメニュー

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

ul#menu {
	clear:both;					/* フロート配置をクリアする*/
	width:960px; height:50px;			/* メインメニュー部分の幅と高さ*/
	margin:0px 43px 15px 43px;			/* マージン設定*/
}


#menu li {
	list-style-type:none;				/* リストマーカーを無しにする */
	display:inline;					/* リスト項目をインライン表示にする*/
	float:left;					/* リスト項目を横に並べる*/
}

#menu li a {
	background-color:#ffffff;			/* 背景色*/
	color:#2d1303;					/* 文字色*/
	display:block;					/* リンク部分をブロック表示にする*/
	width:130px; height:35px;			/* 幅と高さ*/
	padding:15px 0px 0px 0px;			/* 上パティング*/
	text-align:center;				/* テキストをセンター揃えにする*/
	text-decoration:none;				/* リンク部分を下線無しにする*/
	background-image:url(image/bg_menu1.png);	/* 背景画像を指定*/
	background-repeat:no-repeat;			/* 背景画像を繰り返さない*/
}

#menu li a:hover {
	background-image:url(image/bg_menu2.png);	/* リンクにマウスが乗ったら背景画像を変更する*/
	color:#ffffff;					/* リンクにマウスが乗ったら文字色を変更する*/
}


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

サブメニュー（左カラム）

=========================================================*/
div#submenu {
	width:200px;					/* カラム幅の指定*/
	margin:10px 15px 10px 50px;			/* 位置調整*/
	float:left;					/* カラムを左寄せにする*/
}

/*====h2見出しがリンクなしの場合／リンクありの場合====*/
div#submenu h2:before {
	content:url("image/icon_content.png");		/* コンテンツにアイコン画像を挿入*/
	margin:10px 0px 0px 5px;			/* マージン設定*/
	font-size:18px;					/* フォントサイズ*/
	vertical-align:middle;				/* 縦方向の表示位置*/
}

div#submenu h2 {
	width:160px; height:60px			/* 見出し装飾の幅と高さを設定*/
	padding:20px 0px 0px 100px;			/* パディング設定*/
	margin:10px 0px 0px 0px;			/* マージン設定*/
	font-size:18px;					/* フォントサイズ*/
	background-color:#993399;			/* 背景色*/
	color:#FFFFFF;					/* 文字色*/
}

div#submenu h2 a{
	width:160px; height:60px			/* 見出し装飾の幅と高さを設定*/
	padding:20px 0px 0px 100px;			/* パディング設定*/
	margin:10px 0px 0px 0px;			/* マージン設定*/
	font-size:18px;					/* フォントサイズ*/
	text-decoration:none;				/* リンクの下線を無くす*/
	background-color:#993399;			/* 背景色*/
	color:#FFFFFF;					/* 文字色*/
}

div#submenu h2 a:hover {
	color:#FFFFCC;					/* リンクにマウスが乗ったら文字色を変更する*/
}


/*====h3見出しがリンクなしの場合／リンクありの場合====*/
div#submenu h3:before {
	content:url("image/icon_submenu.png");		/* コンテンツにアイコン画像を挿入*/
	margin:0px 10px 0px 0px;			/* マージン設定*/
	vertical-align:top;				/* 縦方向の表示位置*/
}



/*====箇条書き（リンクあり）の設定====*/
div#submenu ul li {
	list-style-type:none;				/* リストマーカーを無しにする*/
        text-indent: -2em;				/* 先頭行のインデントのみ2文字ずらす */
	padding-left: 2em;				/* インデントごと左に2文字戻す */
	line-height:1.3;				/* 箇条書きの段落間を調節 */
	width:128px;					/* ブロックの幅を指定*/
	border-bottom:1px dotted gray;			/* リンク領域の下部にボーダーを付ける*/
	background-color:#FFF0F5;			/* 疑似ボタンの背景色*/
	box-shadow:#FFCCFF 0px 0px 13px 10px inset;	/* 枠縁に色をつける（px部分は上下左右ではなく影の仕様の指示）*/
}

div#submenu ul li a:before {
	content:url("image/icon_submenu.png");		/* コンテンツにアイコン画像を挿入*/
	margin:0px 10px 0px 0px;			/* マージン設定*/
	vertical-align:top;				/* 縦方向の表示位置*/
}

div#submenu ul li a {
	display:block;					/* リンク部分をブロック表示にする*/
	width:116px;					/* リンク部分の文章の幅を指定*/
	padding:20px 5px 5px 5px;			/* パティング設定*/
	padding-top:5px;				/* 箇条書き間のパティング設定（上）*/
	padding-bottom:5;				/* 箇条書き間のパティング設定（下）*/
	text-decoration:none;				/* リンクの下線を無くす*/
	color:#333333;					/* 文字色*/
}

div#submenu ul li:first-child a {
	border-top:1px dotted gray;			/* 一番上のリンクに上線を表示*/
}

div#submenu ul li a:hover {
	text-decoration:underline;			/* リンクにマウスが乗ったら下線を表示*/
}


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

インフォメーション（右カラム）

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

div#right {
	valign:top;					/* カラムフレーム表示位置*/
	align:left;					/* カラムフレーム表示位置*/
}


div#info {
	width:693px;					/* カラム幅の指定*/
	float:left;					/* カラムを左寄せにする*/
	padding:10px 10px 10px 0px;			/* パディング設定*/
	background-color:#ffffff;			/* 右カラム内部の背景色*/
}

div#info h2 {
	width:660px;					/* 見出し横幅*/
	padding:10px 0px 10px 20px;			/* パディング設定*/
	background-color:#FF99FF;			/* 見出し背景色*/
	color:#000000;					/* 見出し文字色*/
	border-radius:3px;				/* 角丸にする*/
	-moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px;
							/* 角丸にする（ベンダープレフィックス付きの指定）*/
}	

div#info h3 {
	width:660px;					/* 見出し横幅*/
	padding:10px 0px 10px 20px;			/* パディング設定*/
	background-color:#FFCCFF;			/* 見出し背景色*/
	color:#000000;					/* 見出し文字色*/
	border-radius:3px;				/* 角丸にする*/
	-moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px;
							/* 角丸にする（ベンダープレフィックス付きの指定）*/
}
	
div#info h4 {
	width:660px;					/* 見出し横幅*/
	padding:10px 0px 10px 0px;			/* パディング設定*/
	margin:15px 5px 0px 0px;			/* マージン設定*/
}	


div#info hr {						/*----ページ装飾のボーダー部分です----*/
	clear:both;					/* フロート配置をクリアする*/
	width:680px;					/* ボックス幅の指定*/
	margin:10px 0px;				/* マージン設定*/
	border:1px dotted #cccccc;			/* 内容の区切り線の詳細設定*/
}

div#info p {
	width:660px;					/* 段落幅の指定*/
	margin:15px 10px 7px 15px;			/* マージン設定*/
	text-indent:0em;				/* インデント設定*/
}

div#info li {
	width:645px;					/* 段落幅の指定*/
	margin:5px 10px 7px 30px;			/* マージン設定*/
	text-indent:0em;				/* インデント設定*/
}

/*=========右カラム内のボックス装飾（リンクの強調用）-----*/

div#box {						
	width:400px;					/* 装飾部分の横幅*/
	padding:20px 0px 10px 50px;			/* パディング設定*/
	margin:15px 5px 0px 50px;			/* マージン設定*/
	border:1px bold #000000;			/* 内容の区切り線の詳細設定*/
	box-shadow:#FFCCFF -5px -5px 10px 10px inset;	/* 枠縁に色をつける（px部分は上下左右ではなく影の仕様の指示）*/
}

.button {		/* リンク部分を疑似ボタンに */
	display:block;					/* リンク部分をブロック表示にする*/				
	width:250px;					/* 装飾部分の横幅*/
	padding:10px 30px 10px 30px;			/* パディング設定*/
	border:1px bold #000000;			/* 内容の区切り線の詳細設定*/
	font-size:120%;
	box-shadow:#008000 -1px -1px 1px 5px inset;	/* 枠縁に色をつける（px部分は上下左右ではなく影の仕様の指示）*/
	background-color:#99FF99;			/* 領域の背景色*/
	text-decoration:none;				/* リンクの下線を無くす*/
	color:#000000;					/* 文字色*/
}

.button:hover {
	box-shadow:#CC9933 -1px -1px 1px 5px inset;	/* 枠縁に色をつける（px部分は上下左右ではなく影の仕様の指示）*/
	background-color:#FFCC33;			/* 領域の背景色*/
	color:#993333;					/* 文字色*/
}


/*=========右カラム内のボックス装飾（作品リストの装飾用）-----*/

div#box2 {						
	width:600px;					/* 見出し横幅*/
	padding:20px 20px 20px 20px;			/* パディング設定*/
	margin:30px 30px 30px 20px;			/* マージン設定*/
	border:0px ;					/* 内容の区切り線の詳細設定*/
	background-color:#FFFFCC;			/* 領域の背景色*/
}

div#box2 p {
	width:575px;					/* 領域内の文章の表示幅 */
}


/*=========右カラム段落内の装飾用の画像（「welcome」など）-----*/
.image_p {
	float: right;					/* 画像の回り込み */
	margin;20px 20px 20px 20px:			/* 文字との距離 */
}

/*=========右カラムボックス装飾内の画像背景（作品サムネイル）-----*/
.samune {
	float: right;					/* 画像の回り込み */
	margin;20px 20px 20px 20px:			/* 文字との距離 */
}
	




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

フッター

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

div#footer {
	clear:both;					/* 表示位置の回り込みを解除する*/
	height:40px;					/* 表示位置高さの指定*/
	padding:10px 0px 0px 0px;			/* パディング設定*/
	font-size:x-small;				/* フォントサイズを小さくする*/
	text-align:center;				/* 中央表示*/
	background-color:#ffffff;			/* フッター部分の背景色*/
}

#img_footer {
	width:1000px;	height:10px;			/* トップページのフッター画像の表示サイズを指定*/
	margin:0px 0px;					/* 画像表示位置のマージン*/
}