@charset"utf-8";


body{
    font-size: 62.5% ;   /* 1.0em = 10px  */
	background:url(../img/bgRainbowLight.jpg) top repeat-x #f0f0f0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#222;
}

a.overwhite{
    display:block;
}

a.overwhite:hover img,
a.overwhite:hover li{
    cursor:pointer;
	filter: alpha(opacity=60);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	-moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6;              /* Safari 1.x */
	opacity:0.6;
	zoom:1;
}

a.btnToTop{
	clear: both;
	display: block;
	float: right;
	margin-bottom: 15px;
	margin-right: 20px;
}

.aligncenter{	text-align:center;}
.alignleft{		text-align:left;}
.alignright{	text-align:right;}


.float_left{	float:left;}
.float_right{	float:right;}

.xxlarge{	font-size:1.8em;}
.xlarge{	font-size:1.5em;}
.large{		font-size:1.3em;}
.small{		font-size:0.75em;}
.xsmall{	font-size:0.6em;}
.xxsmall{	font-size:0.5em;}

h3{	clear:both;}

#header,#nav_bar,#contents,#information,#footer{
	width:100%;
	clear:both;
	float:none;
}

#nav_menu,#contents_box,#information{
	width:900px;
	margin:0 auto;
}


#header{
	background:url(../img/bgCrackBottom.jpg) bottom #fff repeat-x;
	height:55px;
	padding:35px 0 45px 0;
	margin-top:5px;
}
#logo{
	width:182px;
	height:61px;
	margin:0 auto;
	display:block;
}


#nav_bar{
	background:url(../img/bgRainbowDark.jpg) bottom repeat-x #000;
	padding-bottom:5px;
	border-bottom:5px solid #000;

	box-shadow: 0px 5px 15px #666;
	-moz-box-shadow: 0px 5px 15px #666;
	-webkit-box-shadow:  0px 5px 15px #666;	

	behavior: url(../js/PIE.htc);
}

#nav_menu{
	width:580px;
	margin:0 auto;
	height:40px;
}

#nav_menu li{
	float:left;
}
#nav_menu li a{
	display:block;
	width:145px;
	height:40px;
	background:url(../img/navibutton.png) 0 0;
	white-space:nowrap;
	text-indent:100%;
	overflow:hidden;
	transition-property:background-position;
	transition-duration:0.25s;
	transition-timing-function:ease-in;
}

#nav_menu li.about a{	background-position: 0 0;}
#nav_menu li.works a{	background-position: -145px 0;}
#nav_menu li.price a{	background-position: -290px 0;}
#nav_menu li.contact a{	background-position: -435px 0;}

#nav_menu li.about a.now,#nav_menu li.about a:hover{	background-position: 0 40px;}
#nav_menu li.works a.now,#nav_menu li.works a:hover{	background-position: -145px 40px;}
#nav_menu li.price a.now,#nav_menu li.price a:hover{	background-position: -290px 40px;}
#nav_menu li.contact a.now,#nav_menu li.contact a:hover{	background-position: -435px 40px;}

#information{
	font-size:1.4em;
}

#information h1{
	text-align:center;
	font-size:1.2em;
	line-height:1.5em;
	padding:3em 0;
}

#message{
	width:900px;
	margin:0 auto;
	border:5px solid #dcddd9;
	overflow:hidden;
	height:35px;
}

#message *{
	padding:5px 8px;
}
#message h2{
	width:164px;
	text-align:center;
	background-color:#fff;
	display:block;
	float:left;
	height:100px;
}
#message dl{
	border:1px solid #fff;
	overflow:hidden;
}
#message dt{
	float:left;
	width:6em;
	font-weight:bold;
	text-align:center;
	height:70px;
}
#message dd{
	line-height:1.8em;
	padding:0;
}
#message dd a{
	padding:0;
	color:#000;
}
#contents{
	background:url(../img/bgCrackTop.jpg) repeat-x top #fff;
	padding:40px 0;
	min-height:350px;
	margin:40px 0;
	font-size:1.4em;
	line-height:1.5em;

	box-shadow: 0px 0px 30px #aaa;
	-moz-box-shadow: 0px 0px 30px #aaa;
	-webkit-box-shadow:  0px 0px 30px #aaa;	

	behavior: url(../js/PIE.htc);
}


#contents_box{
	overflow:hidden;
	position:relative;
}

#contents_box h2{
	display:block;
	float:left;
	text-align:center;
	width:210px;
	height:23px;
	background:url(../img/lblPage.png) no-repeat 23px 0;
	white-space:nowrap;
	text-indent:100%;
	overflow:hidden;
}
#contents_box h2.works{		background-position: 23px -46px;}
#contents_box h2.price{		background-position: 23px -23px;}
#contents_box h2.contact{	background-position: 23px -69px;}
#contents_box h2.news{		background-position: 23px -92px;}

