/* ■■■ 共通システム ■■■ */

/* === フェードアニメーション 構成 === */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



/* === リンク設定 通常 === */
 a {
	color: #000921 ;
	text-decoration:  underline;
	}


/* === リンク設定 ヘッダー用 === */
.header a {
	color: #000921 ;
	text-decoration: none;
	}

/* === リンク設定 ヘッダー用 === */
.container_data .item1 a {
	color: #000921 ;
	text-decoration: none;
	}








					/* ■■■ 空間設定 ■■■ */



/* === ボディ設定 === */
body {
	margin : 0 ;					/* デフォルトのmargin 8pxをリセット */
	color : #001826 ;				/* 文字色 */
	font-size : 15px ;				/* 文字サイズ */
	font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;	
	animation: fadeIn 1s forwards;		/* フェードアニメーションの反映 */
	background-color : #C0C0C0 ;
	}





/* === ページヘッダー「Header」=== */
.header {
	position: fixed; 				/* ヘッダーを固定する */
	top: 0 ; 					/* 配置の基準位置 上部から */
	box-sizing : border-box ; 		/* paddingとborderを幅と高さに含める */
	width : 100% ; 				/* ヘッダーの横幅を指定する */
	height : 45px ; 				/* ヘッダーの高さを指定する */
	//background-color : #708090 ;
	}





/* === ページヘッダー「Footer」=== */
.footer {
	bottom : 0 ; 					/* 配置の基準位置 上部から */
	box-sizing : border-box ; 		/* paddingとborderを幅と高さに含める */
	width : 100% ; 				/* ヘッダーの横幅を指定する */
	height : 50px ; 				/* ヘッダーの高さを指定する */
	//background-color : #708090 ;
	}





/* === ページ全体「Parent」=== */
.parent {
	max-width: 1000px ;			/* 全体ブロック	横幅 最大 */
	min-width: 500px ;			/* 全体ブロック	横幅 最小 */
	width : 80% ;				/* 全体ブロック	横幅 */
	margin:  0 auto;				/* 全体ブロック	中央寄せ */
	padding : 10px ;			/* 余白 */
	//background-color : gray ;		/* 確認用 */
	}





/* === コンテンツのかたまり 「Block」=== */
.block {
	max-width: 800px ;				/* 全体ブロック	横幅 最大 */
	min-width: 450px ;				/* 全体ブロック	横幅 最小 */
	margin :  0 auto ;				/* 全体ブロック	中央寄せ */
	padding : 10px ;				/* コンテンツ内 余白 */
	margin-top : 20px ;				/* コンテンツ外 余白 上部 */
	margin-bottom : 100px ;			/* コンテンツ外 余白 下部 */
	//background-color : pink ;			/* 確認用 */
	}




/* === コンテンツの間 「Space」=== */
.space {
	height : 500px ;				/* 全体ブロック	高さ */
	margin :  0 auto ;				/* 全体ブロック	中央寄せ */
	//background-color : skyblue ;		/* 確認用 */
	}




/* === コンテンツの間 「Space」=== */
.space_bottom {
	height : 150px ;				/* 全体ブロック	高さ */
	margin :  0 auto ;				/* 全体ブロック	中央寄せ */
	//background-color : skyblue ;		/* 確認用 */
	}




					/* ■■■ 文字設定 ■■■ */


/* === テキスト 見出し1=== */
.headline1 {
	font-size : 30px ;
	font-weight : bold ;
	font-family : 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
	margin : 30px ;
	}



/* === テキスト 見出し2=== */
.headline2 {
	font-size : 20px ;
	font-weight : bold ;
	font-family : 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
	margin-bottom : 10px ;
	}



/* === 文字 キャプション説明文 === */
.caption {
	font-size : 16px ;
	font-weight : bold ;
	font-family : 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN', sans-serif;
	margin : 10px ;
	}



/* === 文字 強調文字 === */
.accent {
	font-size : 18px ;
	font-weight : bold ;
	font-family : 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN', sans-serif;
	}



/* === テキスト 本文=== */

.text {
	font-size: 16px ;
	//font-weight: bold ;
	font-family: 'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,sans-serif;
	line-height: 150%;
	margin : 10px ;
	}


/* === テキスト 小説本文用=== */

