@charset "utf-8";

/* 基本設定
---------------------------------------------------------------------------*/
body {
	margin					: 0px;
	padding					: 0px;
	-webkit-text-size-adjust: none;				/* 自動調整（オフ推奨） */
	background-color		: #E0E0E0;
	background-image		: url('img/bg_base.jpg');	/* 背景画像*/
	background-position		: center top;		/* 背景画像の配置*/
	background-repeat		: no-repeat;		/* 背景画像リピート方法*/
	background-attachment	: scroll;			/* 背景画像を固定するか否か　scroll or fixed*/
	color    	       		: #505050;			/* 基本文字色 */
	font-size   	   		: 16px;				/* 基本サイズ */
	text-align 				: center;			/* 基本文字色 */
	line-height				: 2;				/* 行間 */
	font-family				: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
}

/* 見出し */
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	font-weight: normal;
}

/* unordered listの略。順序のないリスト */
ul { 
	list-style-type: none;
}
/* ordered listの略。順序のあるリスト */
ol {
	padding-left: 40px;
	padding-bottom: 15px;
}

img {
	border:			none;
	max-width: 		100%;
	height:			auto;
	vertical-align:	middle;	/* ベースライン縦方向の揃え位置 */
}

table {
	border-collapse	: collapse;
	font-size		: 100%;
	border-spacing	: 0;
}

/* 別のHTML文書を埋め込む */
iframe {
	width: 100%;
}


/* 一番外側のブロック
---------------------------------------------------------------------------*/
#container {
	max-width: 1000px;		/* 最大幅 */
	margin: 50px 50px 0;	/* ブロックの外側スペース */
}

/* ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/* headerブロック */
header {
	position: relative;
	text-align: center;	/* 要素の中央寄せ */
}
/* ロゴ画像用の設定 */
#logo img {
	width			: 35%;	/* 画像幅 */
	margin-bottom	: 40px;	/*画像の下に空けるスペース*/
}
/* ヘッダーのロゴ画像設定 */
#top #logo img {
	position	: absolute;
	right		: 5%;	/*headerブロックに対して右から5%の場所に配置*/
	top			: 40%;	/*headerブロックに対して上から40%の場所に配置*/
	z-index		: 1;
}

/* ヘッダーの背景画像 */
#img_header {
	margin-bottom: 40px;	/* 画像の下に空けるスペース */
	box-shadow: 0px 0px 20px rgba(0,0,0,0.2);	/* 影の設定。右へ、左へ、広げる幅。0,0,0は黒のことで0.2は透明度20%のこと。*/
	border-radius: 10px;	/* 角丸指定 上の項目を先に設定 */
}

/* フッター（注意書き、コピーライト）
---------------------------------------------------------------------------*/
#attention	/* 注意書き */
{
	width				: 100%			;
	height				: 50px			;
	background-color	: #871e3b		;
	border				: solid			;
	border-width		: 0px 0px 0px 0px;
	border-color    	: #000000		;
	margin				: 20px 0px 0px 0px;
	padding				: 5px 5px 0px 5px;
	color    	       	: #d0d0d0		;
	font-size      		: 90%			;
	text-align			: center		;
	line-height			: 150%			;
}

#copyRight	/* コピーライト */
{
	margin				: 0px 0px 20px 0px;
	padding				: 0px			;
	color    	       	: #a090a0		;
	font-size      		: 90%			;
	font-family			: "Times New Roman","MS PGothic";	/* フォント種類 */
}

/*メニュー
---------------------------------------------------------------------------*/

/*メニュー全体を囲むブロック*/
#menubar {
	text-align		: center;		/* センタリング */
	font-size		: 18px;			/* 文字サイズ */
	margin-bottom	: 40px;			/* メニューの下に空けるスペース */
}

/*メニュー１個あたりの設定*/
#menubar li {
	display: inline;	/* 横並びにする設定 */
}

#menubar li a {
	text-decoration	: none;
	padding			: 7px 30px;
}

/* マウスオン、現在表示中のページの設定*/
#menubar li a:hover,
#menubar li.current a {
	color			: #a22041;
	border-bottom	: 2px solid #a22041;	/*下線の幅、線種、色*/
}

/* 見出し設定
---------------------------------------------------------------------------*/

#contents h2 {
	clear			: both;
	margin			: 15px 0px;
	padding			: 5px 20px;	/*上下、左右への余白*/
	color			: #ffffff;		/*文字色*/
	background: #a22041;	/*背景色*/
	border-radius: 8px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
}

/* 表紙用設定
---------------------------------------------------------------------------*/
#contents #top img{
	width		: 80%;
}

/* ストーリー用設定
---------------------------------------------------------------------------*/
#story{
	color    	      	: #505050;			/* 基本文字色 */
	font-size   	   	: 15px;				/* 基本サイズ */
	text-align 			: left;				/* 基本文字色 */
	line-height			: 1.7;				/* 行間 */
	margin				: 0px 20px;
	padding				: 8px;
	border				: solid;
	border-width		: 3px;
}

/* キャラ紹介用設定
---------------------------------------------------------------------------*/
#gallery{
	margin-left : auto; /* 中央揃え */
	margin-right: auto;
	border				: solid;
	border-width		: 3px 30px;
	border-color    	: #202020;
	background-color	: #202020;
}

#gallery_list{
	padding-right: 30px;
	vertical-align	: top; /* 要素の上寄せ */
}
.over img{	/* マウスオーバー時の不透明度 */
	opacity:0.5;
}
.nav ul{
	margin-top: 0px;
	padding: 0;
}
.nav li{
	display:inline;
	display:block;
	list-style:none;
}