@charset "shift_jis";

/* BODY
---------------------------------------------*/

html {
	background-color: #fff;
	width: 100%;
	height: 100%;
	background: url(../img/bg_all.jpg) center top repeat-y;}

body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
	list-style: none;}

body {
        text-align: center;
	font-family: "MS UI Gothic","‚l‚r ‚oƒSƒVƒbƒN", Osaka, sans-serif;
	color: #333;
	font-size: 12px;
	padding-bottom: 40px;}

input, select {padding: 1px;}

img {
	vertical-align: bottom;
	border: none;}

a   {
	color:#333;
	text-decoration: none;}

a:hover {
	color: #ff6f6f;
	text-decoration: underline;}

em,address {font-style: normal;}

strong {font-weight: bold;}

.clear {clear: both;}

/* ALL
---------------------------------------------*/

#all {
	width: 845px;
        margin: 0 auto;
	padding: 0 15px;
        text-align: left;
	letter-spacing: 0.05em;}

.base {
	background: url(../img/bg_header.jpg) 18px top no-repeat;}

/* forIE6 */
*html .base {
	background: url(../img/bg_header.jpg) 16px top no-repeat;}


/* HEADER
---------------------------------------------*/

#header { 
	position: relative;
	width: 841px;
	height: 67px;}

#logo {
	position: absolute;
	left: 18px; top: 8px;}

/* forIE6 */
*html #header em { top: 22px;}

#header em {
	position: absolute;
	right: 12px; top: 3px;}

/* forIE6 */
*html #header em {
	right: 5px; top: 3px;}

/* CONTENTS
---------------------------------------------*/

#contents {
	height: 100%;}

/* MAIN
---------------------------------------------*/

#ttlbox {
	position: relative;
	width: 813px;
	height: 422px;
	margin-left: 18px;}

#ttlbox2 {
	position: relative;
	width: 813px;
	height: 240px;
	margin-left: 18px;}
	
#ttlbox3 {
	position: relative;
	width: 813px;
	height: 390px;
	margin-left: 18px;}

#ttlbox h2,#ttlbox2 h2,#ttlbox3 h2{
	position: absolute;
	left: -15px; top: -22px;}

/* for IE6 */
*html #ttlbox h2 { left: -15px; top: 2px;}
*html #ttlbox2 h2 { left: -15px; top: 2px;}
*html #ttlbox3 h2 { left: -15px; top: 2px;}
*html #ttlbox3 { height: 414px;}

/* for IE7 */
*:first-child+html #ttlbox h2 { left: -15px; top: 2px;}
*:first-child+html #ttlbox2 h2 { left: -15px; top: 2px;}
*:first-child+html #ttlbox3 h2 { left: -15px; top: 2px;}
*:first-child+html #ttlbox3 { height: 414px;}


#basenavi {
	margin: 26px 0 0 213px;}

#basenavi li {
	float: left;
	width: 85px;
	margin-right: 0;
	text-indent: -9999px;}

#basenavi li a {
	display: block;
	overflow: hidden;
	height:0 !important;
	height /**/: 120px;
	padding-top: 120px;
	background-image: url(../img/navi.gif);}

.b-nav01 a {background-position: 0 0;}
.b-nav02 a {background-position: -85px 0;}
.b-nav03 a {background-position: -170px 0;}
.b-nav04 a {background-position: -255px 0;}
.b-nav05 a {background-position: -340px 0;}
.b-nav06 a {background-position: -425px 0;}
.b-nav07 a {background-position: -510px 0;}
.b-nav08 a {background-position: -595px 0;}

.b-nav01 a:hover {background-position: 0 -120px;}
.b-nav02 a:hover {background-position: -85px -120px;}
.b-nav03 a:hover {background-position: -170px -120px;}
.b-nav04 a:hover {background-position: -255px -120px;}
.b-nav05 a:hover {background-position: -340px -120px;}
.b-nav06 a:hover {background-position: -425px -120px;}
.b-nav07 a:hover {background-position: -510px -120px;}
.b-nav08 a:hover {background-position: -595px -120px;}

#mainbox {
	position: relative;
	width: 816px;
	padding: 0 8px 0 16px;
	letter-spacing: 0.05em;
	line-height: 1.5em;}

#mainbox p { margin-top: 1em;}

/* FOOTER
---------------------------------------------*/

#footer {
	clear: both;
	color: #616161;
	padding: 0 0 40px 25px;
	line-height: 1.5em;}

#footer span {
	display: block;}

#footer a { color: #616161;}
#footer a:hover { color: #ff6f6f;}

#footer em img {
	margin-top: 1em;}

#footer .copy {
	font-size: 11px;
	text-align: right;
	letter-spacing: 0;
	margin-top: -70px;
	padding-right: 20px;
	font-family:  Verdana, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;}

/* CLEARFIX
---------------------------------------------*/

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix{ display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */