@charset "utf-8";

/* index 
------------------------------------------------------------------*/

#wrap {
	overflow: hidden;
}


.ie8 body {
	background-color: #FFFFFF;
}


.ie8 .onPhoto .btn-area,
.ie8 .onDesign .btn-area {
	display : none !important;
}

.ie8 .onPhoto {
	background-color: #8ca523;
}
.ie8 .onDesign {
	background-color: #eaa117;
}
.ie8 .onPhotoStep2 ,
.ie8 .onDesignStep2 {
	background-color: #6e464f;
}
.ie8 .re-btn-area-re {
	display : none !important;
}
.ie8 .btnPxD {
	display: block !important;
}
/*
*/


#main {
	position: relative;
	width  : 900px;
	margin : 0px auto;;
}

#btn_wrap {

}

#btn_wrap li {
	position: absolute;
	z-index : 5;
}


#btn_wrap li .btn-area-re,
#btn_wrap li .btn-area {
	width  : 280px;
	height : 280px;
	cursor: pointer;
}

#btn_wrap li .btn-area-re {
	display : none;
}

#btn_wrap .btn-area-re {
	position: absolute;
	top :0;
}
#btn_wrap #btn_photo .btn-area-re {
	left : 0px;
}
#btn_wrap #btn_design .btn-area-re {
	right : 0px;
}


/*#btn_wrap #btn_photo .btn-area-re,*/
#btn_wrap #btn_photo .btn-area,
#btn_wrap #btn_photo {
	left : 133px;
/*	top : 140px;*/
	top : 173px;
}
#btn_photo .btn-area {
	background :url('../img/btnPhoto.png') 0 0 no-repeat;
}


/*#btn_wrap #btn_design .btn-area-re,*/
#btn_wrap #btn_design .btn-area,
#btn_wrap #btn_design {
	right : 133px;
/*	top : 140px;*/
	top : 173px;
}
#btn_design .btn-area {
	background :url('../img/btnDesign.png') 0 0 no-repeat;
}
#btn_wrap #btn_photo .ch-info {
	background: rgba(140,165,35, 1);
/*	background: rgba(140,165,35, 0.8);*/
}
#btn_wrap #btn_design .ch-info {
	background: rgba(234,161,23, 1);
/*	background: rgba(234,161,23, 0.8);*/
}
#btn_wrap #btn_service .ch-info,
#btn_wrap #btn_about .ch-info,
#btn_wrap #btn_contact .ch-info {
	left : 333px;
	top  : 140px;
}


#btn_wrap #btn_service .ch-info {
	background: rgba(255,255,255, 1);
}
#btn_wrap #btn_about .ch-info {
	background: rgba(255,255,255, 1);
}
#btn_wrap #btn_contact .ch-info {
	background: rgba(255,255,255, 1);
}



.btnPxD {
	display : none;
	width  : 113px;
	height : 113px;
	position: absolute;
	top  :   0;
	left : 276px;
/*	background : url('../img/titlePxD.png') 0 0 no-repeat;*/
	background-color : #6E464F;
	border-radius: 50%;
	cursor: pointer;
}



.ch-info {
	width : 278px;
	height : 278px;
	position: absolute;
	top :0;
	left:0;
	border-radius: 50%;
	opacity: 0;
	
	-webkit-transition: all 0.8s ease-in-out;
	   -moz-transition: all 0.8s ease-in-out;
	     -o-transition: all 0.8s ease-in-out;
	    -ms-transition: all 0.8s ease-in-out;
	        transition: all 0.8s ease-in-out;
	
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	     -o-transform: scale(0);
	    -ms-transform: scale(0);
	        transform: scale(0);
	
	-webkit-backface-visibility: hidden;
	z-index : 10;
}
.onNavFlg .ch-info {
	-webkit-transition: all 0s ease-in-out;
	   -moz-transition: all 0s ease-in-out;
	     -o-transition: all 0s ease-in-out;
	    -ms-transition: all 0s ease-in-out;
	        transition: all 0s ease-in-out;
}


