@charset "utf-8";

/* common
---------------------------------------------------- */
* {
	margin: 0px;
	padding: 0px;
}
body {
	font-size:small;
	line-height:1.6;
	color:#666666;
	font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	overflow-x:hidden;
	background:#fff;
	text-align:center;
}
#wrapper{
	background:url(../images/common/bg-content.jpg) repeat-y;
	width:800px;
	padding:0 2px;
	margin:0 auto;
}
img{border:none; vertical-align:bottom;}
a{outline:none;}
p{margin-bottom:0.6em;}
hr{clear:both; visibility:hidden; border:none; height:1px;}
.clear{clear:both;}
.green{color:#7a9713;}
.center{text-align:center; clear:both;}


/* padding margin & text & IMG
---------------------------------------------------- */
.mt20{margin-top:20px;}
.mt40{margin-top:40px;}
.mb20{margin-bottom:20px;}

.txt-right{text-align:right;}
.txt-right2{
	text-align:right;
	margin-bottom:20px;
}
.txt-small{font-size:x-small;}
.txt-box{
	padding:0 10px 20px 10px;
	height:1%;
}
.txt-box2{
	padding:0 10px 0 10px;
	height:1%;
}

.img-right{
	float:right;
	border:1px solid #ccc;
	padding:4px;
	background:#fff;
	margin:0 0 10px 10px;
}
.img-left{
	float:left;
	border:1px solid #ccc;
	padding:4px;
	margin:0 10px 10px 0;
}
.img-line{
	border:1px solid #ccc;
	padding:4px;
	margin:0 0 10px 10px;
}


/* link
---------------------------------------------------- */
a {outline:none;}

a:link {
  color:#08a3ca;
}
a:visited {
  color:#865d86;
}
a:hover, a:active {
  color:#107f9b;
}

/* layout
---------------------------------------------------- */
#navi{
	width:200px;
	float:left;
}
#content{
	width:580px;
	float:right;
	text-align:left;
}
#content-body,
#content-body2{
	padding:20px 20px 0 0;
}
#content-body h3{
	background:url(../images/common/bg-title.jpg) no-repeat;
	width:535px;
	height:29px;
	padding:8px 0 0 25px;
	font-size:14px;
	color:#eee;
	margin-bottom:5px;
}
#content-body2 h3{
	margin-bottom:0px;
}
#content-body h4{
	background:url(../images/common/bg-title2.jpg) no-repeat;
	width:535px;
	height:29px;
	padding:8px 0 0 25px;
	font-size:14px;
	color:#eee;
	margin-bottom:5px;
}


/* navi
---------------------------------------------------- */
#navi ul li{
	list-style:none;
	text-indent:-9999px;
}
#navi ul li a{
	display:block;
	width:200px;
	height:45px;
}

#navi1 a{background:url(../images/common/navi1a.jpg) no-repeat;}
#navi2 a{background:url(../images/common/navi2a.jpg) no-repeat;}
#navi3 a{background:url(../images/common/navi3a.jpg) no-repeat;}
#navi4 a{background:url(../images/common/navi4a.jpg) no-repeat;}
#navi5 a{background:url(../images/common/navi5a.jpg) no-repeat;}
#navi6 a{background:url(../images/common/navi6a.jpg) no-repeat;}
#navi7 a{background:url(../images/common/navi7a.jpg) no-repeat;}

#navi1 a:hover{background:url(../images/common/navi1b.jpg) no-repeat;}
#navi2 a:hover{background:url(../images/common/navi2b.jpg) no-repeat;}
#navi3 a:hover{background:url(../images/common/navi3b.jpg) no-repeat;}
#navi4 a:hover{background:url(../images/common/navi4b.jpg) no-repeat;}
#navi5 a:hover{background:url(../images/common/navi5b.jpg) no-repeat;}
#navi6 a:hover{background:url(../images/common/navi6b.jpg) no-repeat;}
#navi7 a:hover{background:url(../images/common/navi7b.jpg) no-repeat;}

