@charset "utf-8"; 

/* サイト共通のデザイン（レイアウト、ヘッダー、フッター、ナビゲーション）を記述する。 */

@media print{
 header, nav { display:none; }
}

/* レイアウト */

main { text-align:center; margin: 2em 0; } 


/* ヘッダー */
header { background-color:#eee; border-bottom: 2px solid #ccc; box-shadow: 0 1px 2px #666; margin-bottom: 1em; }
header h1 { padding:1em; color:#fff; font-size:20px; text-align:left; font-weight:bold; }

/* ブロック */

header h1 a { color:#333; }
header h1 a:hover { color:#666; }

aside { text-align:left; }

nav { margin:1em 20px; padding:0.5em; text-align:left; font-size:12px; }
nav div { margin:0.5em 0; }
nav div span { width:10em; display:inline-block; }
nav a { display:inline-block; border:1px solid #aaa; padding:0.3em 0.5em; text-decoration:none; color:#346; border-radius:3px; box-shadow: 0px 1px 2px #ccc; background-color: #fff; }
nav a:hover { border:1px solid #aaa; background-color:#eee; color:#333; box-shadow: none; }

/* フッター */
footer { clear:both; padding:0.5em 0; background:#333; border-top:2px solid #ccc; color:#ccc; }
address { text-align:right; margin:0.5em; font-style:normal; }
address dt { font-weight:bold; }




/* モニター幅960px以下 */
@media only screen and (max-width:960px) { 

}


/* スマートフォン 横(ランドスケープ) タブレット*/
@media only screen and (max-width:768px) { 
#container { width:100%; }

main { float:none; width:100%; }
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px) { 
}