#btn_photo_design .ch-info {
	position: absolute;
	top  :  65px;
	left : 276px;
	display : block;
	width  : 113px;
	height : 113px;
	border-radius: 50%;
	background : #6E464F;
	opacity: 0;
	-webkit-transition: all 0.8s ease-in-out;
	   -moz-transition: all 0.8s ease-in-out;
	     -o-transition: all 0.8s ease-in-out;
	    -ms-transition: all 0.8s ease-in-out;
	        transition: all 0.8s ease-in-out;
}
.ie8 #btn_photo_design .ch-info {
	display : none;
}
.ie8 .onPhotoStep2 #btn_wrap div,
.ie8 .onDesignStep2 #btn_wrap div {
	display : none !important;
}

.onPhotoStep2 #btn_photo_design .ch-info,
.onDesignStep2 #btn_photo_design .ch-info {
	-webkit-transform: scale(30);
	-moz-transform: scale(30);
	-o-transform: scale(30);
	-ms-transform: scale(30);
	transform: scale(30);
	opacity: 1;
}


.onPhoto #btn_wrap #btn_photo .btn-area-re {
	background :url('../img/btnPhoto_on.png') 0 0 no-repeat;
}
.onDesign #btn_wrap #btn_design .btn-area-re {
	background :url('../img/btnDesign_on.png') 0 0 no-repeat;
}

.onPhotoStep2 #btn_photo ,
.onDesignStep2 #btn_design {
	display : none;
}
.onPhoto #btn_wrap #btn_photo .ch-info,
.onDesign #btn_wrap #btn_design .ch-info {
	-webkit-transform: scale(15);
	-moz-transform: scale(15);
	-o-transform: scale(15);
	-ms-transform: scale(15);
	transform: scale(15);
	opacity: 1;
}



.onService #btn_wrap #btn_service .ch-info,
.onAbout   #btn_wrap #btn_about .ch-info,
.onContact #btn_wrap #btn_contact .ch-info {
	-webkit-transform: scale(15);
	-moz-transform: scale(15);
	-o-transform: scale(15);
	-ms-transform: scale(15);
	transform: scale(15);
	opacity: 1;
}




#btn_photo:hover .btn-area {
	background :url('../img/btnPhoto_on.png') 0 0 no-repeat;
}
#btn_design:hover .btn-area {
	background :url('../img/btnDesign_on.png') 0 0 no-repeat;
}

.onDesign #btn_wrap #btn_photo {
	z-index : 20;
}
.onDesign #btn_wrap #btn_photo .btn-area-re {
/*
	background :url('../img/btnPxD.png') 0 0 no-repeat;
*/
	background :url('../img/titlePxD.png') 0 0 no-repeat;
	border-radius: 50%;
	cursor: auto;
}
.onPhoto #btn_wrap #btn_design {
	z-index : 20;
}
.onPhoto #btn_wrap  #btn_design .btn-area-re {
/*
	background :url('../img/btnPxD.png') 0 0 no-repeat;
*/
	background :url('../img/titlePxD.png') 0 0 no-repeat;
	border-radius: 50%;
	cursor: auto;
}

.onDesign  #btn_wrap  #btn_photo .re-btn-area-re,
.onPhoto  #btn_wrap  #btn_design .re-btn-area-re {
	z-index : 200;
	cursor: pointer;
	background : #6E464F;
	border-radius: 50%;
	-webkit-transition: all 0.8s ease-in-out;
	   -moz-transition: all 0.8s ease-in-out;
	     -o-transition: all 0.8s ease-in-out;
	    -ms-transition: all 0.8s ease-in-out;
	        transition: all 0.8s ease-in-out;
	
	-webkit-transform: scale(0.41);
	   -moz-transform: scale(0.41);
	     -o-transform: scale(0.41);
	    -ms-transform: scale(0.41);
	        transform: scale(0.41);
}
.onNavFlg #btn_wrap  #btn_photo .re-btn-area-re,
.onNavFlg #btn_wrap  #btn_design .re-btn-area-re {

	-webkit-transition: all 0s ease-in-out;
	   -moz-transition: all 0s ease-in-out;
	     -o-transition: all 0s ease-in-out;
	    -ms-transition: all 0s ease-in-out;
	        transition: all 0s ease-in-out;

