@charset "utf-8";

@import url(common.css);

/* 基本レイアウト ここから↓ */
body {
	line-height: 1.4em;
}

header,#header-fixed,nav,#main,footer {
	width: 830px;
	margin: 0 auto;
}

#header-fixed {
	background-color: #ffffff;
	position: fixed;
	overflow: hidden;
	z-index: 1;
}

#fixed-bk {
	padding-top: 120px;
}

#navi {
	padding-top: 50px;
	padding-left: 380px;
}

nav ul {
	list-style-type: none;
	margin-right: -10px;
	padding-left: 0;
	overflow: hidden;
}

nav ul li {
	width: 90px;
	margin-right: 10px;
	float: left;
}

nav ul li a {
	display: block;
	height: 0;
	padding-top: 30px;
	overflow: hidden;
}

nav ul li#nav_work a {
	background-image: url(../images/nav1.png);
}

nav ul li#nav_process a {
	background-image: url(../images/nav2.png);
}

nav ul li#nav_about a {
	background-image: url(../images/nav3.png);
}

nav ul li#nav_contact a {
	background-image: url(../images/nav4.png);
}

nav ul li#nav_facebook a {
	width: 50px;
	background-image: url(../images/nav5.png);
}

nav ul li a:hover {
	background-position: 0 -30px;
}

#work #nav_work a,#process #nav_process a,#about #nav_about a,#contact #nav_contact a {
	background-position: 0 -30px;
}

#main h1 {
	margin: 0 0 30px 0;
	padding: 30px 0 30px 0;
	background-image: url(../images/back_h1_bottom.png),url(../images/back_h1_top.png);
	background-repeat: no-repeat,no-repeat;
	background-position: left bottom,left top;
	color: #ffffff;
	font-size: 180%;
	text-align: center;
}

footer #pagetop {
	float: right;
}

footer #info_group {
	clear: both;
}
/* 基本レイアウト ここまで↑ */


/* トップページ ここから↓ */
#stage {
	position: relative;
	max-width: 830px;
	margin: 0 auto;
	overflow: hidden;
}

#photos {
	position: absolute;
	top: 0;
	width: 100%;
	animation: imgPassToLeft0 30s infinite;
	-webkit-animation: imgPassToLeft0 30s infinite;
}

#photo0 { left:  0%; }
#photo1 { left:100%; } 
#photo2 { left:200%; }
#photo3 { left:300%; }
#photo4 { left:400%; }
#photo5 { left:500%; }
#photo6 { left:600%; }
.pic {
	position: absolute;
	top: 0;
	width: 100%;
}

.pic img { width:100%; }


#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5{
	display: none;
}

.b_left span, .b_right span {
	position: absolute;
	font-size: 40px;
	font-weight: bold;
	opacity: 0;
	top: 45%;
	color: #ffffff;
}
.b_left span {
	left: 5%;;	
}
.b_right span {
	left: 90%;
}

.pic:hover > label div span {
	opacity: 1;
	color: #ffffff;
}

.pic label div span:hover {
	color: #6666cc;
	cursor: pointer;
}

#next1:checked ~ #photos {
	animation: imgPassToLeft1 30s infinite;	
	animation-delay: -4.8s;
	-webkit-animation: imgPassToLeft1 30s infinite;	
	-webkit-animation-delay: -4.8s;
}
#next2:checked ~ #photos {
	animation: imgPassToLeft2 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToLeft2 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#next3:checked ~ #photos {
	animation: imgPassToLeft3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToLeft3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#next4:checked ~ #photos {
	animation: imgPassToLeft4 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToLeft4 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#next5:checked ~ #photos {
	animation: imgPassToLeft5 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToLeft5 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back1:checked ~ #photos {
	animation: imgPassToRight1 30s infinite;
	animation-delay: -28.8s;
	-webkit-animation: imgPassToRight1 30s infinite;
	-webkit-animation-delay: -28.8s;
}
#back2:checked ~ #photos {
	animation: imgPassToRight2 30s infinite;
	animation-delay: -22.8s;
	-webkit-animation: imgPassToRight2 30s infinite;
	-webkit-animation-delay: -22.8s;
}
#back3:checked ~ #photos {
	animation: imgPassToRight3 30s infinite;
	animation-delay: -16.8s;
	-webkit-animation: imgPassToRight3 30s infinite;
	-webkit-animation-delay: -16.8s;
}
#back4:checked ~ #photos {
	animation: imgPassToRight4 30s infinite;
	animation-delay: -10.8s;
	-webkit-animation: imgPassToRight4 30s infinite;
	-webkit-animation-delay: -10.8s;
}
#back5:checked ~ #photos {
	animation: imgPassToRight5 30s infinite;
	animation-delay: -4.8s;
	-webkit-animation: imgPassToRight5 30s infinite;
	-webkit-animation-delay: -4.8s;
}

