@charset "utf-8";
/* ===================================================================
CSS information

 file name  :website.css
 style info :ホームページ制作専用
 last update:2010.05
=================================================================== */

.floatRight{
 float: right;
 display: inline;
 margin: 10px;
 }
 .floatLeft{
 float: left;
 display: inline;
 margin: 10px;
 }
.marginRight{
 margin-right: 10px;
 }

p{ line-height: 1.7em;}

 div#meritWrap{
 background: url(../img/website_bg_merit.gif) no-repeat;
 width: 515px;
 height: 115px;
 margin: 10px 0;
 overflow: hidden;
  }
div.position {
	position:absolute;
}
div#meritWrap h4{
  text-indent: 15px;
  margin: 15px 15px 0;
  font-size: 120%;
  color: #333;
  position:relative;
  }
 div#meritWrap h4:before{
	width:11px;
	height:11px;
	content:url(../img/icon_arrow_gray.gif) ;
	position:absolute;
	left:-15px;
	top:0;
	display:block;
}
 div#meritWrap ul{
  margin: 0 0 0 25px;
  }
 div#meritWrap ul li{
  list-style: url(../img/icon_dot_gray.gif) inside;
  font-size: 90%;
  margin: 3px 0;
  }

h4.greenLine{
 border-left: 4px solid #66bd00;
 margin: 15px auto;
 color: #333;
 font-size:130%;
 padding-left: 5px;
 }
/*websaite*/
.websate .floatLeft{
	width: 60%;
}
/*imageWrap*/
div#imageWrap{
    margin: 20px 0 20px 5px;
 }
 @media screen and (max-width: 640px) {
     div#imageWrap .left,
     div#imageWrap .right{
         float: none !important;
         width: 100% !important;
    }
    div#imageWrap .left {
        margin-bottom: 10px;
    }

}
 /*mobile*/
 div#mobile .floatLeft {
	width:50%;
}
 div#mobile p{
	margin-bottom:20px;
}

 @media screen and (max-width: 1000px) {

 /*websaite*/
 .websate .floatLeft{
	float: left;
	display: inline;
	margin: 10px;
 }
 div#meritWrap {
	max-width:515px;
	width:100%;
	margin: 0 auto;
	background-position: center;
	background-size:contain;
 }
 div#meritWrap ul {
	text-align:left;
 }
 div#imageWrap .left{
	float:left;
	width:48%;
 }
 div#imageWrap .right {
	float:right;
	width:48%;
}

 }

  @media screen and (max-width: 840px) {

/*websaite*/
.websate .floatRight {
	float:none;
	max-width:239px;
	margin:0 auto;
	display:block;
}
.websate .floatLeft {
	float:none;
	width:100%;
	margin:0 auto;
	display:block;
}

/*mobile*/
div#mobile .floatRight {
	float:none;
	width: 100%;
	max-width:316px;
	margin:0 auto;
	display:block;
}
div#mobile .floatLeft {
	float:none;
	width:100%;
	margin: auto auto 30px auto;
	display:block;
}
.cmn_btn_mobile {
	display:block;
	margin:0 auto;
}
  }

@media screen and (max-width: 640px) {

div#meritWrap{
	background:none;
	border:3px solid #ffd1e0;
	border-radius:3px;
	height:auto;
}
 div.position {
	position:static;
 }
 div#meritWrap ul {
    margin: 15px;
}
.websate p{
	margin:20px 0;
}
    div#imageWrap .left,
    div#imageWrap .right{
        float: none !important;
        width: 100% !important;
   }
   div#imageWrap .left {
       margin-bottom: 10px;
   }


}

	/*実績ページへ*/
  div.worksListWrap{
   width: 765px;
   border: 1px solid #ccc;
   clear: both;
   display: block;
   overflow: hidden;
   margin: 20px auto;
   }
   div.worksListWrap div.worksheadWrap{
    width: 100%;
    display: block;
    clear: both;
    overflow: hidden;
    background: url(../img/cmn_bg_dot.gif) repeat-x bottom;
    }
   div.worksListWrap h4{
    border-left: 5px solid #f93c78;
    font-size: 135%;
    margin: 5px ;
    text-indent: 5px;
    }
   div.worksListWrap img{
    float: right;
    display: inline;
    margin-top: 25px;
    }
   div.worksEx{
    display: inline;
    width: 370px;
    padding: 10px 3px;
    border-right: 1px solid #ccc;
    margin: 5px 0;
    }
   div.nonborder{
   border: none;
   }
   div.worksEx img.photo{
    border: 1px solid #ccc;
    float: left;
    display: inline;
    margin: 5px;
    }
	div .renewal .floatLeft {
		float:left;
		width:65%;
	}

     #pageTop {
 padding: 0px;
 margin:10px auto 20px;
 }
 .f_corporate p {
 line-height   : 140%  ;
 }

  @media screen and (max-width: 1000px) {

/*worksListWrap*/
	div.worksListWrap {
		width:100% !important;
	}
	div.worksEx{
		width:47%;
	}
	div.worksEx .left{
		float:left;
	}
	div.worksEx .right{
		float:right;
	}
/*worksListWrap*/
	div .renewal .floatRight {
		float:right;
		max-width:139px;
		margin:0;
	}
	div .renewal .floatLeft {
		float:left;
		width:70%;
	}

  }

    @media screen and (max-width: 640px) {

	.cmn_btn_mobile {
		width:100%;
		max-width:376px;
	}
/*worksListWrap*/
	div.worksEx img.photo{
		max-width: 130px;
		width:100%;
	}
	div .renewal .floatRight {
		float:none;
		display:block;
		margin:0 auto;
		width:100%;
	}
	div .renewal .floatLeft {
		float:none;
		width:100%;
	}
	div.worksEx {
		width:100%;
		border-right:none;
		border-bottom: 1px solid #ccc;
		padding:10px 0;
	}
	div.worksEx .left,
	div.worksEx .right{
		float:none !important;

	}
	div.worksEx:last-child {
		border-bottom:none;
	}




	}