#navi1-on a{background:url(../images/common/navi1b.jpg) no-repeat;}
#navi2-on a{background:url(../images/common/navi2b.jpg) no-repeat;}
#navi3-on a{background:url(../images/common/navi3b.jpg) no-repeat;}
#navi4-on a{background:url(../images/common/navi4b.jpg) no-repeat;}
#navi5-on a{background:url(../images/common/navi5b.jpg) no-repeat;}
#navi6-on a{background:url(../images/common/navi6b.jpg) no-repeat;}
#navi7-on a{background:url(../images/common/navi7b.jpg) no-repeat;}


/* footer
---------------------------------------------------- */
#footer{
	clear:both;
	width:800px;
	background:url(../images/common/bg-footer.jpg) no-repeat;
	height:215px;
	color:#fefefe;
	position:relative;
}
#f-navi{
	border-bottom:1px solid #d5d4d5;
	border-top:1px solid #d5d4d5;
	background:#f5f4f5;
	margin:10px 20px 70px 220px;
	padding:10px;
}
#f-navi ul li{
	list-style:none;
	display:inline;
	border-right:1px solid #d5d4d5;
	padding:0 5px;
}
#f-navi ul .nobd{
	border-right:none;
}
#f-navi ul li a{
	text-decoration:none;
	color:#666;
}
#f-navi ul li a:hover{
	text-decoration:underline;
	color:#666;
}

#pagetop{
	position:absolute;
	width:98px;
	height:31px;
	left: 682px;
	top: 72px;
	text-indent:-9999px;
}
#pagetop a{
	display:block;
	width:98px;
	height:31px;
}


/* top
---------------------------------------------------- */
#flash{
	background:url(../images/top/head.jpg) no-repeat top;
	width:580px;
	padding-top:115px;
}
#flash h2{display:none;}
#top-left{
	width:300px;
	float:left;
}
#top-right{
	width:250px;
	float:right;
}
#wn-line{
	background:#f5f4f5;
	border-right:1px solid #bcbbbc;
	border-bottom:1px solid #bcbbbc;
	border-left:1px solid #bcbbbc;
	width:248px;
}
#wn-body{
	width:226px;
	height:300px;
	padding:5px 10px;
	margin:0 2px 5px 0;
	overflow:scroll;
	overflow-x:hidden;
}
#wn-body dl dt{
	font-weight:bold;
}
#wn-body dl dd{
	margin-bottom:10px;
}

#top-left ul li{
	list-style:none;
	text-indent:-9999px;
	margin-bottom:8px;
}
#top-left ul li a{
	display:block;
	width:300px;
	height:82px;
}
#banner1 a{background:url(../images/top/banner1a.jpg) no-repeat;}
#banner2 a{background:url(../images/top/banner2a.jpg) no-repeat;}
#banner3 a{background:url(../images/top/banner3a.jpg) no-repeat;}
#banner4 a{background:url(../images/top/banner4a.jpg) no-repeat;}

#banner1 a:hover{background:url(../images/top/banner1b.jpg) no-repeat;}
#banner2 a:hover{background:url(../images/top/banner2b.jpg) no-repeat;}
#banner3 a:hover{background:url(../images/top/banner3b.jpg) no-repeat;}
#banner4 a:hover{background:url(../images/top/banner4b.jpg) no-repeat;}


/* about
---------------------------------------------------- */
.about{
	background:url(../images/about/body.jpg);
	width:520px;
	padding:10px 20px 10px 20px;
}
.about img{
	float:right;
	border:1px solid #d6d2c8;
	padding:5px;
	background:#fff;
	margin:0 0 10px 10px;
}

/* flow
---------------------------------------------------- */
.flow{
	background:url(../images/about/body.jpg);
	width:520px;
	padding:10px 20px 10px 20px;
}
.flow .photo{
	float:right;
	border:1px solid #d6d2c8;
	padding:5px;
	background:#fff;
	margin:0 0 10px 10px;
}


