@charset "utf-8";

/* CSS Info ================
Description: PageBody Style
========================= */

/* =========================================================
layout
========================================================= */

.reset {
	clear: both;
}
.reset:after {
	clear: both;
	display: block;
	content: " ";
}
div.leftmap {
	float: left;
	width: 347px;
	padding: 0 5px 0 0;
}
div.rightmap {
	float: right;
	width: 347px;
	padding: 0 0 0 5px;
}
div.center {
	text-align: center;
}
div.right {
	text-align: right;
}

h3#catch {
	text-align:center;
	margin-bottom: 20px;
}
.ctr {
	text-align: center;
}

/* =========================================================
color,decoration
========================================================= */

.fbold {
	margin-bottom: 20px;
	font-size: 150%;
	font-weight: bold;
}
.cbrown {
	color: #61341B;
}
.cred {
	color: #FF0000;
}
.cgreen {
	color: #009900;
}
.cblue {
	color: #0000FF;
}
.corange {
	color: #FF8C00;
}
.pa {
	padding-left: 10px;
}
a.detail {
	padding: 0 8px;
	border-width: 0 1px;
	border-style: solid;
	border-color: #CCCCCC;
	margin-left: 10px;
}
ul.anchor {
	border-left: 1px solid #CCCCCC;
	margin: 0 0 20px;
}
ul.anchor li {
	border-right: 1px solid #CCCCCC;
	display: inline;
	font-size: 90%;
	padding: 0 10px 0 8px;
}

/* =========================================================
support
========================================================= */

div.support {
	clear: both;
	border: 1px solid #CCCCCC;
	margin: 20px 30px 10px 30px;
}
div.support:after {
	clear: both;
	display: block;
	content: " ";
}
div.support h4 {
	background: url("../img/icon.gif") no-repeat scroll 10px 10px #E00000;
	color: #FFFFFF;
	font-weight: bold;
	padding: 6px 5px 5px 25px;
}
div.support address {
	padding: 15px;
	line-height: 1.5em;
}
div.support address strong{
	font-weight: bold;
	font-size: 120%;
	line-height: 1.7em;
	padding: 0 3px;
}

/* =========================================================
back(pageTop)
========================================================= */

.pageTop {
	clear: both;
	text-align: right;
	padding: 10px 0 20px;
}
.pageTop a {
	background:url("../img/arrowy.gif") no-repeat scroll left center transparent;
	padding:0 0 0 15px;
}

div#localnavi {
	margin: 20px 10px;
}
div#localnavi:after {
	clear: both;
	display: block;
	content: " ";
}
div#localnavi ul li#before {
	float: left;
	width: 340px;
	text-align: left;
}
div#localnavi ul li#next {
	float: right;
	width: 340px;
	text-align: right;
}
div#localnavi ul li#before a {
	background:url("../img/arrowl.gif") no-repeat scroll left 2px transparent;
	padding:0 0 0 15px;
}
div#localnavi ul li#next a {
	background:url("../img/arrowr.gif") no-repeat scroll right 2px transparent;
	padding:0 15px 0 0;
}

/* =========================================================
Sitemap
========================================================= */

div.section {
	clear: both;
	margin-bottom: 20px;
}
div.section:after {
	clear: both;
	display: block;
	content: " ";
}
div.section h3 {
	background: url("../img/bar.jpg") repeat-x scroll 0 0 transparent;
	border: 1px solid #CCCCCC;
	margin-bottom: 10px;
	padding: 5px 10px;
	height: 20px;
}

div.section h3 a, div.section h3 em {
	background: url("../img/icon.gif") no-repeat scroll 1px 6px transparent;
	padding: 0 15px;
}

div.section h3 a:hover {
	background: url("../img/mark.gif") no-repeat scroll 1px 3px transparent;
}

div.section ul li {
	line-height: 1.7;
}

div.section ul li a, div.section ul li span {
	background: url("../img/icon.gif") no-repeat scroll 35px 9px transparent;
	padding: 7px 10px 5px 50px;
}

div.section ul li a:hover {
	background: url("../img/mark.gif") no-repeat scroll 35px 6px transparent;
}

div.section ul li ul li a, div.section ul li ul li span {
	background: url("../img/icon.gif") no-repeat scroll 65px 9px transparent;
	padding: 7px 10px 5px 80px;
}

div.section ul li ul li a:hover {
	background: url("../img/mark.gif") no-repeat scroll 65px 6px transparent;
}

div.section ul li ul li ul li a, div.section ul li ul li ul li span {
	background: url("../img/icon.gif") no-repeat scroll 95px 9px transparent;
	padding: 7px 10px 5px 110px;
}

div.section ul li ul li ul li a:hover {
	background: url("../img/mark.gif") no-repeat scroll 95px 6px transparent;
}

/* =========================================================
List
========================================================= */

/* ======== ul ======== */

ul.basic {
	margin: 0 0 10px
}
ul.basic li {
	line-height: 1.6em;
	background: url("../img/icon.gif") no-repeat scroll 5px 7px transparent;
	padding: 0 0 0 20px;
}

ul.point {
	margin-bottom: 10px;
}

