*{
  box-sizing: border-box;
  color: #555555;
  letter-spacing: 1.5px;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  font-weight:400;
}

 /* ------------------共通---------------------- */
body {
  background-color: #c2d3dd;
  overflow-x: hidden;
}

.container h1{
  text-align: center;
  padding: 40px auto 30px;
  color: #fff;
  letter-spacing: 10px;
  font-size: 46px;
}

.container h2{
  text-align: center;
  padding: 40px auto 30px;
  color: #fff;
  font-size: 32px;
}

 .container h3{
   text-align: center;
   padding-top: 1em;
   padding-bottom: 1em;
   color: #0d47a1;
   font-size: 36px;
   letter-spacing: 5px;
   text-shadow: 1px 1px 1px #999999;
 }

 .clear{
   clear: left;
 }


 /* ---------------------- ナビバー ------------------------ */

.nav-style{
  padding-left: 10%;
  padding-right: 10%;
}

.nav-style span{
  margin-left: 2em;
  font-size: 12px;
  color: white;
}

 /* --------------------経営理念---------------------- */
.top-wrapper{
  padding-top: 16em;
  padding-bottom: 19em;
  background-image: url("../images/topbg.jpg");
  background-size: cover;
  background-position: right bottom;
  position: relative;
  z-index: 0;
}

.top-wrapper h1{
  text-shadow: 5px 5px 5px #333333;
}

.top-wrapper h2{
  text-shadow: 5px 5px 5px #333333;
}

/* --------------------主要設備---------------------- */

.facility-wrapper{
  width: 100%;
  padding-top: 50px;
  padding-bottom: 60px;
  background: url(../images/パイロン.png),
              #9aadbe;
  background-size: 52em 52em;
  background-position: 10% 10%;
  background-repeat: no-repeat;
}

.facility-wrapper h3{
  color: white;
}

.facility-wrapper .col{
  padding: 7px 11px;
}

.facility-style{
  height: 300px;
  background-color: #fff;
  margin: 0 auto;
}

.facility-wrapper p{
  text-align:center;
}

.sample1 {
	width:			100%;
	height:			100%;
	position:		relative;	/* 相対位置指定 */
}

.card .caption {
	font-size: 20px;
	text-align:	center;
	padding-top: 4em;
	color: #fff;
}

@media screen and (max-width: 1030px){
  .card .caption {
  	font-size: 15px;
    padding-top: 4em;
}
}
@media screen and (max-width: 480px){
  .card .caption {
  	font-size: 12px;
    padding-top: 2em;
  }
}
.card .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.5);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.card:hover .mask {
	opacity:		1;	/* マスクを表示する */
}

/* --------------------品質保証---------------------- */
.quality-wrapper{
  padding-top: 50px;
  padding-bottom: 60px;
  background: url(../images/金槌.png),url(../images/ドライバー.png)
              #7e9895;
  background-size: 30em 30em, 20em 20em;
  background-position: 1% -10%, 90% 90%;
  background-repeat: no-repeat;
}

.quality-wrapper table{
  background-color: white;
  width: 80%;
  margin: 0 auto;
  border-radius: 10px;
}

.quality-wrapper th{
  background-color: #009b85;
  color: white;
  font-weight: bold;
  text-align: center;
}

.quality-wrapper td{
  padding: 0.5em 0.5em;
  text-align: center;
}

.quality-wrapper h3{
  color: white;
}

.quality-wrapper .row{
  width: 70%;
}

.quality-wrapper .col{
  margin: 1em 1em;
}

/* ------------------------会社概要---------------------------- */

.profile-example-wrapper{
  padding-top: 3em;
  padding-bottom: 1em;
  background: url(../images/歯車.png),
              #e8e2be;
  background-size: 30em 30em;
  background-position: 70% 20%;
  background-repeat: no-repeat;
}

.profile-wrapper h3{
  float: left;
}

.profile-wrapper p{
  font-size: 25px;
  width: 100%;
  margin: 0 auto;
}

table{
    width: 100%;
}

.profile-wrapper span{
  font-weight: bold;
}

/* ------------------------製品事例---------------------------- */
.example-wrapper{
  padding-top: 10em;
  padding-bottom: 1em;
}
/* ------------------------お問合わせ -----------------------*/
.contact-wrapper{
  padding-top: 1em;
  padding-bottom: 60px;
  background-size: 50em 30em;
  background-position: 50% 45%;
  background-repeat: no-repeat;
}

.contact-wrapper h3{
  padding-bottom: 3em;
}

.form-style{
  padding-left: 1em;
  padding-right: 1em;
  background-color: #ebeddf;
  box-shadow: 1.5em 1.5em 50px gray;
}

.form-style p{
  font-weight: bold;
}

.submit_button{
  margin-top: 0.25em;
  margin-bottom: 1em;
  padding: 0.3em 0.9em;
  font-weight: bold;
  border-radius: 8px;
  background-color: #7fc2ef;
  transition: .4s;
  color: #fff;
}

.submit_button:hover{
    background: #0168b3;
}

/* ------------------------フッター -----------------------*/
footer a:hover{
  text-decoration: underline;
}