/* price
---------------------------------------------------- */
.price-right{
	width:270px;
	float:right;
}
.price-left{
	width:270px;
	float:left;
}

.price-table{
	width:100%;
	border-collapse:collapse;
	margin-bottom:20px;
}
.price-table td,
.price-table th{
	padding:5px;
	border:1px solid #ccc;
}
.price-table th{
	text-align:left;
	font-weight:normal;
	background:#eee;
	width:130px;
}


/* works
---------------------------------------------------- */
#works {
	width:100%;
	text-align:center;
	list-style:none;
}
#works:after {
	content:".";
	height:0px;
	clear:both;
	display: block;
	visibility:hidden;
}
#works li {
	margin:10px 6px 10px 6px;
	float:left;
	display:block;
}

#works li a {
	width:172px;
	margin:0;
	padding:0;
	display:block;
}

#works li a:link,
#works li a:visited,
#works li a:hover{
	text-decoration:none;
}

#works li a img {
	margin-bottom:3px;
	border:1px solid #ccc;
	display:block;
}

#works li a strong img {
	margin-bottom:0;
	border:1px solid #eee;
}

#works li a:hover img {
	filter:alpha(opacity=70);
	opacity:0.7;
	border:1px solid #999;
}
#thumb{
	padding:0 0 10px 0;
}

#thumb ul{
	margin-right:-5px;
}
#thumb ul li{
	list-style:none;
	display:inline;
	margin-right:3px;
}
#thumb ul li img{
	background:#fff;
	padding:3px;
	border:1px solid #ccc;
}
#thumb ul li img:hover{
	background:#a5cd2d;
	padding:3px;
	border:1px solid #a5cd2d;
}
#thumb ul .on img{
	background:#a5cd2d;
	padding:3px;
	border:1px solid #a5cd2d;
}


/* company
---------------------------------------------------- */
.company-table{
	width:100%;
	border-collapse:collapse;
	margin-bottom:20px;
}
.company-table td,
.company-table th{
	padding:5px 8px;
	border:1px solid #ccc;
}
.company-table th{
	text-align:left;
	font-weight:normal;
	background:#eee;
	width:130px;
}
.txt-box iframe{
	width:530px;
	height:350px;
	padding:4px;
	border:1px solid #ccc;
}


/* contact
---------------------------------------------------- */
.contact-table{
	width:100%;
	border-collapse:collapse;
	margin-bottom:20px;
}
.contact-table td,
.contact-table th{
	padding:5px 8px;
	border:1px solid #ccc;
}
.contact-table th{
	text-align:left;
	font-weight:normal;
	background:#eee;
	width:130px;
}
.red{
	font-size:10px;
	color:red;
}


/* blog
---------------------------------------------------- */
#blog-content{
	width:580px;
	float:right;
	text-align:left;
	display: inline-block;
}
#blog-content:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}
#blog-body{
	float:left;
	width:410px;
	margin-right:10px;
	margin-top:20px;
}
#blog-navi{
	float:right;
	width:150px;
	margin-right:10px;
	margin-top:20px;
}
.side-box{
	width:120px;
	padding:0 15px;
	background:url(../images/blog/sub-middle.jpg) repeat-y;
}
.side-box ul li{
	list-style:none;
}
.bottom{
	margin-bottom:20px;
}
.side-box ul li a:link,
.side-box ul li a:visited{
	color:#763F12;
	padding:4px 0;
	display:block;
	height:1%;
}
.side-box ul li a:hover{
	color:#A28933;
	padding:4px 0;
	display:block;
	height:1%;
}

