@charset "utf-8";

/*========================================*/
body {
  color: #222;
  font: 16px "メイリオ","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", "ＭＳ Ｐゴシック", 'lucida grande',tahoma,verdana,arial, sans-serif;
  font-size: 100%;
}

/*========================================*/

#contents {
	padding: 20px 0px;   
}


/*==============================
 実績　一覧
 ================================= */
.pm-wrap {
	overflow: hidden;
	width: 95%;
	height: auto;
	margin: 0 auto;
	
}
.pm-list {
	overflow: hidden;
 	position: relative;
	width: 100%;
	margin: 0 10px 20px;
	display: inline-block;
	vertical-align: top;
	
}

.pm-list p {
  position: absolute;
  top: 0;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  color: white;/*文字を白に*/
  background: skyblue;/*背景色*/
  font-size: 100%;
  line-height: 1;/*行高は1に*/
  padding: 5px 10px;/*文字周りの余白*/
}

.pm-list img {
	width: 100%;
}

.pm-list a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
}

.pm-list a:hover img {
	cursor: pointer ;
}

.pm-list .caption {
	font-size: 95%;
	text-align: center;
	padding: 10px;
	color: #fff;
}
.pm-list .mask {
	overflow: hidden;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
	background-color:	rgba(0,0,0,0.5);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition: all 0.2s ease;
}
.pm-list:hover .mask {
	opacity: 1;	/* マスクを表示する */
}


/*==============================
 実績　詳細
 ================================= */

.modal-content { 
	position: fixed;
	vertical-align: top;
	padding: 0px;
	left: 20px;
	top: 65px;
	max-height:80%;
	display: none;
	overflow:auto;
	width: 85%;
}

.modal-ctwrap {
	width: 85%;
	height: auto;
}

.info-box {
	left: 0;
	top: 0;
	border-bottom: 2px solid #ccc;
	z-index: 20;
	margin: 0px auto;
	padding: 0px 0 5px 0;
	font-size: 85%;
}



.info-box dl {
	margin: 0;
	padding: 3px;
	background-color: #ccc;
}

.info-box dt,
.info-box dd{
	padding: 3px 3px;

}

.info-box dl dt {
	text-align: center;
	backgrond: #eee;
	font-weight: bold;
	border-bottom: 1px solid ccc;
}

.info-box dl dd {
	background: #fff;
}


.photo-box {
	position: absolute;
	width: 75%;
}

.photo-box ul {
}

.photo-box ul li {
	float: left;
	width: 47%;
	margin: 3px;
}

.modal-content .close {right: 0;position: absolute;top: 50%;left: 50%;margin: -275px 0 0 -320px;padding: 0;overflow: hidden;text-align: right;width: 640px;}
.modal-content .close img{cursor:pointer;padding: 10px;margin: -20px;}
.modal-content .close img{position:fixed;top:0;right: 0;margin: 20px 10px 0 0;}
.modal-content .close img:hover{opacity:0.65}

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




}

@media screen and (min-width : 768px){
/* ここに768px?1023pxまでのCSSを記述*/ 





}

@media screen and (min-width : 1024px) {

#contents {
	width : 1100px;
	text-align: left;
	padding: 20px 50px 20px;   
}

/*==============================
 実績　一覧
 ================================= */
 
 .pm-list {
	width: 31%;
	
}


/*==============================
 実績　詳細
 ================================= */

.modal-content { 
	top: 50px;
	left: 120px;
	max-height:100%;
	overflow:auto;
}
.modal-ctwrap {
	height: 100%;
	display:display: -webkit-box; /*Android4.3*/
  display: -moz-box;    /*Firefox21*/
  display: -ms-flexbox; /*IE10*/
  display: -webkit-flex; /*PC-Safari,iOS8.4*/
  display: flex;

}

.info-box {
	height: 100%;
	width: 27%;
	border-right: 2px solid #ccc;
	margin: 0 10px 0 0;
	padding: 0 10px 0 0;
	font-size: 100%;
	border-bottom: none;
}

.info-box dl {
	padding: 10px;
	margin: 100px 0 0 0;
}

.info-box dt,
.info-box dd{
	padding: 10px 3px;

}

.photo-box {
	left: 30%;
	top: 0;
	width: 70%;
	height: 100%;	

}

.photo-box ul {
	margin: 100px 0 0 0;
}

.photo-box ul li {
	width: 31%;
}

.modal-content .close img{margin: 29px 33px 0 0; padding: 20px;}


/* ここに1024px以上のCSSを記述*/ 
/*#container {
	position: relative;
}*/