@charset "Shift_JIS";
@media screen {


/* =============================================================================
   Base
   ========================================================================== */

html,body { margin: 0; padding: 0; }
html { background-color: #FFF; }
body {
	margin: 2% auto; width: 70%; max-width: 700px; color: #333;
	font: 86%/1.5 'Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
	}


/* =============================================================================
   Links
   ========================================================================== */

a { text-decoration: underline; }
	a:link { color: #556B2F; }
	a:visited { color: #808000; }
	a:hover,a:active,a:focus { color: #A0522D; text-decoration: none; }


/* =============================================================================
   Typography
   ========================================================================== */

h1,h2,h3,h4,h5,h6 { font-weight: bold; }
h1 {
	margin: 0; padding: 2px 0; color: #696969;
	font-size: 120%; line-height: 2em; text-shadow: 1px 1px 1px #C0C0C0;
	}
	h1:first-letter {
		margin-right: .5em; padding: .5em; border: 2px #C0C0C0 solid; color: #DCDCDC;
		background-color: #696969; text-shadow: 1px 1px 1px #333; box-shadow: #333 1px 1px 1px;
		}
h2 {
	margin: 1.5em 0 0; padding: 25px 5px 5px; color: #696969;
	background: url(img/h2.gif) repeat-x center top; font-size: 150%;
	text-align: right; text-shadow: 1px 1px 1px #C0C0C0;
	}
h3,h4,h5,h6 { margin: 1.5em 0 .5em; }
h3+h4,h4+h5,h5+h6 { margin-top: .8em; }
h3 {
	padding-left: 43px; color: #2F4F4F; background: url(img/h3.gif) no-repeat left center;
	font-size: 130%; text-shadow: 1px 1px 1px #C0C0C0;
	}
h4 { margin-left: 5%; padding-left: .5em; border-left: 5px #DCDCDC solid; color: #696969; font-size: 120%; }
	h4:first-letter { color: #CD853F; }
h5 { margin-left: 10%; padding-left: .5em; border-left: 2px #CD853F solid; color: #696969; font-size: 110%; }
h6 { color: #696969; font-size: 100%; text-align: right; }

p,address,blockquote,pre { margin: .8em 0; padding: 0; }
hr { display: none; }
br { letter-spacing: normal; }
img { margin: 2px; border: 0; vertical-align: text-bottom; }

address { color: #808080; font-weight: bold; }
	li address { margin: 0; display: inline; font-weight: normal; font-style: normal; }

blockquote {
	margin-right: 1em; margin-left: 1em; padding: .2em 1em; border-bottom: 1px #C0C0C0 dashed;
	background: url(img/quote_open.gif) no-repeat left top;
	}
	blockquote[cite]:after {
		content: attr(cite); margin-top: -3em; padding-top: 3em; display: block;
		color: #696969; background: url(img/quote_close.gif) no-repeat right top; text-align: right;
		}
q { border-bottom: 1px #C0C0C0 dashed; }
cite { border-bottom: 1px #DCDCDC dotted; font-style: normal; }

pre {
	padding: 1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
	overflow: auto; color: #FFF; background-color: #778899; font-family: 'MS PGothic';
	}
	pre code { color: #FFF; }

em { border-bottom: 1px #CD5C5C dotted; color: #800000; font-style: normal; }
strong { border-bottom: 2px #CD5C5C dotted; color: #800000; font-weight: bold; }

ins { border-bottom: 2px #C0C0C0 dotted; color: #222; text-decoration: none; }
del { color: #666; text-decoration: line-through; }

abbr,acronym { border: 0; cursor: help; }
code,var,kbd,samp { margin: 0 2px; }
code,kbd,samp { font-family: monospace; }
var,dfn { font-style: normal; }
code { color: #008080; }
kbd {
	padding: 0 .5em; border: 2px #C0C0C0 solid; -webkit-border-radius: 3px; -moz-border-radius: 3px;
	border-radius: 3px; color: #FFF; background-color: #696969;
	}
samp { color: #708090; font-weight: bold; }
dfn { font-weight: bold; }


/* =============================================================================
   Lists
   ========================================================================== */

ol,ul,dl { margin: .8em 0; padding: 0; }
ol,ul { list-style-position: outside; }
	li { margin-left: 2em; }
dl { margin-left: 1em; }
	dt { padding-left: .5em; border-bottom: 3px #DCDCDC double; width: 60%; font-weight: bold; }
	dd { margin: .2em 0 0 2em; }
	dd+dt { margin-top: .5em; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: .8em 0; padding: 0; }
fieldset {
	padding: .5em 1em; border: 1px #C0C0C0 dotted;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	}

input,textarea,select { margin: 2px; color: #333; font-size: 86%; }
	input[type="text"],textarea {
		border: 3px #DCDCDC double; -webkit-border-radius: 3px; -moz-border-radius: 3px;
		border-radius: 3px; background-color: #F5F5F5;
		}
	input[type="checkbox"],input[type="radio"],input[type="button"],
	input[type="submit"],input[type="reset"],input[type="image"] { cursor: pointer; }

button { margin: 2px; padding: 0 .5em; color: #333; cursor: pointer; }


/* =============================================================================
   Tables
   ========================================================================== */

table { margin: .8em 0; }
	caption { text-align: center; }
	th,td {
		padding: .5em; border-right: 1px #C0C0C0 solid; border-bottom: 1px #DCDCDC solid;
		vertical-align: middle; text-align: center; box-shadow: #333 1px 1px 1px;
		}
	thead th,thead td,tfoot th,tfoot td { font-weight: bold; }
	th { color: #FFF; background-color: #808080; font-weight: normal; }
	td { background-color: #F5F5F5; }


/* =============================================================================
  ID&class
   ========================================================================== */

div#PAGETOP { background: url(img/top.jpg) no-repeat 2em 0; }
div#HEADER { margin: 0 2em 0 150px; padding-left: 4em; }
	ul#PAN { border-bottom: 1px #C0C0C0 dotted; list-style-type: none; }
		ul#PAN li { margin: 0; display: inline; color: #696969; }
		ul#PAN li+li { padding-left: 9px; background: url(img/pan.gif) no-repeat left center; }
				ul#PAN li a:link,ul#PAN li a:visited { color: #808080; }
				ul#PAN li a:hover,ul#PAN li a:active,ul#PAN li a:focus { color: #A0522D; }
div#MENU { margin: 0 2em 0 150px; padding-left: 4em; }
	div#MENU h2 { display: none; }
	div#MENU>ul { margin: 0; list-style-type: square; }
		li[id^="MENU"] { color: #C0C0C0; }
				li[id^="MENU"]>a:link,li[id^="MENU"]>a:visited { color: #556B2F; }
				li.menu-on>a:link,li.menu-on>a:visited { color: #808080; }
				li[id^="MENU"]>a:hover,li[id^="MENU"]>a:active,li[id^="MENU"]>a:focus,
				li.menu-on>a:hover,li.menu-on>a:active,li.menu-on>a:focus { color: #A0522D; }
div#KIZI { padding-bottom: 1em; border-bottom: 1px #C0C0C0 dotted; }
	div.text { padding: 1px 2em 0; min-height: 79px; background: url(img/text.gif) no-repeat right top; }
		div.text hr {
			margin: 2em 0; border-width: 2px 0; border-color: #C0C0C0; border-style: dotted;
			display: block; height: 1px;
			}
		ul.modori { list-style-type: none; }
			ul.modori li {
				margin-left: auto; padding: .1em .5em; border: 2px #C0C0C0 solid;
				width: 6em; background-color: #696969; font-weight: bold;
				text-align: center; text-shadow: 1px 1px 1px #333; box-shadow: #333 1px 1px 1px;
				}
				ul.modori li a { text-decoration: none; }
					ul.modori li a:link,ul.modori li a:visited { color: #DCDCDC; }
					ul.modori li a:hover,ul.modori li a:active,ul.modori li a:focus { color: #C0C0C0; }
div#FOOTER { margin-top: 2px; border-top: 1px #C0C0C0 dotted; }
	div#FOOTER h2 { display: none; }
	div#FOOTER>ul {
		margin: 2px 1em 0 0; padding-top: .5em; border-top: 1px #C0C0C0 dotted;
		list-style-type: none; text-align: center;
		}
		li[id^="FOOTER"] { margin-left: 1em; display: inline; }


}