#contents_box h3{
	font-weight:bold;
	font-size:1.1em;
	margin:2em 0 0.5em 0;
}
#contents_box #primary{
	width:690px;
	display:block;
	float:right;
}
#contents_box p{
	margin-bottom:1em;
}

#imgmap{
	position:absolute;
	bottom:0px;
	right:0px;
}

a.btnPastwork{
	width:250px;
	height:30px;
	display:block;
	background:url(../img/btnWorks.png) no-repeat 0 0;
	white-space:nowrap;
	text-indent:100%;
	overflow:hidden;
	margin-bottom:3em;
}
a:hover.btnPastwork{ background-position:0 -30px;}

ul.works li{
	list-style-type:circle;
	margin-left:40px;
	margin-bottom:0.5em;
}

#footer{
	text-align:center;
	font-size:1.2em;
	padding-bottom:40px;
	background:url(../img/bgRainbowLight.jpg) repeat-x bottom;
}



#pricelist{
	width:90%;
	margin:2em 0;
	border-collapse:separate;
}

#pricelist th,
#pricelist td{
	padding:5px 1em;
	border:1px solid #fff;
}

#pricelist th{
	width:120px;
	text-align:left;
	vertical-align:middle;
	font-weight:bold;
	background-color:#ddd;
}
#pricelist th.listtitle{
	text-align:center;
	background-color:#999;
}

#pricelist td{
	background-color:#f0f0f0;
}

#pricelist td.workprice{
	width:150px;
	text-align:right;
	vertical-align:middle;
}

/* works */
#workedlist{
	clear: both;
	overflow: hidden;
}

#workedlist>ul>li{
	float:left;
	list-style:none;
	width:280px;
	margin-right:30px;
}
#workedlist>ul>li.liright{
	margin-right:0;
}
#workedlist ul li a{
	text-decoration:none;
	color:#333;
	border:15px solid #eee;
	display:block;
	padding:5px;
	
	transition-property:border-color,color;
	transition-duration:0.25s;
	transition-timing-function:ease-in;
}
#workedlist ul li a:hover{
	border-color:#aaa;
	color:#39c;
}
#workedlist ul li a img{
	transition-property:all;
	transition-duration:0.25s;
	transition-timing-function:ease-in;
}
#workedlist ul li a:hover img{
	cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;
}
#workedlist ul li ul{
	margin-left:1.5em;
}
#workedlist ul li ul li{
	margin-bottom:0.25em;
	font-size:12px;
	line-height:1.3em;
	list-style:disc;
}
#workedlist .client{
	font-weight:bold;
	margin-bottom:0.5em;
}

/* contact form */
#contactform{
	border-collapse:separate;
	border-spacing:3px;
	width:700px;
}

#contactform th,
#contactform td{
	padding:8px;
}
#contactform th{
	vertical-align:top;
	width:150px;
	text-align:left;
	padding-left:1em;
	padding-top:1.5em;
	border-right:3px solid #777;
	font-weight:bold;
}
table.checkform#contactform th{
	padding-top:8px;
}
#contactform tr.odd th,
#contactform tr.odd td{
	background-color:#f8f8f8;
}
#contactform tr.even th,
#contactform tr.even td{
	background-color:#eee;
}
#contactform tr.btn td{
	text-align:center;
}
#contactform tr.btn td input{
	margin-bottom:2em;
}
#contactform tr.btn td p{
	text-align:left;
	margin-top:1em;
}
#contactform th span{
	float:right;
	color:red;
}
#contactform td span{
	float:right;
	padding-top:5px;
	margin-right:1em;
}
#contactform input[type="text"]{
	width:300px;
	padding:8px;
}
#contactform input[type="submit"],
#contactform input[type="reset"]{
	min-width:100px;
	padding:15px 25px;
	margin:30px 20px 0 20px;
}
#contactform textarea{
	width:450px;
	height:200px;
}

#contactform input.error,
#contactform textarea.error{
	border:2px solid #F96;
	background-color:#FFffcc;
}
#contactform label.error{
	float:right;
	padding-top:6px;
	color:red;
}

p.announce {
	display: block;
	border: 2px solid #d98d8d;
	padding: 0.5em 0.5em 0.5em 40px;
	background:url(../img/icoNews.png) no-repeat 10px;
}
p.announce a{
	color:#cf5454;
}


#contents_box h3.news{
	margin-top:0;
	margin-bottom:2em;
	padding-bottom:0.5em;
	border-bottom:1px solid #ddd;
}
#contents_box h3.news span{
	float:right;
}