ul.point li {
	background: url("../img/icon.gif") no-repeat scroll 5px 4px transparent;
	padding: 0 0 5px 18px;
}

/* ======== ol ======== */

ol#philosophy li {
	list-style-type: decimal;
	margin-bottom: 20px;
	margin-left: 20px;
}
ol#philosophy li h4 {
	font-weight: bold;
	font-size: 120%;

}
ol#philosophy li p {
	padding-left: 25px;
	margin-top: 5px;
}

ol.basic {
	margin: 0 0 15px;
}
ol.basic li {
	list-style-type: decimal;
	margin-bottom: 5px;
	margin-left: 40px;
}

/* ======== dl ======== */

dl#about {
	clear: both;
}
dl#about:after {
	clear: both;
	display: block;
	content: " ";
}
dl#about dt {
	float: left;
	width: 120px;
	background: url("../img/icon.gif") no-repeat scroll 0 3px transparent;
	padding: 0  0 0 15px;
	line-height: 1.6;
	font-weight: bold;
}
dl#about dd {
	float: left;
	width: 570px;
	padding: 0 0 0 5px;
	line-height: 1.6;
}

dl#rec {
	clear: both;
}
dl#rec:after {
	clear: both;
	display: block;
	content: " ";
}
dl#rec dt {
	float: left;
	width: 200px;
	background: url("../img/icon.gif") no-repeat scroll 0 3px transparent;
	padding: 0 5px 10px 15px;
	font-weight: bold;
}
dl#rec dd {
	float: left;
	width: 490px;
	padding: 0 0 10px 5px;
}

dl.rec {
	clear: both;
}
dl.rec:after {
	clear: both;
	display: block;
	content: " ";
}
dl.rec dt {
	float: left;
	width: 200px;
	background: url("../img/icon.gif") no-repeat scroll 0 3px transparent;
	padding: 0 5px 15px 15px;
	font-weight: bold;
}
dl.rec dt span {
	font-weight: normal;
}
dl.rec dd {
	float: left;
	width: 490px;
	padding: 0 0 15px 5px;
}

dl.basic {
	clear: both;
	margin-bottom: 10px;
	width: 100%;
}
dl.basic:after {
	clear: both;
	display: block;
	content: " ";
}
dl.basic dt {
	float: left;
	width: 120px;
	line-height: 1.6;
}
dl.basic dd {
	float: left;
	width: 570px;
	line-height: 1.6;
}

/* =========================================================
Parts
========================================================= */

/* ======== midashi ======== */

h3.basic {
	background: url("../img/icon.gif") no-repeat scroll 0 6px transparent;
	padding: 0 5px 0 15px;
	margin-bottom: 10px;
}

div.subtitle {
	margin-bottom: 10px;
	background: url("../img/bar.jpg") repeat-x scroll 0 0 transparent;
	border: 1px solid #CCCCCC;
	padding: 5px 20px 5px 10px;
	height: 20px;
}
div.subtitle:after {
	clear: both;
	display: block;
	content: " ";
}
div.subtitle h3 {
	float: left;
	width: 580px;
}
div.subtitle span {
	float: right;
	width: 85px;
	text-align: right;
	display: block;
	padding-top: 3px;
}
h3.subtitle {
	background: url("../img/bar.jpg") repeat-x scroll 0 0 transparent;
	border: 1px solid #CCCCCC;
	margin: 10px 0;
	padding: 5px 10px;
	height: 20px;
}
h3.subtitle a {
	background: url("../img/icon.gif") no-repeat scroll 1px 6px transparent;
	padding: 0 15px;
}

/* ======== etc ======== */

p.basic {
	margin-bottom: 20px;
}

p.memo {
	padding: 10px 20px;
}

p.memo2 {
	text-align: right;
}

/* ======== index ======== */
div.genre {
	clear: both;
	margin-bottom: 20px;
}
div.genre:after {
	clear: both;
	display: block;
	content: " ";
}
div.genre h3, div.genre h4 {
	background: url("../img/bar.jpg") repeat-x scroll 0 0 transparent;
	border: 1px solid #CCCCCC;
	margin-bottom: 10px;
	height: 20px;
}
div.genre h3 {
	padding: 5px 10px;
}
div.genre h4 {
	padding: 7px 10px 4px;
}

div.genre h3 a, div.genre h4 a, div.genre h3 span, div.genre h4 span {
	background: url("../img/icon.gif") no-repeat scroll 1px 5px transparent;
	padding: 0 15px;
}
div.genre h3 a:hover, div.genre h4 a:hover {
	background: url("../img/mark.gif") no-repeat scroll 1px 1px transparent;
}

div.genre p {
	margin-bottom: 10px;
	padding: 0 5px;
}
div.image {
	float: left;
	padding: 0 10px 10px 3px;
}

/* greeting, commitment */
div#pic {
	float: left;
	width: 220px;
	margin: 0 10px 10px 0;
}
div#memo {
	text-indent: 10px;
}
div#namae {
	clear: both;
}
div#namae:after {
	clear: both;
	display: block;
	content: " ";
}
div#namae p {
	width: 170px;
	float: right;
	line-height: 1.5em;
}