@charset "UTF-8" ;


/* ボディ */
body
{
	margin: 0 ;		/* スペース */
	padding: 0px ;		/* 余白 */
	font-size: 13px ;	/* 文字サイズ */
	line-height: 1.618 ;	/* 行の高さ */
}


/* bodyの中のヘッダー */
/* headerはHTML5で採用。使い方１セレクタ<header>要素。ぺーじ冒頭でロゴ、ナビや、見出しなど入る。 */
/* 使い方２クラス名「.header」ID名「#header」としてOK。１と２は重複可 */

.header
{
	border-bottom: 3px solid #888 ;		/* 枠線 */
	padding: 1em 0 ;			/* 上下の余白 */
	margin-bottom: 1em ;			/* 他のブロックとのスペース */
	background: #e8e8e8 ;			/* 背景色(確認用) */
} 

.header-h
{
	margin-bottom: 0px ;
    text-align: center ;
}


/* メイン */

main
{
	margin-top: 0px;		/* 外側余白 */
	margin-bottom: 0px;		/* 外側余白 */
	margin-left: 10px;		/* 外側余白 */
	margin-right: 10px;		/* 外側余白 */
	padding: 0px 5px;       /* 内側余白 上下　左右 */
	border: none ;		/* 枠線 */
}


/* cssでは、body,header,mainこれら全てにcenter寄せの　設定はしていない */
/* 学習・・・テキストの中央寄せは、text-align: centerで指定する。
　　例：<div style="text-align: center>〇〇〇</div>

/*　以下、学習・・・ブロック要素にtext-align: centerを指定しても効かない・・・
　　ブロック自体が中央寄せになるわけではなく、上記のように、テキストが中央に寄せるだけ。*/


/* ブロック要素の中身テキスト位置の指示････ */
.tac { text-align: center;}

.tac p {                           
  		   display: inline-block;
           max-width: 500px;     /* ブロック要素を中央にするために････ */
	       text-align: left;
           }
/* テキストが入るブロック要素をinline化してやりtext-align:centerが効くようにする。 */
/* （つまりブロックが　中央に）そして次の行で、中身テキスト位置をleftに揃える */



/* フッター */
.footer
{
	border-top: 3px solid #888 ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	margin-top: 2em ;			/* 他のブロックとのスペース */
	padding: 1em 0 ;			/* 上下の余白 */
	background: #e8e8e8 ;
}