/*
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;

*/
}

.onDesignStep2 #conts_design .btnPxD,
.onDesignStep2  #btn_wrap  #btn_photo .re-btn-area-re,
.onPhotoStep2 #conts_photo .btnPxD,
.onPhotoStep2  #btn_wrap  #btn_design .re-btn-area-re {
	-webkit-transition: all 0.3s ease-in-out;
	   -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	     -o-transform: scale(0);
	    -ms-transform: scale(0);
	        transform: scale(0);
}

.onPhotoStep2 #btn_wrap #btn_photo .ch-info,
.onDesignStep2 #btn_wrap #btn_design .ch-info {
/*	background: rgba(110,70,79, 1);*/
}




.loadedConts {
	position : absolute;
	width    : 900px;
	height   : 507px;
	top      : 60px;
	display : none;
	z-index : 10;
}
.loadedConts .btn_back {
	position : absolute;
	width    : 73px;
	height   : 23px;
	top      : 192px;
	cursor   : pointer;
}



#conts_service,
#conts_about,
#conts_contact {
	left : 0;
}

.area_text {
	padding-top : 22px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
.gallery {
	display : none;
}

.js-gallery {
	float : left;
	position : relative;
}
.js-gallery div {
	position : absolute;
	display : none;
	left : 0;
	top  : 0;
}
.js-gallery div span{
	float : left;
	overflow : hidden;
	margin : 0px 2px 2px 0px;
	background : #333;
	display : inline-block;
}

.gallery_paging {
	width  : 398px;
	margin-top : 18px;
	float  : left;
}

.gallery_paging li.arrowL {
	float  : left;
	width   : 17px;
	height  : 17px;
	background : url('../img/iconArrowL.png') 0 0 no-repeat;
	cursor   : pointer;
}
.gallery_paging li.arrowR {
	float  : right;
	width   : 17px;
	height  : 17px;
	background : url('../img/iconArrowR.png') 0 0 no-repeat;
	cursor   : pointer;
}
.gallery_paging li.arrowL:hover {
/*	background : url('../img/iconArrowL_on.png') 0 0 no-repeat;
	opacity : 0.7;/*
}
.gallery_paging li.arrowR:hover {
/*	background : url('../img/iconArrowR_on.png') 0 0 no-repeat;
	opacity : 0.7;*/
}


.gallery_paging li.page_target {
	float  : left;
	width  : 364px;
	text-align : center;
}

.gallery_paging li.page_target span {
	display : inline-block;
	width   : 6px;
	height  : 6px;
	margin  : 0px 4px;
	   -moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	        border-radius: 50%;
	background-color: rgba(150,150,150,0.7);
}

.ie8 .gallery_paging li.page_target span {
	background-color: #666666;
}


.gallery_paging li.page_target span.act {
	background-color:#fff;
}

.layer_inner_disp {
	float  : right;
	width  : 480px;
	height : 504px;
	padding-top : 24px;
	
}

.layer_inner_disp img {
	display : none;
	margin  : auto;
}
.layer_inner_disp .caption {
	font-size: 12px;
	line-height : 30px;
}
/*
#conts_photo .btn_back {
	left : 0;
	background :url('../img/btnBacktotopL.png') 0 0 no-repeat;
}
#conts_design .btn_back {
	right : 0;
	background :url('../img/btnBacktotopR.png') 0 0 no-repeat;
}
*/