@charset "shift_jis";
body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "・ｭ・ｳ ・ｰゴシチEけ", "MS P Gothic", sans-serif;
	background:#ADD5F7;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ エレメンチE/ タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間縺E相違により、リスト縺E余白とマ縺Eジンをゼロにすることをお勧めします。一貫性を保つために、E㍼をここで持Eｮ嘯ｷるか、リストに含まれるリスト頁E岼 (LI、DT、DD) で持Eｮ嘯ﾅきます。より詳細なセレクターを記述しなぁE剞り、ここで持Eｮ嘯ｷる蛛E容ぁE.nav リストにも適用されることに注意してください、E*/
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上縺Eージンを削除すると、縺Eージンを含む div からマ縺Eジンが縺Eみ出す場合があるとぁE≧問題を回避できます。残った下縺Eージンにより、後続縺Eエレメントから縺E離されます、E*/
	padding-right: 15px;
	padding-left: 15px; /* div 自体ではなぁEdiv 蜀・〒エレメント縺E両側に余白を追加すると、縺EチEけスモチEΝ計算が不要になります。代わりに、両側に余白を指定しぁEdiv をネストして使用することもできます、E*/
}
a img { /* こ縺Eセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される蛛E期設定縺E青いボ縺Eダーを削除します、E*/
	border: none;
}

/* ~~ サイト縺Eリンクのスタイル付けは、縺Eバ縺E効果を作諱Eするセレクターグループも含め、この頁Eｺ盾ﾉする蠢・ｦ≠ｪあります、E~ */
a:link {
	color:#414958;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見蛛Eけられるように下線を持Eｮ嘯ｷることをお勧めします、E*/
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* こ縺Eセレクターグループ縺E、キーボ縺Eドを使用するユーザーに対し、縺Eウスを使用するユーザーと同じホバー効果を提供します、E*/
	text-decoration: none;
}

/* ~~ こ縺EコンチEリが他縺Eすべての div を囲み、パーセンチE・ジに基づぁE◆蟷・ｒ持Eｮ嘯ｵます、E~ */
.container {
	width: 1260px;
	background: #FFF;
	margin: 0 auto; /* 蟷・↓加え、両側を閨E動値とすることで、レイアウトが中央に謠・＞ます、Econtainer の蟷・ｒ 100% に設定した場合、これ縺E蠢・ｦ≠ꀀりません、E*/
}

/* ~~ ヘッダーには蟷・・持Eｮ嘯ｳれません。縺EチEムーはレイアウト縺E蟷・・体まで庁E′ります。縺EチEムーには、ユーザー独自のリンクされたロゴに置き換えられるイメージプレースホルダーが含まれます、E~ */
.header {
	height:100px;
	background-color: #4E7AC7;
}

.logo{
	margin-top:10px;
	float:right;	
	}

