@charset "UTF-8";

/* ------------------------------
    layout
------------------------------ */
#wrapper {
	width: 962px;
	margin: 0 auto;
}

/* ------------------------------
    header
------------------------------ */
#header .nav li {
	float: left;
	width: 190px;	
}
#header p {
	float: left;
	padding-top: 23px;
	width: 187px;	
}
#header h1 {
	width: 360px;
	padding-top: 23px;
	float: left;
	color: #666;
	font-size: 85%;	
}
#header .inner {
	padding: 14px 0 10px;	
}

#header ul.info {
	position: relative;
	float: right;
	width: 390px;
	height: 73px;
	background: url(../img/common/header_tel.png) no-repeat;
}
#header ul.info .tel {
	display: block;
	position: absolute;
	top: 0;
	width: 100px;
	height: 0;
	background: url(../img/common/header_tel.png) no-repeat;
	overflow: hidden;
}
#header ul.info .mail {
	position: absolute;
	top: 25px;
	right: 10px;
}
#header ul.info .mail a {
	display: block;
	background: url(../img/common/common_btn.png) no-repeat;
	width: 182px;
	height: 0;
	padding: 46px 0 0;
	overflow: hidden;	
}
#header ul.info .mail a:hover {
	background-position: -184px 0;	
}

#header .nav {
	margin-bottom: 10px;	
}
#header .nav li {
	float: left;
	width: 192px;
}
#header .nav li.nav01,
#header .nav li.nav05 {
	width: 193px;	
}
#header .nav li a {
	display: block;
	width: 192px;
	height: 0;
	padding: 58px 0 0;
	background: url(../img/common/nav.png) no-repeat;
	overflow: hidden;
}
#header .nav li.nav01 a {
	width: 193px;
}
#header .nav li.nav02 a {
	background-position: -193px 0;
}
#header .nav li.nav03 a {
	background-position: -385px 0;
}
#header .nav li.nav04 a {
	background-position: -577px 0;
}
#header .nav li.nav05 a {
	width: 193px;
	background-position: -769px 0;
}
#header .nav li.nav01 a:hover,
#header .nav li.nav01 a.on {
	background-position: 0 -60px;	
}
#header .nav li.nav02 a:hover,
#header .nav li.nav02 a.on {
	background-position: -194px -60px;
}
#header .nav li.nav03 a:hover,
#header .nav li.nav03 a.on {
	background-position: -386px -60px;
}
#header .nav li.nav04 a:hover,
#header .nav li.nav04 a.on {
	background-position: -578px -60px;
}
#header .nav li.nav05 a:hover,
#header .nav li.nav05 a.on {
	background-position: -770px -60px;
}

/* bread */
ol#bread {
	display: block;
	height: 30px;
	margin: 0 auto 20px;
	padding: 0 0 0 25px;
	background: url(../img/common/bread.png) no-repeat 10px 0;
}
ol#bread li {
	display: inline;
	margin-left: 5px;
	font-size:93%;
}
ol#bread li a {
	padding-right: 12px;
	background: url(../img/common/arrow.gif) no-repeat 100% 2px;	
}

#container {
	width: 940px;
	margin: 0 auto;
}

/* ------------------------------
    aside
------------------------------ */
#aside {
	float: left;
	margin-right: 40px;
	width: 220px;
}
#aside .asideNav {
	background: #FFF;
	margin-bottom: 10px;
	padding: 1px;	
}
#aside .asideNav li {
	padding-bottom: 1px;	
}
#aside .asideNav li a {
	display: block;	
	padding: 8px 0 8px 15px;
	background: #F2F2F2;
	color: #666;
	text-shadow: 2px 0 0 #FFF;
}
#aside .asideNav ul li a:hover,
#aside .asideNav ul li a.on {
	background: #F90;
	color: #FFF;
	text-decoration: none;
	text-shadow: none;
}
#aside .asideNav li.stay a.switch {
	background: #FC6 url(../img/common/arrow.gif) no-repeat 5px -191px;
	color: #630;
	font-weight: bold;
	text-decoration: none;
	text-shadow: none;
	-webkit-box-shadow: inset 0 0 3px #F90;
	-moz-box-shadow: inset 0 0 3px #F90;
	box-shadow: inset 0 0 3px #F90;
}

#aside .asideNav .subNav {
	padding: 3px;	
}

#aside .asideNav .subNav li a {
	padding: 5px 0 5px 15px;
	background: #FFF url(../img/common/arrow.gif) no-repeat 5px -391px;
	color: #666;	
}
#aside .asideNav .subNav li a:hover,
#aside .asideNav .subNav li a.on {
	background: #F90 url(../img/common/arrow.gif) no-repeat 5px -191px;
}