.text_novel {
	font-size: 15px ;
	font-family: 'メイリオ','ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,sans-serif;
	line-height: 150%;
	margin-top : 50px ;
	margin-bottom : 50px ;
	}


					/* ■■■ ul ■■■ */



/* === ul ヘッダー用 ===  */
.header ul {
	 text-align : right ;			/* 文字配置 右 */
	 padding-right : 10px ;		/* コンテンツ内 余白 左 */
	 margin-top : 10px ;			/* コンテンツ外 余白 上 */
	}

.header ul li {
	 display : inline-block ;			/* インラインブロック */
	 list-style-type : none ;
	 padding-left : 10px ;				 /* 余白 */
	 padding-right : 10px ;			 /* 余白 */
	 font-weight : bold ;				/* 文字 太さ */
	 font-family : 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
	}






					/* ■■■ 【グリッド】 ■■■ */


/* === グリッド 情報 コンテナ === */
.container_data {
	 display : grid ;						/* グリッドレイアウトに指定 */
	 grid-template-columns : auto 1fr ;		/* X軸列 2列 */
	 padding : 0 ;						/* コンテンツ内 余白 */
	 margin : 20px ;						/* コンテンツ外 余白 */
	 align-items: center;
	}

/*  情報 項目  */
.item1 {
	grid-column : 1 / 2 ;
	font-family : 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
	font-size : 20px ;			/* フォント サイズ */
	font-weight : bold ;			/* フォント ウェイト */
	padding-top : 5px ;			/* コンテンツ内 余白 上 */
	padding-bottom : 5px ;		/* コンテンツ内 余白 下 */
	padding-left : 10px ;			/* コンテンツ内 余白 左 */
	padding-right : 10px ;		/* コンテンツ内 余白 右 */
	margin : 5px ;				/* コンテンツ外 余白 */
	//text-align : center;
	//background-color  : orange ;
	}

/*  情報 詳細  */
.item2 {
	grid-column : 2 / 2 ;
	//font-family : 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
	//font-size : 15px ;			/* フォント サイズ */
	//font-weight : bold ;			/* フォント ウェイト */
	border-left : double 3px ;		/* ボーダー 右 */
	//padding-top : 10 ;			/* コンテンツ内 余白 上 */
	//padding-bottom : 10 ;		/* コンテンツ内 余白 下 */
	padding-left : 10px ;			/* コンテンツ内 余白 左 */
	padding-right : 10px ;		/* コンテンツ内 余白 右 */
	margin : 5px ;				/* コンテンツ外 余白 */
	text-align : left;			/*配置 左寄せ */
	//background-color  : lightgreen ;
	}




/* === グリッド Game コンテナ === */
.container_game {
	display : grid ;						/* グリッドレイアウトに指定 */
	grid-template-columns : auto 1fr ;		/* X軸列 2列 */
	grid-template-rows : auto 1fr ;			/* Y軸行 2行 */
	margin-top : 20px ;					/* コンテンツ外 余白 上 */
	margin-bottom : 100px ;				/* コンテンツ外 余白 下 */
	margin-left : 10px ;					/* コンテンツ外 余白 左 */
	margin-right : 10px ;					/* コンテンツ外 余白 右 */
	}

/*  ゲームタイトル  */
.item_title {
	grid-column : 1 / 3 ;
	font-family : 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;
	font-size : 30px ;					/* フォント サイズ */
	font-weight : bold ;					/* フォント ウェイト */
	text-align : center;
	//background-color  : orange ;
	border-bottom : dotted 2px ;
	margin : 5px ;
	}

/*  ゲーム画像  */
.item_image {
	grid-column : 2 / 1 ;
	text-align : center;
	//background-color  : lightgreen ;
	}

/*  ゲーム内容  */
.item_text {
	grid-column : 2 / 2 ;
	//font-size : 18px ;
	padding-left : 10px ;
	padding-right : 10px ;
	//text-align : center;
	//background-color  : lightgreen ;
	}





					/* ■■■ 画像 ■■■ */



/*  ゲーム一覧のサムネイル画像  */
.top_image {
	height: 600px;
	background: url(img/top_image.png) center center no-repeat;
	}



/*  キャラクター一覧の画像  */
.character img {
	width: 150px;
	height: 150px;
	}

/*  ゲーム一覧のサムネイル画像  */
.item_image img {
	height: 200px ;
	width: 300px ;
	}