@charset "UTF-8";
body {background:#333; color:#FFF}

#works {}
#works::after {clear: both; content:""; display: block;width: 100%; height:20px; }
#works .title {margin:100px auto 40px; padding: 0 0 0px; text-align:center; font-size: 40px; letter-spacing: 7px;}
#works .title span { text-align: center; letter-spacing: 0; font-size: 16px; display: block; padding-bottom: 10px}
#works img {max-width:100%}

#works .box {width: 340px; margin:0 20px 60px 0; float:left; background:#000; color:#FFF}
#inve .box {padding-bottom: 10px; line-height:1em}
#works .box a {text-decoration:none; color: #FFF}
#deve .box:nth-child(3n) {margin:0 0px 60px 0;}
#deve .box:nth-child(3n-1) {clear: both} 
#inve .box:nth-child(3n+1) {margin:0 0px 60px 0;}
#inve .box:nth-child(3n+2) {clear: both} 
#works .photo {text-align: center; background:#000; font-size: 0}
#works .photo img {max-height:226px;}
#works .box h4{margin:0; padding:6px 0 3px 20px; font-size:18px;}
#works .box h4 span {font-size:15px}
#works .box h4 b {font-size:15px; padding-right:5px}
#works .box p{margin:0; padding:3px 0 0 30px; font-size:15px; line-height: 1.2em}
#works .more_btn {background:#666; color:#FFF; display:inline-block; padding:0 15px 0 20px; float:right; margin-top: -20px}

@media screen and (max-width: 767px) {
	#inve.contents {margin: 0 0 0 2%}
	#works .title {margin:60px auto 30px; padding: 0 0 0px; font-size: 26px; letter-spacing: 3px; border-bottom: solid 1px #333}
	#works .title span { text-align: center; font-size: 13px; padding-bottom: 10px}
	#works .box {width:45%; margin:0 1% 40px 2%; float:none; font-size:0; display:inline-block; vertical-align:bottom;}
	#works .photo {height:calc(100vw * 0.3);}
	#works .photo img {height:100%; width: auto !important}
	#works .box h4{padding:7px 0 0 10px; font-size:14px; line-height: 1.0em}
	#works .box h4 span {display: block; font-size: 12px; text-indent:-1em}
	#works .box h4 b {display: block; font-size: 12px;}
	#works .box p {padding:4px 0 0 10px; font-size:12px; line-height: 1.0em}
	#works .box p:first-of-type {margin-top:4px}
	#works .more_btn {padding:2px 7px 2px 12px; line-height: 1em; margin-top:5px; font-size: 13px}
	#deve .box:nth-child(3n),#inve .box:nth-child(3n+1) {margin:0 2% 40px;}
	#deve .box:nth-child(3n-1),#inve .box:nth-child(3n-1) {clear:none} 
}


.modal {
  visibility: hidden;
  overflow-y: scroll;
  opacity: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 50px;
  transition: opacity 0.3s, visibility 0s 0.3s;
  background: rgba(0, 0, 0, 0.5);
 display: block;
}
.modal.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s, visibility 0s 0s;
}
.modal_container {
  display: flex;
  min-height: 100%;
  justify-content: center;
  align-items: center;
}
.modal_container _:-ms-lang(x)::-ms-backdrop, .modal_container {
  min-height: 100vh;
}
.modal_container::after {
  content: "";
  min-height: inherit;
  font-size: 0;
}
.modal_inner {
  margin: 20px auto;
  width: 100%;
}
.modal_content {
  display: none;
  width: 800px;
  max-width: 800px;  border-radius: 5px;
  background: #fff;
  padding:10px 40px;
  margin: 20px auto;
height: 600px
}
.modal_content img {max-height: 400px;}
.is-active .modal_content {
  display: block;
}
.slick-slide img {
  max-width: 100%;
	margin: 0 auto;
}

.modalClose_btn { float:right; z-index:999; background:url(../img/common/btn_close.png) no-repeat center top; width: 93px; height: 25px; background-size:cover; margin: 10px 0px 0 0}
.modalClose_btn a {display: block; width: 100%; height: 100%}
.modal_content h5 {color:#333; font-size:16px; margin:10px 0 10px 20px; padding: 0}

.thumb {text-align: center;}
.thumb .slick-slide {cursor: pointer;height:130px; margin:10px 3px 0; padding-bottom: 10px}
.thumb .slick-slide:hover {opacity: .7;}
.thumb .slick-slide img {border: solid 1px #FFF; box-sizing: border-box;}
.thumb .slick-slide:focus img  {border: solid 2px #F00; box-sizing: border-box;}
.thumb .slick-track {
transform:unset!important;
}

@media screen and (max-width: 767px) {
.modal { padding: 0 5px}
.modal_content {
width: 100%;
max-width: 90%; border-radius: 5px;
padding: 10px 5% 0;
margin: 20px auto;
height:calc(100vw * 0.5 + 150px);
}
.modal_content img {max-height:calc(100vw * 0.47);}
.modal_content h5 {font-size:14px}
.modalClose_btn { width:50px; height:14px}
.thumb .slick-slide {height:80px;  margin: 20px 2px 0}
}
.thumb .slick-slide img {
border: solid 2px #CCC;
}