@charset "utf-8";
@import "../css/textsettings.css";
@import "../css/common.css";

/*------ layout ------*/

body {
	background:#231815 url(../images/design/body-bg.png) 0 0 repeat-x
}

#wrap,
#footer {
	width:950px;
	margin:auto
}

#wrap {
	background:transparent url(../images/design/wrap-bg.png) 0 0 repeat-y
}

* html #wrap {
	background:transparent url(../images/design/wrap-bg-fix.png) 0 0 no-repeat
}

/*---- header ----*/

#header {
	height:197px;
	padding:14px 18px 0 13px;
	background:transparent url(../images/design/header-bg.png) 0 0 no-repeat
}

#headerObj {
	height:197px;
	background:transparent url(../images/design/headerObj-bg.png) 0 0 no-repeat;
	text-indent:-999em
}

/*---- main-nav ----*/

#main-nav .nav {
	margin-left:13px;
	background:transparent url(../images/design/mainNav.png) 0 0 no-repeat
}

#main-nav .nav li a {
	width:117px;
	height:46px;
	text-indent:-999em
}

#main-nav .nav li:hover a,
.about-page #main-nav .about a,
.concept-page #main-nav .concept a,
.service-page #main-nav .service a,
.price-page #main-nav .price a,
.flow-page #main-nav .flow a,
.works-page #main-nav .works a {
	background:transparent url(../images/design/mainNav.png) 0 0 no-repeat
}

#main-nav .nav .home a {
	width:158px
}

#main-nav .nav .home:hover a {
	background-position:0 -46px
}

#main-nav .nav .about:hover a,
.about-page #main-nav .about a {
	background-position:-158px -46px
}

#main-nav .nav .concept:hover a,
.concept-page #main-nav .concept a {
	background-position:-275px -46px
}

#main-nav .nav .works:hover a,
.works-page #main-nav .works a {
	background-position:-392px -46px
}

#main-nav .nav .service a {
	width:118px
}

#main-nav .nav .service:hover a,
.service-page #main-nav .service a {
	background-position:-509px -46px
}

#main-nav .nav .price:hover a,
.price-page #main-nav .price a {
	background-position:-627px -46px
}

#main-nav .nav .flow a {
	width:175px
}

#main-nav .nav .flow:hover a,
.flow-page #main-nav .flow a {
	background-position:-744px -46px
}

/*---- main ----*/

#main {
	min-height:640px;
	margin:0 18px 0 13px;
	padding:25px 265px 20px 0;
	background-color:#f2f2f2
}

* html #main {
	height:640px
}

#main > .article {
	width:540px;
	margin:17px auto 0;
	padding:20px;
	border:1px solid #4d4d4d;
	background-color:#fff;
	line-height:1.75
}

*+html #main .article {
	margin-top:40px
}

#main p.top {
	font-size:1.1em;
	text-align:right
}

#main p.top a {
	color:#c1272d
}

/*---- aside ----*/

#aside {
	top:285px;
	right:18px;
	width:266px;
	z-index:2
}

/*-- contacu-us --*/

#aside .contact-us {
	margin-bottom:11px;
	padding-left:2px;
	font-size:1.1em
}

#aside .contact-us dt {
	display:inline
}

#aside .contact-us dt:first-child {
	border-right:1px solid #000;
	margin-left:2px;
	margin-right:4px;
	padding-right:6px
}

#aside .contact-us .tel {
	margin:8px 0 10px
}

#aside .contact-us .tel address {
	height:39px;
	background:transparent url(../images/design/contact-tel.png) 0 0 no-repeat;
	text-indent:-999em
}

#aside .contact-us .url {
	display:block;
	position:relative;
	overflow:hidden;
	width:250px;
	height:134px
}

#aside .contact-us .url img {
	position:absolute
}

#aside .contact-us .url:hover img {
	top:-134px
}

/*-- mian-service --*/

#aside .service .list {
	width:236px;
	height:175px;
	margin-left:2px;
	background:transparent url(../images/design/main-service.png) 0 0 no-repeat
}

#aside .service .list li {
	font-size:0
}

#aside .service a {
	height:50px;
	text-indent:-999em
}

#aside .service .web-design a,
#aside .service .seo a,
#aside .service .web-project a,
#aside .service .sem a,
#aside .service .php a,
#aside .service .cms a {
	width:50px
}

