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

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

.marginRight{
 margin-right: 10px;
 }

p{line-height: 1.7em;}

div.meritWrap{
 background: url(../img/mobile_bg_merit.gif) no-repeat;
 width: 515px;
 height: 115px;
 margin: 10px 0;
 position:relative;
 }
 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;
 }

div#imageWrap{
 margin: 20px 0;
 }

 /*mobilesite*/
#mobilesite .floatLeft{
	width:65%;
	float: left;
	display: inline;
	margin: 10px;
}
#mobilesite .floatRight {
	float: right;
	display: inline;
	margin: 10px;
}
div#imageWrap .left {
	float:left;
 }
  div#imageWrap .left:nth-child(2),
  div#imageWrap .left:nth-child(5){
	  margin: 0 2%;
  }
 /*link_banner*/
.link_banner {
	margin:20px 0 30px 0;
}
/*imageWrap*/
 div#imageWrap .left {
	width: 32%;
 }



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

div.meritWrap{
	max-width: 515px;
	width:100%;
	margin:0 auto;
	background-position: center;
	background-size:contain;
 }
  div#imageWrap {
	 margin: 20px auto auto auto;
  }
  .link_banner .left{
	width:48%;
  }
  .link_banner .right{
	width:48%;
  }

}

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

#mobilesite .floatLeft{
	width:100%;
	float:none;
	margin:0 auto;
	display:block;
}
#mobilesite .floatRight {
	max-width:718px;
	float:none;
	margin:0 auto;
	display:block;
}

}

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

div.meritWrap{
	background:none;
	border:3px solid #c1e4ff;
	border-radius:3px;
	height:auto;
}
 div.position {
	position:static;
 }
 div.meritWrap ul {
    margin: 15px;
}
 /*mobilesite*/
#mobilesite p{
	margin:20px 0;
}
div#imageWrap .left{
    width: 49% !important;
    margin-right: 2%;
}
div#imageWrap .left:nth-of-type(2n){
    margin-right: 0;
}
div#imageWrap .left:nth-child(2){
    margin: 0;
}
div#imageWrap .left:nth-child(5){
    margin: 0 2% 0 0;
}
.link_banner .left,
.link_banner .right{
    float: none !important;
    width: 100% !important;
}
.link_banner .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 #1866e5;
    font-size: 135%;
    margin: 5px ;
    text-indent: 5px;
    }
   div.worksListWrap img{
    float: right;
    display: inline;
    }
   div.worksEx{
    float: left;
    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#mobileLink{
 border: 3px solid #ff5795;
 clear: both;
 display: block;
 overflow: hidden;
 margin: 10px auto;
 padding:10px;
 }
 div#mobileLink img{
  float: left;
  display: inline;
  margin-right: 15px;
  }
div#mobileLink .floatRight {
	width:80%;
	display: inline;
	margin:0;
	vertical-align:middle;
}
 div#mobileLink p{
  margin: 5px 0;
  line-height: 1.5em;
  }

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


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

	/*mobileLink*/

	div#mobileLink{

  	}


  }

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

	 div#mobileLink .floatLeft {
		float:none;
		display:block;
		margin: 10px auto 10px auto;
	 }
	 div#mobileLink .floatRight{
		width:100%;
		float:none;
		display:block;
		margin:0 auto;
	 }

  }