@charset "UTF-8";
/* CSS Document */
.mainimg {
	background-image: url(../img/main_works.jpg);
}
h3 {
	padding: 20px 0px;
	color: #006CB4;
	letter-spacing: 5px;
	margin: 20px auto;
	font-size: 20px;
	font-size: 2rem;
	width: 30%;
	text-align: center;
	font-weight: bold;
}
h3 hr {
	margin: 10px;
	border-bottom: 2px solid #006CB4;
}
h3 span {
	letter-spacing: normal;
	font-size: 16px;
	font-size: 1.6rem;
}
.type-button li {
	display: inline-block;
	margin: 0px 20px;
}
.type-button li a {
	padding: 0.7em 3em;
	font-size: 20px;
	font-size: 2rem;
	border: 1px #006cb4 solid;
	display: block;
}
.type-button li a:hover {
	background-color: #006cb4;
	color: #ffffff;
}
#name {
	font-size: 22px;
	font-size: 2.2rem;
}
.jumbotron {
	margin-bottom: 0px;
	background-color: #D5DBEC;
}


/* isotope */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
button:focus,
a:focus {
  outline: none;
	text-decoration: none;
}
.button-group{
	border-top: 1px #b3b3b3 solid;
	border-bottom: 1px #b3b3b3 solid;
	margin-bottom: 3em;
	text-align: center;
	padding: 5px 50px 0 50px;
}
.button-group button{
	border: 1px #b3b3b3 solid;
	padding: 8px;
	margin-bottom: 5px;
	font-weight: bold;
}
.button-group button:hover{
	background-color: #006cb4;
	color: #ffffff;
	font-weight: normal;
}
.button:active,
.button.is-checked {
	background-color: #006cb4;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
	font-weight: normal;
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

.grid{
	overflow: hidden;
}
.grid:after {
  content: '';
  display: block;
  clear: both;
}
.element-item {
	position: relative;
	float: left;
	width: 23%;
	margin-left: 1%;
	margin-right: 1%;
	min-height: 320px;
}

.element-item a, .engineerig li a{
	display: block;
	background-color: #f2f2f2;
	color: #333333;
	text-align: center;
	text-decoration: none;
	min-height: 320px;
}
.element-item a:hover, .engineerig li a:hover{
	opacity: 0.7;
	text-decoration: none;
}
.element-item .tag, .engineerig li .tag{
	background-color: #99a8d1;
	color: #ffffff;
	font-size:12px;
	font-size:1.2rem;
	padding: 0.2em;
}
.element-item dl, .engineerig li dl{
	padding: 0 0.5em	1em	0.5em;
	margin-bottom: 0px;
}
.element-item dt, .engineerig li dt{
	font-size: 16px;
	font-size: 1.6rem;
	padding-bottom: 0.2em;
}
.popup-image p.house {
	font-size: 16px;
	font-size: 1.6rem;
	padding-bottom: 0.2em;
	font-weight: bold;
}
.element-item dd, .engineerig li dd{
	font-size: 12px;
	font-size: 1.2rem;
}


@media screen and (max-width: 991px) {
h3 {
	width: 100%;
}
.element-item {
	width: 31.3%;
	margin-left: 1%;
	margin-right: 1%;
}
.element-item {
	min-height: 300px;
}

.element-item a, .engineerig li a{
	min-height: 300px;
}
}

@media screen and (max-width: 767px) {
#subcontent {
	margin: 0px;
	margin-bottom: 20px;
	padding: 15px;
}
.margin-t80 {
	margin-top: 20px;
}
.margin-b80 {
	margin-bottom: 20px;
}
	.type-button li {
		width: 47%;
	margin: 0 1%;
}
	.type-button li a {
		width: 100%;
		display: block;
		padding: 10px 0;
	}
	
.button-group{
	padding: 5px 0px 0 0px;
}
	.element-item {
		padding-left: 8px;
		padding-right: 8px;
	}

}

@media screen and (max-width: 480px) {
.element-item {
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
}
}