#aside .service .web-renewal a {
	left:128px;
	width:90px
}

#aside .service .web-chinese a,
#aside .service .web-jp a {
	bottom:6px;
	width:102px
}

#aside .service .web-design a,
#aside .service .seo a,
#aside .service .web-renewal a {
	top:4px
}

#aside .service .web-project a,
#aside .service .sem a,
#aside .service .php a,
#aside .service .cms a {
	top:62px
}

#aside .service .web-design a,
#aside .service .web-project a,
#aside .service .web-chinese a {
	left:4px
}

#aside .service .seo a {
	left:66px
}

#aside .service .sem a {
	left:60px
}

#aside .service .php a {
	left:118px
}

#aside .service .cms a {
	right:4px
}

#aside .service .web-jp a {
	right:12px
}

/*-- sidein-search --*/

.sidein-search {
	height:79px;
	margin:13px 0 7px 2px;
	padding:11px 0 0 12px;
	background:transparent url(../images/design/search-bg-trans.png) 0 0 no-repeat
}

.sidein-search dt {
	margin-bottom:10px
}

.sidein-search dd {
	display:inline;
	margin-left:10px
}

.sidein-search input {
	vertical-align:middle
}

.sidein-search input[type="text"] {
	width:148px;
	height:17px;
	padding:2px 4px 0;
	border:1px solid #4d4d4d
}

/*-- portfolio --*/

#aside .portfolio {
	position:relative;
	width:230px;
	height:139px;
	margin-left:2px;
	padding:11px 0 0 20px;
	background:transparent url(../images/design/new-portfolio-bg-trans.png) 0 0 no-repeat
}

#aside .portfolio dt {
	margin-bottom:16px
}

/*-- pagination --*/

.pagination {
	overflow:hidden;
	width:100%;
	height:22px;
	margin-top:70px
}

.pagination .nav {
	position:relative;
	left:50%;
	float:left;
}

.pagination .nav li {
	position:relative;
	right:50%;
	float:left;
}

.pagination .nav .page-no {
	display:inline;
	margin-left:8px;
}

.pagination .nav .page-no a {
	display:block;
	width:22px;
	height:22px;
	color:#4d4d4d;
	line-height:22px;
	text-align:center
}

.pagination .nav .current span {
	display:block;
	width:89px;
	height:22px;
	background:transparent url(../images/icon/page-current.png) 0 0 no-repeat;
	line-height:22px;
	text-align:center
}

.pagination .nav .prev {
	margin-left:8px
}

.pagination .nav .next {
	margin-left:8px;
	margin-right:8px;
}

/*---- breadCrumb ----*/

#breadCrumb {
	width:919px;
	height:25px;
	top:256px;
	left:13px;
	background-color:#e6e6e6;
	font-size:1.1em;
	line-height:25px
}

#breadCrumb .nav {
	padding-left:22px
}

#breadCrumb .nav li {
	display:inline;
	margin-left:5px;
	padding-left:12px;
	background:transparent url(../images/icon/gray-arrow.png) 0 4px no-repeat
}

#breadCrumb .nav li:first-child {
	background-image:none
}

#breadCrumb .nav a {
	color:#9e005d;
	text-decoration:underline
}

/*---- footer ----*/

#footer {
	height:174px;
	padding-top:18px;
	background:transparent url(../images/design/footer-bg.png) 0 0 no-repeat;
	line-height:1.75
}

#footer .guide,
#footer .service {
	bottom:44px
}

#footer .guide {
	left:800px
}

#footer .guide li {
	padding-left:7px;
	background:transparent url(../images/icon/icon-cross.png) 0 6px no-repeat
}

#footer .service {
	left:698px
}

#footer .company-info {
	margin-left:100px
}

#footer .company-info dt.fn,
#footer .company-info .adr {
	margin-left:6px
}

#footer .company-info dt.fn {
	margin-right:4px;
	padding-right:6px;
	border-right:1px solid #4d4d4d
}

#footer .company-info .adr {
	margin-bottom:8px
}

/*------ etc ------*/

/* hidden-info */

.hidden-info {display:none}

/* access key */

.acckey {position:absolute;visibility:hidden}

/* clear float */

* html .clearfix {height:1%}
*+html .clearfix {display:inline-block}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}