/* --- Shared Style ------------------------------------------------------------------- */

*     { margin: 0px; padding: 0px; }
html  { height: 100%; }
body  { height: 100%; font: 87%/1.3em "MS UI Gothic", sans-serif; }
a     { text-decoration: none; outline: none; }
a:hover { background: #fec; }
a img { border-style: none; }
table { border-collapse: collapse; }

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


/* --- Header and Body ---------------------------------------------------------------- */

#wrapper {
	position:relative;
	width: 100%;
	min-height: 100%;
	background: #fffcf9;
}

	* html #wrapper {
		height: 100%;
	}
	
	body > #wrapper {
		height: auto;
	}


/* --- Header ------------------------------------------------------------------------- */

#header-wrapper {
	width: 100%;
	height: 180px;
	background: url(../img/header-bg.png) repeat-x;
	text-align: center;
}

#header {
	position: relative;
	margin: 0 auto;
	width: 960px;
	height: 180px;
	text-align: left;
}

h1#logo {
	position: absolute;
	top: 40px;
	left: 0;
	width: 180px;
	height: 45px;
	text-indent: -9999px;
	overflow: hidden;
}

h1#logo a {
	display: block;
	width: 180px;
	height: 45px;
	background: url(../img/header.png) no-repeat 0 -32px;
}

p#phone {
	position: absolute;
	top: 0;
	left: 680px;
	width: 280px;
	height: 25px;
	text-indent: -9999px;
	overflow: hidden;
}

p#phone span {
	display: block;
	width: 280px;
	height: 25px;
	background: url(../img/header.png) no-repeat -680px 0;
}


/* -- Menu ---------------------------------------------------------------------------- */

ul#menu {
	position: absolute;
	top: 60px;
	left: 230px;
	width: 730px;
	height: 25px;
}

ul#menu li {
	float: left;
	margin-left: 10px;
	height: 25px;
	list-style-type: none;
	text-indent: -9999px;
}

ul#menu li#home       { width:  60px; }
ul#menu li#about      { width: 130px; }
ul#menu li#speaking   { width: 130px; }
ul#menu li#counseling { width: 150px; }
ul#menu li#attendant  { width: 130px; }
ul#menu li#contact    { width:  70px; }

ul#menu li a {
	display: block;
	height: 25px;
	background: url(../img/header.png) no-repeat;
}

ul#menu li#home       a { width:  60px; background-position: -240px -50px; }
ul#menu li#about      a { width: 130px; background-position: -310px -50px; }
ul#menu li#speaking   a { width: 130px; background-position: -450px -50px; }
ul#menu li#counseling a { width: 150px; background-position: -590px -50px; }
ul#menu li#attendant  a { width: 130px; background-position: -750px -50px; }
ul#menu li#contact    a { width:  70px; background-position: -890px -50px; }

ul#menu li#home       a:hover { background-position: -240px -75px; }
ul#menu li#about      a:hover { background-position: -310px -75px; }
ul#menu li#speaking   a:hover { background-position: -450px -75px; }
ul#menu li#counseling a:hover { background-position: -590px -75px; }
ul#menu li#attendant  a:hover { background-position: -750px -75px; }
ul#menu li#contact    a:hover { background-position: -890px -75px; }

body.home       ul#menu li#home       a,
body.home       ul#menu li#home       a:hover {
	background-position: -240px -100px; cursor: default; }

body.about      ul#menu li#about      a,
body.about      ul#menu li#about      a:hover {
	background-position: -310px -100px; cursor: default; }

body.speaking   ul#menu li#speaking   a,
body.speaking   ul#menu li#speaking   a:hover {
	background-position: -450px -100px; cursor: default; }

body.counseling ul#menu li#counseling a,
body.counseling ul#menu li#counseling a:hover {
	background-position: -590px -100px; cursor: default; }

body.attendant  ul#menu li#attendant  a,
body.attendant  ul#menu li#attendant  a:hover {
	background-position: -750px -100px; cursor: default; }

body.contact    ul#menu li#contact    a,
body.contact    ul#menu li#contact    a:hover {
	background-position: -890px -100px; cursor: default; }


/* --- Page Title --------------------------------------------------------------------- */

h2#title {
	position: absolute;
	top: 120px;
	left: 0;
	width: 960px;
	height: 25px;
	text-indent: -9999px;
	overflow: hidden;
}

h2#title span {
	display: block;
	margin-left: 240px;
	height: 25px;
	background: url(../img/header.png) no-repeat;
}

body.home       h2#title span { width: 520px; background-position: -330px -150px; }
body.about      h2#title span { width: 220px; background-position:  -70px -125px; }
body.speaking   h2#title span { width: 210px; background-position: -290px -125px; }
body.counseling h2#title span { width: 260px; background-position: -500px -125px; }
body.attendant  h2#title span { width: 230px; background-position:    0px -150px; }
body.contact    h2#title span { width: 100px; background-position: -230px -150px; }


/* --- Document Body ------------------------------------------------------------------ */

#body-wrapper {
	padding-bottom: 100px;
	width: 100%;
	text-align: center;
}

#body {
	position: relative;
	margin: 0 auto;
	width: 960px;
	text-align: left;
}

#body-lft {
	float: left;
	padding-top: 20px;
	width: 240px;
	background: url(../img/local-bg.png) no-repeat;
}

