@charset "UTF-8";/****************************************
contents
*****************************************/
main div.mainimg{height: 400px; background: url("../images/project/mainimg.jpg") no-repeat center center;background-size: cover;position: relative}
#projectpage .txt{margin: 40px 0;font-size: 1.4rem;line-height: 1.8em; letter-spacing: 0.1em;}
#projectpage .pdf{background:url("../images/common/icon_pdf.png") no-repeat left center;padding-left: 36px;padding-top: 10px;padding-bottom: 10px;display: block;}
#projectpage .dxf{background:url("../images/common/icon_dxf.png") no-repeat left center;padding-left: 36px;padding-top: 10px;padding-bottom: 10px;display: block;}
#projectpage a:link,
#projectpage a:visited{color: #000}
#projectpage .plan li{margin-bottom: 40px}
#projectpage .plan h3{font-size: 2.6rem;text-align: center;margin-bottom: 60px;margin-top: 80px}
#projectpage .plan h3 span{border-bottom: 3px solid #d05a2c;}
#projectpage .plan .bt img{width: 280px;height: auto;margin: auto}
#projectpage .example li{margin-top: 60px;}

@media screen and (min-width:768px){ /*PC独自設定*/
#projectpage .example figure {  position: relative;  overflow: hidden;  width:100%;  height: 150px;  color: #fff}
#projectpage .example li{background: #000}
#projectpage .example li img {transition: all 0.4s ease-out 0.1s;opacity: 1; /*filter: brightness(120%)*/}
#projectpage .example li:hover img {transform: scale(1.2);}
#projectpage .example figcaption {  text-align: center; position: absolute;  top: 0;  left: 0;  z-index: 2;  width: 100%;  height: 100%;  padding: 15px;  background: rgba(0,0,0,.4);  -webkit-transition: .3s;  transition: .3s;  opacity: 0;}
.example figcaption h3{margin-top: 18%}
#projectpage .example figure:hover figcaption {  opacity: 1;}
#projectpage .example a{color: #fff}
}
@media screen and (max-width:768px){/*スマホ対応*/
#projectpage .inner{width: 90%;margin: auto}
#projectpage .txt{line-height: 2em}
#projectpage .plan .col3{width: 48%}
#projectpage .plan h3{line-height: 2em;margin-top: 40px}
#projectpage .plan .bt{width: 100%;height: auto}
#projectpage .example .col3{width:100%;margin: 40px auto 0}
#projectpage .example li{margin-top: 40px;}
#projectpage .example li img{width: 100%}
#projectpage .example figcaption h3{margin: 12px 0 20px 0;color: #37683E}
}