@keyframes imgPassToLeft0 {
	0%  { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft1 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft2 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft3 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft4 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToLeft5 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@keyframes imgPassToRight1 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight2 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight3 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight4 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@keyframes imgPassToRight5 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToLeft0 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft1 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft2 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft3 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft4 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToLeft5 {
	0% { left:-100%; }
	16% { left:-100%; }
	20% { left:-200%; }
	36% { left:-200%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-400%; }
	76% { left:-400%; }
	80% { left:-500%; }
	96% { left:-500%; }
	100% { left:-600%; }
}
@-webkit-keyframes imgPassToRight1 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight2 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight3 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight4 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}
@-webkit-keyframes imgPassToRight5 {
	0% { left:-500%; }
	16% { left:-500%; }
	20% { left:-400%; }
	36% { left:-400%; }
	40% { left:-300%; }
	56% { left:-300%; }
	60% { left:-200%; }
	76% { left:-200%; }
	80% { left:-100%; }
	96% { left:-100%; }
	100% { left:0%; }
}


#news ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}

#news ul li {
	margin-top: 20px;
	padding: 0 10px 20px 170px;
	border-bottom: 1px dotted #333333;
	text-indent: -160px;
}

.top_work_group {
	margin: 0 50px 25px 50px;
	float: left;
}

.top_work_group figure {
	margin: 0 20px 25px 0;
	float: left;
}

/*.top_work_group figure:last-child {
	margin-right: 0;
}*/

.top_work_group figure:nth-child(3n) {
	margin-right: 0;
}

.top_work_group figcaption {
	padding-top: 5px;
	text-align: center;
}

.more {
	width: 60px;
	margin-top: -10px;
	padding: 0 10px 10px 0;
	float: right;
}

.more a {
	background-image: url(../images/more.png);
}

.more a {
	display: block;
	height: 0;
	padding-top: 16px;
	overflow: hidden;
}

.more a:hover {
	background-position: 0 -16px;
}

footer {
	clear: both;
}
/* トップページ ここまで↑ */


/* 「施工事例」ページ ここから↓ */
.ac-container {
	max-width: 730px;
	margin: 0 50px 100px 50px;
}

.ac-container label {
	height: 30px;
	line-height: 1.8;
	font-size: 17px;
	padding: 5px 20px;
	display: block;
	cursor: pointer;
	color: #ffffff;
	background: #6666cc;
	border-top: 1px solid #ffffff;
}

.ac-container input {
	display: none;
}

.ac-container article {
	overflow: hidden;
	height: 0;
	transition: 0.6s;
}

.ac-container input:checked ~ article {
	height: auto;
}

.work_group figure {
	margin: 20px 20px 20px 0;
	float: left;
}

.work_group >figure:nth-child(3n) {
	margin-right: 0;
}

.work_group figcaption {
	padding-top: 5px;
	text-align: center;
}
/* 「施工事例」ページ ここまで↑ */


/* 「会社概要」ページ ここから↓ */
.box_about {
	width: 730px;
	margin: 0 50px 30px 50px;
}

.box_about dl dt:first-child {
	border-top: 1px solid #000000;
}

.box_about dd.first {
	border-top: 1px solid #000000;
}

.box_about dl dt.last,.box_about dl dd.last {
	border-bottom: 1px solid #cccccc;
}

.box_about dl dt {
	width: 200px;
	padding: 15px 0 15px 0;
	margin: 0;
	font-weight: bold;
	float: left;
	clear: both;
	border-top: 1px solid #cccccc;
}

.box_about dl dd {
	width: 500px;
	margin: 0 0 0 230px;
	padding: 15px 0 15px 0;
	border-top: 1px solid #cccccc;
}
/* 「会社概要」ページ ここまで↑ */


/* 「お問い合わせ」ページ ここから↓ */
.comment1 {
	padding-left: 50px;
}

.comment2 {
	padding-left: 50px;
	font-weight: bold;
	padding-bottom: 50px;
}

.box_contact1 {
	margin: 0 0 0 50px;
}

.box_contact1 dl dt {
	width: 50px;
	float: left;
	clear: both;
	font-weight: bold;
	font-size: 120%;
}

.box_contact1 dl dd {
	font-size: 120%;
	font-weight: bold;
}

.box_contact2 {
	width: 730px;
	margin: 0 50px 30px 50px;
}

.box_contact2 dl {
	display: table;
	margin: 0 auto;
}

.box_contact2 dl dt {
	width: 200px;
	display: table-cell;
	vertical-align: middle;
	font-weight: bold;
	background-color: #cccccc;
	border-bottom: 1px solid #ffffff;
}

.box_contact2 dl dd {
	width: 500px;
	display: table-cell;
	vertical-align: middle;
	padding: 15px 0 15px 30px;
	border-bottom: 1px solid #cccccc;
}

.box_contact2 dl dd.first {
	border-top: 1px solid #cccccc;
}

textarea {
	width: 490px;
	height: 140px;
	overflow-y: scroll;
}

input[type="text"] {
	width: 300px;
	height: 25px;
}

.button {
	text-align: center;
	padding-bottom: 20px;
}
/* 「お問い合わせ」ページ ここまで↑ */