@charset "UTF-8";

/**************************************************/
/* 造園事業部CSS */
/**************************************************/

#contents .box{width:100%;max-width:1200px;}
#main.top{width:100%;padding-left:0px;}

#main{width:960px;margin:0 auto;padding:0 10px;}

#pageTitle{width:100%; height:0px; margin-bottom:0; padding-top:41%; background:url(../img/pageTitle_BG.jpg) no-repeat top center; background-size:cover;}
#pageTitle img{margin:0 auto; padding-top:130px; margin-left:-254.5px; position:absolute; top:0; left:50%;}

.ctHead1{background:none;}
.ctHead1:before{content:none;}

/* コンテンツ1 */
#content1{position:relative; width:580px; margin:-107px auto 120px;}
#content1 h3{/*margin-top:-107px;*/ padding:0;}
#content1 h3 img{margin:0 auto;}

#content1 .colorlink{
	position:absolute;  width:172px; height:172px; border-radius:50%; overflow:hidden; 
	-moz-perspective:1000; 
	-o-perspective:1000; 
	-webkit-perspective:1000; 
	-ms-perspective:1000; 
	perspective:1000;
}
#content1 .colorlink a{position:relative; display:block; width:172px; height:172px; border-radius:50%; overflow:hidden;}
.front,
.back{position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%;}
.front{
	z-index:1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.back{
	z-index:2;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	-ms-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	display:none;
}

#content1 #green{top:0; left:0; margin:3.5% 0 0;}
#content1 #red{top:0; left:50%; margin:-11.5% 0 0 -14.5%;/*-65px 0 0 -86px*/}
#content1 #blue{top:0; right:0; margin:3.5% 0 0;}
#content1 #purple{bottom:0; left:53%; margin:0 0 -9.5%;}
#content1 #orange{bottom:0; right:53%; margin:0 0 -9.5%;}


/* コンテンツ2.3.4共通 */
.ctBox .floatBox:after{content:''; display:block; clear:both;}
.ctBox .floatBox .left{float:left;}
.ctBox .floatBox .right{float:right;}
.ctBox .floatBox .whitebox{width:280px; height:300px; padding:0 20px; background:#FFF;}
.floatBox .whitebox h3{width:100%; padding:60px 0 10px; font-size:20px; text-align:center; background:url(../img/border.png) repeat-x center bottom;}
.floatBox .whitebox p{width:100%; font-size:14px; line-height:2em; text-align:center;}
.floatBox .whitebox a{display:block; width:100%; height:60px; margin-top:30px; line-height:60px; text-decoration:none; background:#e6f5d4;}
.floatBox .whitebox a:hover{background:#83ce2a;}

/* コンテンツ2 */
#content2{margin-bottom:2px;position:relative;}
#content2 .whitebox{margin:0 auto; position:absolute; top:0; left:50%; margin-left:-160px}

/* コンテンツ3 */
#content3{margin-bottom:2px;}

/* コンテンツ4 */
#content4{padding-bottom:140px;margin-bottom:0px;}




/**************************************************/
/* 造園事業部 SP CSS */
/**************************************************/
body{min-width:100%;}

#spMode .post-page-content{padding-left:0; padding-right:0;}

#spMode #contents{min-width:100%;}
#spMode #contents .box{width:100%; max-width:1180px;}

#spMode #main{width:auto; max-width:960px; margin:0 auto; padding:0 20px;}

#spMode #pageTitle{width:100%; height:auto; margin-bottom:0; padding-top:0; background:url(../img/pageTitle_BG.jpg) no-repeat top center; background-size:contain;}
#spMode #pageTitle img{width:80%;/*59%*/ max-width:509px; height:auto; margin:0 auto; padding-top:10%!important; padding-bottom:26%!important; position:static;}

#spMode #spMode .ctHead1{background:none;}
#spMode .ctHead1:before{content:none;}

/* コンテンツ1 */
#spMode #content1{position:relative; width:60%;/*60%*/ min-width:280px; max-width:580px; margin:-12% auto 11.5%;/*120px*/}
#spMode #content1 h3{/*margin-top:-16%;18.5%*/ padding:0;}
#spMode #content1 h3 img{width:63%; height:auto; margin:0 auto;}

#spMode #content1 .colorlink{
	position:absolute; width:29.5%; height:54%; border-radius:50%; overflow:hidden; 
	-moz-perspective:1000; 
	-o-perspective:1000; 
	-webkit-perspective:1000; 
	-ms-perspective:1000; 
	perspective:1000;
}
#spMode #content1 .colorlink a{position:relative; display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; border:none!important;}
#spMode .front,
#spMode .back{position:absolute; top:0; left:0; width:100%; height:100%; margin:0!important; border-radius:50%;}
#spMode .front{
	z-index:1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
#spMode .back{
	z-index:2;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	-ms-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	display:none;
}

#spMode #content1 #green{top:0; left:0; margin:3.5% 0 0;}
#spMode #content1 #red{top:0; left:50%; margin:-11.5% 0 0 -14.5%;/*-65px 0 0 -86px*/}
#spMode #content1 #blue{top:0; right:0; margin:3.5% 0 0;}
#spMode #content1 #purple{bottom:0; left:53%; margin:0 0 -9.5%;}
#spMode #content1 #orange{bottom:0; right:53%; margin:0 0 -9.5%;}


/* コンテンツ2.3.4共通 */
#spMode .ctBox .floatBox:after{}
#spMode .ctBox .floatBox .left{float:none;}
#spMode .ctBox .floatBox .right{float:none;}
#spMode .ctBox .floatBox .whitebox{width:auto; height:auto; min-height:270px; margin:0 auto; padding:15px 0;}
#spMode .floatBox .whitebox h3{width:auto; margin-left:20px!important; margin-right:20px!important; padding:40px 0 10px; font-size:20px; text-align:center; background:url(../img/border.png) repeat-x center bottom;}
#spMode .floatBox .whitebox p{width:95%; margin:0 auto!important; font-size:14px; line-height:2em; text-align:center;}
#spMode .floatBox .whitebox a{display:block; width:100%; height:60px; margin-top:30px; line-height:60px; text-decoration:none; background:#e6f5d4; border:none!important;}
#spMode .floatBox .whitebox a:hover{background:#e6f5d4;}

/* コンテンツ2 */
#spMode #content2{margin-bottom:2px;position:relative;}
#spMode #content2 .whitebox{margin:0 auto; position:static;}
#spMode #content2 .left{width:auto; height:300px; margin:0 auto; overflow:hidden; background:url(../img/bgblock1.jpg) no-repeat center; background-size:cover;}
#spMode #content2 .left img{display:none!important; /*margin:0 auto  -80px*/;}
#spMode #content2 .right{display:none;}

/* コンテンツ3 */
#spMode #content3{margin-bottom:2px;}
#spMode #content3 .left{width:auto; height:300px; margin:0 auto; overflow:hidden; background:url(../img/bgblock2.jpg) no-repeat left top; background-size:cover;}
#spMode #content3 .left img{display:none!important; /*margin:0 auto  -80px*/;}

/* コンテンツ4 */
#spMode #content4{padding-bottom:140px;margin-bottom:0px;}
#spMode #content4 .right{width:auto; height:300px; margin:0 auto; overflow:hidden; background:url(../img/bgblock3.jpg) no-repeat top center; background-size:cover;}
#spMode #content4 .right img{display:none!important; /*margin:0 auto  -190px*/;}