@charset "utf-8";
/* 事例紹介詳細 */
/* ------------------------------------------------------- */
#works-detail .image .main-wrap {
  margin: 0 auto;
  max-width: 840px;
  position: relative;
  width: 100%;
}

#works-detail .image #bt-works-detail {
  z-index: 50;
}

#works-detail .image #bt-works-detail {
  position: absolute;
  top: 50%;
  width: 100%;
  z-index:30;
}

#works-detail .image #bt-works-detail .bt-works-detail {
  cursor: pointer;
  display: inline-block;
  height: 50px;
  margin: -25px 0 0;
  position: absolute;
  width: 50px;
}

#works-detail .image #bt-works-detail #works-prev {
  left: -65px;
}

#works-detail .image #bt-works-detail #works-next {
  right: -65px;
}

#works-detail .image .main {
  z-index: 30;
}

#works-detail .image .main div {
  display: none;
}

#works-detail .image .main div:first-child{
  display: block;
}

#works-detail .image .thumb {
  margin: 0 auto;
  max-width: 940px;
  width: 100%;
}

#works-detail .image .thumb div {
  cursor: pointer;
  float: left;
  margin: 20px 0 0;
  padding: 0 10px;
  width: 12.5%;
}


#works-detail h3 {
  border-bottom: 2px #0081cc solid;
  font-size: 180%;
  font-weight: bold;
  line-height: 150%;
  padding: 0 0 10px;
}

#works-detail .list {
  margin: 0 auto;
  max-width: 700px;
  width: 100%;
}

#works-detail .list dl {
  border-bottom: 1px #222 solid;
}

#works-detail .list dl:nth-child(odd) dt,
#works-detail .list dl:nth-child(odd) dd{
  background: #fff;
}


#works-detail .list dl dt {
  padding-left: 3em;
  padding-right: 0;
  width: 10em;
}

#works-detail .list dl dt {

}




/* ------------------------------------------------------- */
@media (max-width: 1017px){
	#works-detail .image #bt-works-detail #works-prev {
	  left: 15px;
	}

	#works-detail .image #bt-works-detail #works-next {
	  right: 15px;
	}
	
	
}
/* ------------------------------------------------------- */
@media (max-width: 870px){
	#works-detail .image .thumb div {
	  width: 16.66%;
	}
}

/* ------------------------------------------------------- */
@media (max-width: 780px){
	
	#works-detail .list dl dt {
	  padding-left: 1em;
	  width: 100%;
	}
	
	
	
	

}

/* ------------------------------------------------------- */
@media (max-width: 640px){
	#works-detail .image #bt-works-detail .bt-works-detail {
	  height: 30px;
	  margin: -15px 0 0;
	  width: 30px;
	}
	
	#works-detail .image #bt-works-detail #works-prev {
	  left: 10px;
	}

	#works-detail .image #bt-works-detail #works-next {
	  right: 10px;
	}
	
	#works-detail .image .thumb div {
	  margin: 10px 0 0;
	  padding: 0 5px;
	  width: 25%;
	}
	
	

}
/* ------------------------------------------------------- */