#body-rgt {
	float: left;
	padding: 20px 0 50px 20px;
	width: 700px;
}


/* --- Main Document ------------------------------------------------------------------ */

/* --- Image --- */

#body-rgt p.img-rgt {
	float: right;
	margin: 20px 10px 0 20px;
	padding: 0;
	width: 200px;
}


/* --- Text --- */

#body-rgt div.text-lft {
	float: left;
	margin: 10px 0 0 0;
	width: 470px;
}


/* --- Headline --- */

#body-rgt .top {
	padding-top: 0;
}

#body-rgt h3 {
	padding: 30px 5px 3px 5px;
	border-bottom: 5px solid #dcb;
	color: #311;
	font-size: 110%;
	font-weight: bold;
}

#body-rgt h4 {
	padding: 30px 5px 3px 5px;
	border-bottom: 1px solid #dcb;
	color: #311;
	font-size: 100%;
	font-weight: bold;
}

#body-rgt h5 {
	padding: 20px 5px 3px 5px;
	color: #311;
	font-size: 100%;
	font-weight: bold;
}

#body-rgt h6 {
	padding: 20px 5px 3px 5px;
	color: #311;
	font-size: 100%;
	font-weight: normal;
}

/* --- List --- */

#body-rgt ul,
#body-rgt ol {
	margin: 0 0 0 40px;
	padding: 5px 0 15px 0;
}

#body-rgt ul li,
#body-rgt ol li {
	padding-top: 10px;
	text-align: justify;
	text-justify: auto
}

#body-rgt dl {
	padding: 5px 0 15px 0;
	line-height: 1.2em;
}

#body-rgt dl dt {
	margin: 20px 0 0 0;
	padding: 5px 5px 5px 10px;
	background: #fff9f3;
	border-top: 1px solid #dcb;
	border-bottom: 1px solid #dcb;
	font-style: italic;
	text-align: justify;
	text-justify: auto
}

#body-rgt dl dd {
	margin: 10px 0 0 40px;
	text-align: justify;
	text-justify: auto
}


/* --- Paragraph --- */

#body-rgt p {
	padding: 1em 0 0 1em;
	line-height: 2em;
	text-align: justify;
	text-justify: auto
}

#body-rgt strong {
	font-weight: bold;
}

#body-rgt strong.red {
	color: #e21;
}

#body-rgt span.normal {
	font-weight: normal;
}


/* --- Link --- */

#body-rgt .fnavi {
	margin-top: 30px;
}

#body-rgt .fnavi p {
	float: left;
	margin-right: 10px;
	padding: 0;
	text-indent: 0;
}

#body-rgt .fnavi p a {
	display: block;
	padding: 5px 15px;
	background: #c98;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	behavior: url(./border-radius.htc);
	color: #fff;
	font: 87%/1.2em "MS P Gothic", sans-serif;
	text-decoration: none;
}

#body-rgt .fnavi p a:hover {
	background: #a76;
}

#body-rgt .fnavi p.top {
	float: right;
	margin-right: 10px;
}

#body-rgt .fnavi p.top a {
	display: block;
	padding: 5px 15px;
	font: 87%/1.2em "MS P Gothic", sans-serif;
	text-decoration: none;
}


/* --- Local Navi --------------------------------------------------------------------- */

#local {
	float: left;
	padding-bottom: 20px;
	width: 240px;
	background: url(../img/local-bg.png) no-repeat bottom right;
}

#local li {
	padding: 2px 0;
	width: 240px;
	background: url(../img/local-bg.png) repeat-y -240px 0;
	list-style-type: none;
}

#local li a {
	display: block;
	margin: 0 15px;
	padding: 0 5px;
	width: 190px;
	height: 40px;
	background: #f6f1eb;
	border-width: 1px 1px 1px 8px;
	border-style: solid;
	border-color: #edd;
	color: #654;
	font-family: 'MS P Gothic', sans-serif;
	line-height: 40px;
	text-decoration: none;
}

body.l-01 #local li#l-01 a,
body.l-02 #local li#l-02 a,
body.l-03 #local li#l-03 a {
	background: #dcb;
	border-color: #cba;
	color: #fff;
	font-weight: bold;
	cursor: default;
}

#local li a:hover {
	background: #fff;
	border-color: #fdb;
	font-weight: bold;
}

body.l-01 #local li#l-01 a:hover,
body.l-02 #local li#l-02 a:hover,
body.l-03 #local li#l-03 a:hover {
	background: #dcb;
	border-color: #cba;
	font-weight: bold;
}


/* --- Footer ------------------------------------------------------------------------- */

#footer-wrapper {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100px;
	background: #dcb;
	border-top: 5px solid #cba;
	text-align: center;
}

#footer {
	margin: 0 auto;
	padding-top: 10px;
	width: 960px;
	text-align: center;
}

#footer-contact {
	margin: 0 auto;
	width: 100px;
	height: 25px;
}

#footer-contact a {
	display: block;
	width: 100px;
	height: 25px;
	background: url(../img/header.png) no-repeat 0 -175px;
	text-indent: -9999px;
}

#footer-contact a:hover { background-position: -100px -175px; }

#footer-copyright {
	margin-top: 10px;
	padding-top: 15px;
	border-top: 1px solid #ba9;
	color: #432;
}
/* --- END --- */