@charset "UTF-8";

#q-main{
  margin: 0 auto;
  padding: 0 15px;
  }
  
.q-main-top-title{
  font-size: 2.4em;
  color: #333333;
  text-align: center;
  font-weight:normal;
  }
  
.q-main-title{
  font-size: 1.5em;
  color: #000;
  text-align: left;
  font-weight: normal;
  background-color:#fff;
  margin: 10px auto 0px;
  } 
#data{
  margin: 0 auto;
  padding: 0 15px;
  }
.data-wrapper{
  display: table;
  width: 100%;
  table-layout: fixed;
  text-align:center;
  }
.data-box{
  display: table-cell;
  width: 32.4786%;
  margin: 0 auto;
  padding: 15px 15px;
  text-align: center;
  }
.data-title{
  background-color: #000000;
  font-size: 2.5rem;
  line-height: 4rem;
  color:#FFFFFF;
  }
.data-img{
   text-align:center;
   }
.data-text{
   color: #fff;
   background-color: #000;
   height: 100%;
   padding: 10px;
   }

.q-font14{
  font-size: 1em;
  margin-bottom: 30px;
  line-height: 20px;
  padding: 0 30px;
  }
  
.q-bottom_100{
  font-size: 14px;
  margin-bottom: 100px;
  }
  
.button {
display: block;
width: 200px;
padding:15px 0;
text-align: center;
text-decoration: none;
border: 1px solid #000000;
background-color:#111111;
color: #fff;
margin: 50px auto 100px;
clear: both;
}
.button:hover {
background-color:#333333;
color: #fff;
border: 1px solid #333333;
}
.button,
.button::before,
.button::after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
  
/*メディア対応*/
@media (max-width: 600px){

/*header
----------------------------------------------------*/
.q-main-top-title{
  margin: 30px 0 0;
  }
.data-wrapper{
  display: block;
  margin:0;
  padding:0;
  }
.data-box{
  display: block;
  width: 90%;
  text-align: center;
  height: 100%;
  margin: 50px auto;
  padding: 0;
  }

.data-text{
   color: #fff;
   background-color: #000;
   height: 100%;
   padding: 10px 5px;
   }