/* ~~ レイアウトに使用するカラムです、E~ 

1) 余白は、div の上部また縺E下部にのみ配置されます。これらの div 蜀・・エレメントには、それ閨E体に余白がある縺Eで、縺EチEけスモチEΝ計算を行う蠢・ｦ≠ｪありません。ただし、div 自体に両側の余白めE・ーダーを指定した場合、その値が加算されたも縺Eが合計蟷・↓なることに注意してください。div 蜀・・エレメント縺E余白を削除し、さらにそ縺E div 蜀・↓、蛛E体縺EチEじインに蠢・ｦ≠ﾈ蟷・ｄ余白を指定してぁE↑ぁE2 つ目の div を追加することもできます、E

2) カラムはすべてフロートしてぁEｋため、縺Eージンは持Eｮ嘯ｳれてぁE∪せん。縺Eージンを追加する蠢・ｦ≠ｪある場合縺E、フロート方向には持Eｮ嘯ｵなぁE〒ください (例えば、右フロートに設定しぁEdiv の右マ縺Eジン)。多くの場合、代わりに余白を使用できます。このルールに従わなぁEꀀｴ合縺E、div のルールに「display:inline」宣言を追加し、一部のバ縺Eジョンの Internet Explorer でマ縺EジンぁE2 倍になるバグを回避する蠢・ｦ≠ｪあります、E

3) クラスはドキュメント蛛Eで隍・焚回使用できるので (またエレメントには隍・焚のクラスを適用できまぁE、カラムには ID ではなくクラス名が割り当てられます。例えば、蠢・ｦ≠ﾉ応じて 2 つのサイドバー div をスタチEけできます。クラスを各ドキュメントで一度しか使用しなぁE・であれば、ユーザーの好みに応じて、クラス名を ID に変更することができます、E

4) ナビゲーションを左ではなく右に配置したぁEꀀｴ合、これらのカラムを反対方向にフロートさせると (すべて左方向にする代わりに、すべて右方向に設螳・、反転してレンダリングされます、ETML ソース蜀・〒 div を移動する蠢・ｦ√・ありません、E

*/
.sidebar1 {
	font-weight: bold;
	float: left;
	width: 20%;
	background: #686B6B;
	padding-bottom: 10px;
}
.content {
	padding: 10px 0;
	width: 80%;
	float: left;
}
.content table img {
	width:100px;
	height:100px;
	margin:15px;
	padding:10px;
	background-color:#ADD5F7;
}
.content table img:hover{
background-color:#4E7AC7;
}
.top_content {
	padding:10px 100px 0;
}
.top_content table img {
	width:100px;
	height:100px;
	margin:15px;
	padding:10px;
	background-color:#ADD5F7;
}
.top_content table img:hover{
background-color:#4E7AC7;
}

/* ~~ こ縺Eセレクターグループ縺E、Econtent 蜀・・リストに領域間隔を指定します、E~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* こ縺E余白は、上述の見蛛Eしと段落ルールの右の余白を表します。下縺E余白はリスト蛛Eの他縺Eエレメントとの間隔用に配置され、左の余白はインチEΦト作諱E用に配置されてぁE∪す。これ縺E蠢・ｦ≠ﾉ応じて調整できます、E*/
}

/* ~~ ナビゲーションリスト縺Eスタイル付け (Spry などの事前作諱E済みのフライアウトメニューを使用する場合縺E削除できまぁE ~~ */
ul.nav {
	list-style: none; /* リスト縺Eマ縺Eカーを削除します、E*/
	border-top: 1px solid #666; /* リンク用の上部のボ縺Eダーを作諱Eします。他縺Eすべてのも縺Eは LI 上で下部のボ縺Eダーを使用して配置されます、E*/
	margin-bottom: 15px; /* 下縺EコンチEΦチE・ナビゲーション間縺E間隔を作諱Eします、E*/
}
ul.nav li {
	border-bottom: 1px solid #666; /* ボタンの区蛻・ｊ線を作諱Eします、E*/
}
ul.nav a, ul.nav a:visited { /* これら縺Eセレクターをグループ化することで、リンクのボタン表示が訪問後も確実に保持されます、E*/
	padding: 5px 5px 5px 15px;
	display: block; /* リンクにブロチEけプロパティを指定し、リンクが含まれる LI 全体がリンクになるよぁE↓します。これにより、Eꀀ・鞫S体がマウスのクリチEけに反応するよぁE↓なります、E*/
	text-decoration: none;
	background: #f6f6f6;
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* マウスを使用する場合もキーボ縺Eドを使用する場合も、背景色とチEくストカラーを変更します、E*/
	background: #4E7AC7;
	color: #FFF;
}
.container .content ol table tr td .style8 {
	color: #F00;
}
div.gotopagetop{
	text-align:right;
}
.content li{
	margin-bottom:15px;
	/* 画像まわりこみ2用　 */
	margin-right:25px;
}
ul.nav p{
	margin: 5px;
	color: #FFF;	
}