/* banner */
#sideBanner li a {
	display: block;
	width: 220px;
	height: 0;
	margin-bottom: 5px;
	padding: 67px 0 0;
	background: url(../img/common/aside_banner.png) no-repeat;
	overflow: hidden;
}
#sideBanner li.twitter a {
	background-position: 0 -77px;	
}
#sideBanner li.facebook a {
	background-position: 0 -154px;	
}
#sideBanner li.blog a:hover {
	background-position: -220px 0;	
}
#sideBanner li.twitter a:hover {
	background-position: -220px -77px;	
}
#sideBanner li.facebook a:hover {
	background-position: -220px -154px;	
}

/* ------------------------------
    article
------------------------------ */
#article {
	float: left;
	width: 680px;	
}
#article .baseTTL,
.h2TTL {
	margin-bottom: 20px;	
}
.h3TTL {
	margin-bottom: 10px;	
}
.section {
	margin-bottom: 30px;	
}

.radiusBox {
	background: #FFF;
	padding: 20px 19px;
	border: 1px solid #CCC;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: inset 0 1px 1px 0 #DFDFDF, 0 1px 0 0 #FFF;
	-moz-box-shadow: inset 0 1px 1px 0 #DFDFDF, 0 1px 0 0 #FFF;
	box-shadow: inset 0 1px 1px 0 #DFDFDF, 0 1px 0 0 #FFF;
}

.radiusBox .txtBox {
	padding: 0 10px 10px;
	margin-bottom: 20px;
}
.radiusBox .txtBox p {
	margin-bottom: 15px;	
}

/* basic ttl */
.h3orange,
.h3green {
	width: 640px;
	height: 48px;
	margin-bottom: 15px;
	background: url(../img/common/h3_ttl.png) no-repeat;
	font-size: 124%;
	line-height: 52px;
	overflow: hidden;
}

.h3green span {
	padding-left: 35px;
	color: #360;
}
.h3orange span {
	padding-left: 35px;
	color: #333;
}
.h3green em {
	margin-left: 8px;
	padding: 2px 4px;
	background: #F60;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #FFF;
	font-size: 85%;
	font-weight: normal;
}
.h3orange {
	background-position: 0 -90px;	
}
.h4orange {
	margin-bottom: 15px;
	padding: 6px;
	border: 1px solid #EEE;
	border-left: 3px solid #F90;
	color: #444;
	font-weight: bold;
	font-size: 100%;
	-webkit-box-shadow: 0 1px 1px #DEDEDE;
	-moz-box-shadow: 0 1px 1px #DEDEDE;
	box-shadow: 0 1px 1px #DEDEDE;
	text-shadow: 0 1px 1px #DEDEDE;
}
/* ------------------------------
    underAsk
------------------------------ */
#underAsk {
	height: 146px;
	margin-bottom: 30px;
	background: url(../img/common/parts_under_ask.png) no-repeat;	
}
#underAsk p,
#underAsk li.tel,
#underAsk li.mail a {
	display: block;
	height: 0;
	background: url(../img/common/parts_under_ask.png) no-repeat;
	overflow: hidden;	
}
#underAsk p {
	padding-top: 56px;	
}
#underAsk li.tel {
	float: left;
	width: 363px;
	padding-top: 90px;
	background-position: 0 -56px;	
}
#underAsk li.mail {
	float: left;
}
#underAsk li.mail a {
	width: 295px;
	padding-top: 72px;
	background-position: -363px -56px;	
}
#underAsk li.mail a:hover {
	background-position: -363px -165px;		
}

/* morePages */
#morePages {
	margin-bottom: 40px;
	padding: 15px;
	border: 1px solid #CCC;
	background: #FFF;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

#morePages h3 {
	font-weight: bold;
	font-size: 108%;
	margin-bottom: 1em;
	text-align: center;	
	color: #966;
	text-shadow: 0 1px 1px #DDD;
}


/* ------------------------------
    footer
------------------------------ */
#footer {
	background: url(../img/common/footer_bg.png) repeat-x;	
}
#footer #pagetop {
	width: 960px;
	margin: 0 auto;	
}
#footer #pagetop a {
	float: right;
	display: block;
	width: 109px;
	height: 0;
	padding: 33px 0 0;
	background: url(../img/common/common_btn.png) no-repeat 0 -53px;
	overflow: hidden;	
}
#footer #pagetop a:hover {
	background-position: -111px -53px;	
}
#footer .inner {
	margin: 0 auto;
	height: 40px;
	line-height: 40px;
	background: url(../img/common/footer.png) no-repeat 50% 0;
	text-align:center;
}
#footer .inner li {
	display: inline;
	padding: 0.5em;	
}
#footer .inner li a {
	color: #666;
	text-shadow: 0 1px 0 #FFF;	
}
#footer .copyright {
	padding: 5px 0 10px;
	background: #666;
	color: #FFF;
	font-size: 77%;
	font-weight: normal;
	text-align: center;	
	text-shadow: 0 -1px 0 #333;
}
/* clearfix
------------------------------------------------------------------------ */
.clearfix,
#header .inner,
#header .nav,
#container,
#footer #pagetop { /zoom: 1;}

.clearfix:after,
#header .inner:after,
#header .nav:after,
#container:after,
#footer #pagetop:after {
	content: '';
	display: block;
	clear: both;
}