#blog-body h3{
	background:url(../images/common/bg-title.jpg) no-repeat;
	width:385px;
	height:29px;
	padding:8px 0 0 25px;
	font-size:14px;
	color:#eee;
	margin-bottom:5px;
}
#blog-body h3 a{
	color:#fff;
}
#blog-body h3 a:hover{
	color:#eee;
}
.entry{
	padding:0 10px 20px 10px;
}
.entry img{
	padding:4px;
	border:1px solid #ccc;
	margin:5px 0;
}
.entry-footer{
	text-align:right;
	border-top:1px solid #ccc;
	height:1%;
	margin:30px 0 20px 0;
	padding:3px;
}

#no-comment{
	border:1px solid #ccc;
	background:#f5f5f5;
	padding:5px 10px;
	margin-bottom:20px;
}

.comment-body{
	border:1px solid #ccc;
	background:#f5f5f5;
	padding:5px 10px;
}
.comment-date{
	text-align:right;
	margin-bottom:20px;
}

#comment-form{
	border:1px solid #ccc;
	background:#f5f5f5;
	padding:5px 10px;
}


/* pagination
---------------------------------------------------- */
.pagination{
	text-align:center;
	padding:20px 0;
	list-style:none;
	clear:both;
}
.pagination li{
	display:inline;
}
.pagination a{
	border:1px solid #999999;
	background:#fff;
	padding:5px 10px;
	margin:0 5px;
	text-decoration:none;
	color:#666666;
}
.pagination a:visited{
	border:1px solid #999999;
	background:#eee;
	padding:5px 10px;
	margin:0 5px;
	text-decoration:none;
	color:#666666;
}
.pagination a:hover{
	border:1px solid #999999;
	background:#aaa;
	padding:5px 10px;
	margin:0 5px;
	text-decoration:none;
	color:#fff;
}

.pagination .current{
	border:1px solid #999999;
	background:#aaa;
	padding:5px 10px;
	margin:0 5px;
	text-decoration:none;
	color:#fff;
}

/* errer information
---------------------------------------------------- */
.info, .success, .error, .del, .none{
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
	font-weight:bold;
}
.info{
    color: #00529B;
    background:url(../images/common/i-info.jpg) no-repeat #BDE5F8  10px center;
	border:1px solid #00529b;
}
.success{
    color: #4F8A10;
    background:url(../images/common/i-success.jpg) no-repeat #DFF2BF 10px center;
	border:1px solid #4f8a10;
}
.error{
    color: #9F6000;
    background:url(../images/common/i-error.jpg) no-repeat #FEEFB3 10px center;
	border:1px solid #9f6000;
}
.del{
    color: #D8000C;
    background:url(../images/common/i-del.jpg) no-repeat #FFBABA 10px center;
	border:1px solid #d8000c;
}
.none{
    color:#484848;
    background:url(../images/common/i-none.jpg) no-repeat #dcdcdc 10px center;
	border:1px solid #6c6c6c;
}


/* Form textfield textarea
---------------------------------------------------- */
.textfield-1,
.textfield-2,
.textfield-3,
.textfield-4,
.textfield-5{
	padding:4px 3px;
	border:1px solid #999;
}
.textfield-1{width:50px;}
.textfield-2{width:100px;}
.textfield-3{width:200px;}
.textfield-4{width:350px;}
.textfield-5{width:595px;}

.textarea-1,
.textarea-2,
.textarea-3{
	padding:4px 3px;
	border:1px solid #999;
}
.textarea-1{width:360px; height:150px;}
.textarea-2{width:370px; height:200px;}
.textarea-3{width:595px; height:350px;}
.textarea-4{width:395px; height:250px;}


.submit-button{
	text-align:center;
	padding:20px 0 0 0;
}
.submit-button input,
.submit-button2 input{
	border:1px solid #666;
	background:#fff;
	padding:5px 15px;
	cursor:pointer;
}
.submit-button input:hover,
.submit-button2 input:hover{
	border:1px solid #666;
	background:#ccc;
	padding:5px 15px;
	cursor:pointer;
}

.file{
	padding:4px 3px;
	width:300px;
}