.sidebar2 {
	font-weight: bold;
	float: left;
	width: 20%;
	background: #f6f6f6;
	padding-bottom: 10px;
}
dl.nav {
	list-style: none; /* リスト縺Eマ縺Eカーを削除します、E*/
	border-top: 1px solid #666; /* リンク用の上部のボ縺Eダーを作諱Eします。他縺Eすべてのも縺Eは LI 上で下部のボ縺Eダーを使用して配置されます、E*/
	margin-bottom: 15px; /* 下縺EコンチEΦチE・ナビゲーション間縺E間隔を作諱Eします、E*/
}
dl.nav dt {
	border-bottom: 1px solid #666; /* ボタンの区蛻・ｊ線を作諱Eします、E*/
}
dl.nav dd {
	border-bottom: 1px solid #666; /* ボタンの区蛻・ｊ線を作諱Eします、E*/
}
dl.nav a, dl.nav a:visited { /* これら縺Eセレクターをグループ化することで、リンクのボタン表示が訪問後も確実に保持されます、E*/
	padding: 5px 5px 5px 15px;
	display: block; /* リンクにブロチEけプロパティを指定し、リンクが含まれる LI 全体がリンクになるよぁE↓します。これにより、Eꀀ・鞫S体がマウスのクリチEけに反応するよぁE↓なります、E*/
	text-decoration: none;
	background: #f6f6f6;
	color: #000;
	font-size: small;
}
dl.nav dt a, dl.nav dt a:visited { /* これら縺Eセレクターをグループ化することで、リンクのボタン表示が訪問後も確実に保持されます、E*/
	padding: 5px 5px 5px 15px;
	display: block; /* リンクにブロチEけプロパティを指定し、リンクが含まれる LI 全体がリンクになるよぁE↓します。これにより、Eꀀ・鞫S体がマウスのクリチEけに反応するよぁE↓なります、E*/
	text-decoration: none;
	background: #686B6B;
	color: #fff;
	font-size: small;
}
dl.nav a:hover, dl.nav a:active, dl.nav a:focus { /* マウスを使用する場合もキーボ縺Eドを使用する場合も、背景色とチEくストカラーを変更します、E*/
	background: #4E7AC7;
	color: #FFF;
}
dl.nav p{
	margin: 5px;
	color: #FFF;	
}
.content dt{
	margin-bottom:15px;
}
.content dd{
	margin-bottom:15px;
}

/* ~~ 画像回り込み2用 ~~ */
li img {
	width:300px;
	display:block;
	margin:auto;
	padding:10px;
}

li .button img {
		width:180px;
		height:38px;
			padding:3px;
			margin:0;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1; /* for IE6/7 */
}

li {
	width:400px;
	height:400px;
	float:left;
}

/* ~~ フッター ~~ */
.footer {
	padding: 10px 0;
	background: #4E7AC7;
	position: relative;/* IE6 に、E←蛻・↓クリアするための hasLayout を指定します、E*/
	clear: both; /* こ縺E clear プロパティにより .container は、カラムの篁E峇がどこまでかを認識してそ縺E篁E峇を含めるようになります、E*/
}

/* ~~ そ縺E他縺E float/clear クラス ~~ */
.fltrt {  /* こ縺Eクラスを使用すると、縺Eージ蜀・〒エレメントを右にフローチEぅングさせることができます。フローチEぅングさせるエレメント縺E、縺Eージ蜀・〒横に並べて表示するエレメント縺E前に持Eｮ嘯ｷる蠢・ｦ≠ｪあります、E*/
	float: right;
	margin-left: 8px;
}
.fltlft { /* こ縺Eクラスを使用すると、縺Eージ蜀・〒エレメントを左にフローチEぅングさせることができます。フローチEぅングさせるエレメント縺E、縺Eージ蜀・〒横に並べて表示するエレメント縺E前に持Eｮ嘯ｷる蠢・ｦ≠ｪあります、E*/
	float: left;
	margin-right: 8px;
}
.clearfloat { /* こ縺Eクラスは、Efooter ぁE#container から削除されてぁEｋか取り蛛EされてぁEｋ場合に、Ebr /> また縺E空の div で、フローチEぅングさせる最後縺E div に続く最後縺Eエレメントとして (#container 蜀・↓) 配置できます、E*/
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
ol {
    counter-reset:li; /* Initiate a counter */
    padding:0; /* Remove the default left padding */
    list-style:none; /* Disable the normal item numbering */
}
ol li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px;
    border-top:2px solid #666;
    background:#f6f6f6;
}
ol li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    width:2em;
    padding:4px 0;
    border-top:2px solid #666;
    color:#fff;
    background:#666;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;