@charset "utf-8";
body {
	margin: 0; padding: 0;
	background: #FFF; color: #222;
	font: 100%/1.4  "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
/*	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
*/

br {line-spacing:0;} /*IE連続改行bug回避*/
img { max-width : 100% ; height : auto ; padding:3px 0;}

a { padding: 0 1px; }
a img { border: none; vertical-align: text-top; } 
	/* リンク画像の青い枠線を消す */

a:link, a:visited { color: #297596; text-decoration: underline; }
a:hover, a:active, a:focus { text-decoration:none; }

h3, h4, h5, p { margin-top:0;}
	/* マージンを含むdivからマージンがはみ出す場合がある問題を回避.
	margin-bottom は使用可. */
	/* padding-right: 5px;	padding-left: 5px; */
	/* div 自体ではなく div 内でエレメントの両側に余白を追加すると
	ボックスモデル計算が不要になる。代わりに、両側に余白を指定した 
	div をネストして使用することもできる。 */

ul { padding: 0; margin: 0;}
	/* browser間相違によりul, ol, dlリスト余白類は0推奨。
	この指定は以降の .nav リストなどにも継承されるので注意 */

/* == レイアウトに使用するカラムについてメモ == 
	☆ カラムがfloatの場合、marginは指定しないこと！
	　floatで寄せる側には margin ではなく padding を指定。
	これに従わない場合は、div に display:inline 宣言することで
	一部のIE ver でマージンが2倍になるバグを回避する必要がある.
	☆ カラムを ID (頁内で1回のみ) ではなくクラス名にした場合
	必要に応じて 2 つのサイドバー div をスタックできる.
	☆ 左右のカラムを反対方向にfloatさせると反転してレンダリングされる.
	  HTML ソース内で div を移動する必要はない.
*/

/* ページ全体の構成 */

.wrapper { width: 822px; margin:0 auto; padding:0;} /* 横中央 複数回使用 .headboxも同幅に */ 

#side { float:right; width: 124px; margin:0; padding:30px 0 10px 0; }

#main { float:right; width: 694px; margin:0; padding:30px 0 10px 0; } /* indexページ内で複数回使用？*/ 

/*#main img { max-width : 100% ; height : auto ; padding:2px 0;}*/

#footer { clear: both;
	padding: 8px 20px; background: #CCC49F;
	position: relative; /* ！IE6-8対策. hasLayoutを持たせるため指定 */
	font-size: 82%;}
	/* wrapper内で このclear:both でカラム末尾を認識. ページ全体構成ここまで */

/* ページ最上部リンク ( スクロールロックは廃止) */
.navi { display: block; padding:0; font-size:82%; }
.navi ul { list-style:none;  }	/* ulは余白類0！ */
.navi li { float:left; padding: 2px 0 4px 4px;} /*min-width:30px;*/

.navi a:link { color:#202020; text-decoration: underline; }
.navi a:visited { color: #808080; text-decoration: underline; }
.navi a:hover, .navi a:active, .navi a:focus { 	color:#00B06F; 
	text-decoration: none;} /* background-color:#FFFFFF;*/

	/* ページtoparea内 背景画像付き帯 */
.headerimg { display: block; width:100%; height:50px; padding:0;
	background-color: #000; background-origin: border-box; background-repeat: no-repeat;
	background-image: url(img/header50.jpg); 
    background-position: center;}
.headbox{ display:block; margin: 0 auto; width:822px; height: 50px; padding: 0; 
	overflow:hidden;}
.headbox .headtit1 { display: block; float:left; width: 43%; padding: 17px 0 0 10px; 
	color:#fff; font-weight:bold; letter-spacing:1px; line-height:1.1; 
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
.headbox .headtit2 { display:block; float:left; width:54%; padding:20px 0 0 4px; 
	color:#fff; font-size:82%; line-height:1.1;  }


/* サイド領域メニュー */
#sidehead {display:block; margin:0 0 10px 0;
		background-color:#26A663; color:#fff; padding: 2px 0 1px 8px;}
.mobile {display:none; } /* display:none; visibility:hidden; */
.year { height:auto; overflow-y;auto;}

ul.year { list-style: none; margin-bottom: 10px; font-size:80%;}
ul.year li {margin: 0px 0px 8px 0px; text-indent: 8px; } 
	/* ボタン外側. aタグ無いself項目にも適用. text-indent:8px; */

ul.year .self {width: 124px;  padding:1px 0;
	border: solid 1px #CCC; background-color: #FFD;
} /* selfはdivに指定. borderに1pxとられる. paddingで考慮*/

ul.year a, ul.year a:visited, ul.year a:focus { /* ボタン */
	display: block; /* blockによりボタン領域全体がリンクに */
	width: 124px; /* この幅指定でIE6でもボタン全体がclickableに */
	padding: 1px;
	text-decoration: none;
	color: #000; background-color: #DBE8AA;
} /*padding: 1px; */

ul.year a:hover, ul.year a:active, ul.year a:focus {
	color: #FFF;
	background-color: #87B15C;
}

	/* メイン領域内 */

	/* メイン領域冒頭見出し  [年月～年月] */
.maintop { margin:0 20px 24px 0px; padding:2px 2px 2px 40px; 
	background-color:#ddeebb; border-bottom: 1px solid #777 }
.mainhd { margin-bottom:2px; padding-top:6px; font-size:92%; letter-spacing:1px; }
.arrows { float: right; margin:0 ; font-size:82%; padding:0 50px 16px 0;} 
/* .arrows (フロート)使うなら  */

	/* メイン領域 各記事タイトル */
.date { float: right; width: 140px; padding: 0px 20px 0 20px;	font-size:92%; } /* 記事日付 */
h4 { width:560px; margin-left:2px; padding-left:40px; padding-bottom:2px; background-image:url(sqr04.gif); background-repeat: no-repeat; background-position:left top; font-size: 100%; letter-spacing:1px; color:#000000; 
} 

	/* メイン領域 文 */
.bun {padding:0px 54px 10px 30px; line-height:1.6; }
.bun a { padding: 0 1px; text-decoration: none; }
.bun a:link { color: #0080c0; border-bottom:solid 1px #0000ff; }
.bun a:visited { color: #0080c0; border-bottom:solid 1px #0000ff; }
.bun a:hover, a:active, a:focus { color:#00B06F; border-bottom:none;}
		/*text-decoration: none;background-color:#ffffe8; */

	/* 670px */
/*.bun p {margin-bottom:14px;}*/

	/* フロート要素は それと横並びにする他要素の前に指定 */
	/* 右floatなら右marginをゼロに. 左floatなら左marginゼロ */
.pod_r { margin:0 0 20px 4px; padding-right:8px;
				line-height:1.6; }  /* フル幅. 右floatコンテナ */
.pod_l { margin:0 2 20px 0px; padding-left:8px; 
				line-height:1.6; }  /* フル幅. 左floatコンテナ */
.img_r { float:right; margin:0 0 20px 12px; } /*写真複数個でも*/
.img_l { float:left; margin:0 12px 20px 0px;  }
/* .pod_sr .pod_l .pod_sl  (r=右, l=左, s=小さめ画像) */

.clearboth { clear:both; height:0; font-size: 1px; line-height: 0px;} 
	/* 左右floatの末尾にclear必要  (#footerはclear指定含む)
		<div class="clearboth"></div>  */

.aligc { text-align:center; margin-left:auto; margin-right:auto; margin-bottom:28px; } 
 /*text-align:centerは中央寄せIE用 margin autoはIE以外用の中央寄せ。注：中味だけ左寄せは要width */ 
.aligc img {margin-bottom:4px;}
.aligc p {margin-bottom:18px;}

.aligr { text-align:right; margin-bottom:12px; } /*div bun幅内で右寄せ*/
.aligr2 { text-align:right; padding-right:50px; margin-bottom:16px;} 
			/* 右端少し空けて右寄せ. 主にdiv bun外で使用 */
.boxr {margin:0 50px 20px 100px; } /* box 右より */
.boxw {margin:0 30px 20px 30px; }  /* box wide 左右余白少な */
	/* .noteR .noteB は 廃止 */
.noteT { text-indent:30px; color:#4030c0; } /* 残す！mainTopのnote */

.hline { margin: 0 30px 50px 12px; height:10px; border-bottom-width: 3px; 
    border-bottom-style: dotted; border-bottom-color: #AFA792; }

blockquote.cite {margin:0 0 0 .8ex; padding-left:1ex;
		border-left:1px #bbb solid; } /* 引用の左端 縦線 */

.migi {padding-right:10px; text-align:right;}
.note9 { font-size: 92%; line-height:1.4; color: #847457; }
.note { font-size: 80%; line-height:1.2; color: #847457; }

.s9 {	font-size: 90%; line-hight:1.2;
	font-family: sans-serif;}

.s8 {	font-size: 82%; line-hight:1.2;
	font-family: sans-serif;}

.aka {color:#f00;}
.iro1 {color:#008080;}/*#004080 #008080*/
.iro2 {}

	/* フッター領域用 */
#footer a {color:#000000;text-decoration:none;
		border-bottom:solid 1px #000000; }
#footer a:hover {border-bottom: none;} 

@media screen and (max-width: 767px) {
 .wrapper { width:100%; margin: 0;}
 #side { width:150px; margin-right:8px; padding:10px 0 0 0;  }
 #main { width:100%; padding:0 0 0 0; }
 #sidehead {margin-top:10px:}
 .mobile {display:inline;}/* display:inline; visibility:visible; */
 .year { height: 90px; overflow-y:scroll; }
 ul.year li {margin-bottom: 4px;} 
 .headbar { display: block; width:100%; margin: 2px 0 0 0; } 
 .headbox { width:100%;}
 .headbox .headtit1 { padding:12px 0 0 6px; font-size:100%; letter-spacing:0; }
 .headbox .headtit2 { padding:20px 0 0 2px;}
 .maintop { margin: 4px 2px; padding:2px 2px 2px 10px; }
 .bun {padding:0 1px 10px 10px;}
}

/* #sidemenu:checked ~ .side { height:auto; minimum-height: 200px; } */