@charset "utf-8";
@import"font.css";

* {
		margin: 0;
		padding: 0;
}

.clear { clear: both; }

a:link {
		text-decoration: underline;
		background-color: transparent;
		color: #00f;
}

a:visited {
		text-decoration: underline;
		background-color: transparent;
		color: #90f;
}

a:hover {
		text-decoration: underline;
		background-color: transparent;
		color: #f00;
}

a { overflow: hidden; }

h1,
h2,
h3,
h4,
h5,
h6 { font-weight: normal; }

body {
		text-align: center;
		font: 80% 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		margin: 0;
		padding: 0;
		background: url(../image/bg-body.jpg) repeat-x 0 0;
}

.small { font-size: 90%; }

.medium { font-size: 100%; }

.large { font-size: 120%; }

p,
li {
		line-height: 1.5em;
		margin-bottom: 0.5em;
}

img { border: 0; }

/* ==================================== レイアウト */
#wrapper {
		text-align: left;
		width: 880px;
		margin: 30px auto 10px;
		padding: 19px;
		border: 1px solid #eee;
		background-color: #fff;
}

#header {
		position: relative;
		width: 880px;
		height: 100px;
}

#home #header {
		position: relative;
		width: 880px;
		height: 360px;
}

#content {
		width: 640px;
		float: right;
}

#home #content { width: 440px; }

#sidebar {
		width: 220px;
		float: left;
		background-color: #333300;
}

#sidebar-inner {
		width: 100%;
		padding: 20px 0;
		background: url(../image/bg-side-top.jpg) no-repeat 0 0;
}

p.side-bottom {
		height: 30px;
		line-height: 30px;
		margin: 0;
		background: url(../image/bg-side-bottom.jpg) no-repeat 0 100%;
}

#home #sidebar {
		width: 440px;
		background-color: #fff;
}

#home #sidebar-inner {
		background: none;
		overflow: hidden;
}

#undernavi {
		width: 640px;/*880*/
		clear: both;
		padding-left: 240px
}

#footer {
		width: 100%;/*880*/
		border-top: 1px solid #333300;
}

/* ==================================== header */
p.logo {
		text-indent: -9999px;
		width: 220px;
		height: 90px;
		background: url(../image/logo.jpg) no-repeat 0 0;
		position: absolute;
		top: 0;
		left: 0;
}

p.logo a {
		text-decoration: none;
		display: block;
		width: 220px;
		height: 90px;
		background-image: none;
}

p.logo a:hover {
		text-decoration: none;
		background: url(../image/logo.jpg) no-repeat -220px 0;
}

h1 {
		font-size: 100%;
		position: absolute;
		top: 40px;
		right: 0;
}

ul.fontsize {
		font-size: 90%;
		list-style-type: none;
		width: 245px;
		position: absolute;
		top: 0;
		right: 0;
}

ul.fontsize li {
		text-align: center;
		float: left;
		width: 80px;
		height: 26px;
		line-height: 26px;
		margin-right: 1px;
}

ul.fontsize a {
		text-decoration: none;
		display: block;
		width: 100%;
		background: #333300;
		color: #fff;
}

ul.fontsize a:hover {
		text-decoration: none;
		background: #999966;
		color: #000;
}

h2 {
		font-size: 120%;
		height: 55px;
		padding: 25px 0 0 20px;
		background: url(../image/bg-h2.jpg) no-repeat 0 0;
		color: #333300;
}

p.topicpath {
		line-height: 30px;
		height: 30px;
		margin: 0 0 20px;
		padding: 0;
}

ul.temp { margin: 0 0 0 2em; }

ul.navi {
		list-style-type: none;
		width: 220px;
		margin-bottom: 20px;
}

#home ul.navi {
		float: left;
		width: 198px;
		margin-bottom: 0;
		margin-right: 20px;
}

ul.navi li {
		width: 220px;
		line-height: normal;
		margin-bottom: 1px;
}

#home ul.navi li { width: 198px; }

ul.navi a {
		text-decoration: none;
		display: block;
		width: 180px;
		padding: 10px 10px 10px 30px;
		background: url(../image/bg-menu.jpg) no-repeat 0 100%;
		color: #fff;
}

#home ul.navi a {
		width: 158px;
		background-position: -5px 100%;
}

ul.navi a:hover {
		text-decoration: none;
		background: url(../image/bg-menu.jpg) no-repeat -220px 100%;
		color: #fff;
}

#home ul.navi a:hover { background-position: -225px 100%; }

#undernavi ul {
		list-style-type: none;
		margin: 0;
		padding: 0.5em 1em;
}

#undernavi li {
		display: inline;
		margin: 0;
		padding: 0 1em 0 0;
}

#undernavi p {
		text-align: right;
		margin-bottom: 0.5em;
}

/* ==================================== footer */
#footer p {
		text-align: center;
		line-height: 1em;
		margin-bottom: 10px;
		padding-top: 20px;
}

address {
		line-height: 1.2em;
		font-style: normal;
		text-align: right;
}

address span { display: block; }

#footer a,
#footer a:hover {
		text-decoration: none;
		color: #333300;
}

#slider {
		width: 880px; /* important to be same as image width */
		height: 240px; /* important to be same as image height */
		position: relative; /* important */
		top: 100px;
		left: 0;
		overflow: hidden; /* important */
		background-color: #eee;
}

#sliderContent {
		width: 880px; /* important to be same as image width or wider */
		height: 240px;
		position: absolute;
		top: 0;
		margin: 0;
}

.sliderImage {
		width: 880px;
		height: 240px;
		float: left;
		position: relative;
		display: none;
}

.sliderImage span {
		font-size: 12px;
		font-family: Geneva, Arial, Helvetica, sans-serif;
		line-height: 1.5em;
		position: absolute;
		padding: 5px 20px 5px;
		width: 840px;
		background-color: #333300;
		filter: alpha(opacity=80);
		-moz-opacity: 0.8;
		-khtml-opacity: 0.8;
		opacity: 0.8;
		color: #fff;
		display: none;
}

.clear { clear: both; }

.sliderImage span strong { }

.top {
		top: 0;
		left: 0;
}

.bottom {
		bottom: 0;
		left: 0;
}