@charset "utf-8";

/*CSSスライドショー（アニメーション設定）
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
	0% {opacity: 1;}
	10% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 1;}
	100% {opacity: 1;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 1;}
	100% {opacity: 1;}
}
/*３枚目*/
@keyframes slide3 {
	0% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 1;}
}
/*もみじ画像*/
@keyframes headerimg {
	0% {opacity: 1;}
	10% {opacity: 1;}
	60% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 1;}
}

/*CSSスライドショー（画像設定）
---------------------------------------------------------------------------*/
/*スライドショーとメニューを囲むブロック*/
#menu-mainimg {
	position: relative;
	margin-bottom: 40px;
	background: #216ea1;
}
/*スライドショー画像を囲むブロック*/
#mainimg {
	width: 980px;
	height: auto;
	margin: 0 auto;
}
/*スマホ用スライドショーを表示させない設定*/
#mainimg-s {
	display: none;
}
/*スライドショー画像を囲むブロック（※トップページ）*/
#top #mainimg,
#top #mainimg-s {
	width: 100%;	/*画面幅一杯になるよう設定*/
	height: auto;
}
/*スライドショーの３枚画像の共通設定*/
#mainimg img,
#mainimg-s img {
	-webkit-animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 15s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
/*１枚目*/
#slide1,#slide1s {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: relative;
}
/*２枚目*/
#slide2,#slide2s {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
}
/*３枚目*/
#slide3,#slide3s {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
}
/*もみじ画像*/
#headerimg {
	-webkit-animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 15s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	position:absolute;
	left:500px;
	top:-140px;
	width: 50%;
	-webkit-animation-name: headerimg;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: headerimg;				/*同上*/
}

/*画面幅800px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	
#mainimg {
	width: auto;
	padding-bottom: 140px;
	overflow: hidden;
}
/*もみじ画像の場所*/
#headerimg {
	position:absolute;
	left:40%;
	top:-50px;
}

}



/*画面幅480px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:480px){

/*PC用スライドショーを表示させない設定*/
#top #mainimg {
	display: none;
}
#mainimg {
	padding-bottom: 0;
}
/*スマホ用スライドショーを表示させる設定*/
#mainimg-s {
	display: block;
}
/*もみじ画像を表示させない*/
#headerimg {
	display: none;
}

}

/*「施工の流れ」ページの一覧用ブロック
---------------------------------------------------------------------------*/
/*ボックスの設定*/
#main section.list {
	margin-bottom: 15px;	/*ボックス間のスペース*/
	position: relative;
	overflow: hidden;
	/*background: #fff;		/*背景色*/
	background-image: url(../images/background.jpg);
	background-size: cover;
	color: #666;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 2.5%;			/*ボックス内の余白*/
}
#main section.list a {
	display: block;
	text-decoration: none;
	overflow: hidden;
	color: #666;
	margin: -2.5%;
	padding: 2.5%;			/*ボックス内の余白*/
}
#main section.list a:hover {
	background: #fff69e;	/*マウスオン時の背景色*/
}
/*ボックス内の段落タグ設定*/
#main section.list p {
	padding: 0px;
	margin-left: 34%;	/*左の写真とのバランスをとって設定*/
}
/*ボックス内の写真設定*/
#main section.list figure img {
	float: left;		/*画像を左へ回り込み*/
	padding: 5px;		/*余白*/
	width: 30%;			/*写真の幅*/
	height: auto;		/*写真の高さ*/
	border: 1px solid #ccc;	/*線の幅、線種、色*/
	background: #fff;	/*写真と枠線の間(padding:5px)に出る色になります*/
}
/*ボックス内のh4タグ設定*/
#main section.list h4 {
	font-size: 17px;	/*文字サイズ*/
	margin-left: 25%;	/*左の写真とのバランスをとって設定*/
}
/*コンパクトタイプのボックス追加設定*/
#main section.list.compact {
	width: 23%;		/*compactタイプの幅*/
	float: left;	/*ボックスを左に回り込み*/
	height: 260px;	/*compactタイプの高さ*/
	margin-left: 3.5%;	/*ボックス間の余白*/
}
#main section.list.compact a {
	height: 100%;
}
.c1 #main section.list.compact {
	width: 16.5%;
}
/*コンパクトタイプのh4タグ追加設定*/
#main section.list.compact h4 {
	margin-left: 0;
}
/*コンパクトタイプの段落タグ追加設定*/
#main section.list.compact p {
	margin-left: 0;
	font-size: 11px;	/*compactタイプの文字サイズ*/
	line-height: 1.4;
	margin-bottom: 5px;
}
/*コンパクトタイプの写真追加設定*/
#main section.list.compact figure img {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}