@import url("global.css");
#footer {
  border-top: #878787 solid 1px;
}

.estimate {
  margin: 30px auto 100px;
  background-color: #F0F0F0;
  padding: 3% 4%;
}
.estimate > dl {
  margin-bottom: 15px;
}
.estimate > dl dt {
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: bold;
  margin-bottom: 10px;
}
.estimate .method {
  background-color: #FFF;
  padding: 1% 3%;
}
.estimate .method table {
  border-spacing: 0 20px;
}
.estimate .method table tr {
  vertical-align: middle;
}
.estimate .method table th {
  border: solid 1px #1D1D1D;
  white-space: nowrap;
  padding: 10px 20px;
}
.estimate .method table td {
  padding: 5px 0 5px 30px;
}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1600px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .estimate > dl dt {
    margin-bottom: 5px;
  }
  .estimate .method table td {
    padding: 5px 0 5px 20px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #bodyarea .text {
    text-align: center;
  }

  .estimate {
    margin: 25px auto 80px;
  }
  .estimate .method table {
    border-spacing: 0 15px;
  }
  .estimate .method table th {
    padding: 10px 20px;
  }
  .estimate .method table td {
    padding: 5px 0 5px 15px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #bodyarea .text {
    text-align: justify;
  }

  .estimate {
    margin: 25px auto 65px;
    padding: 20px 5vw;
  }
  .estimate > dl {
    margin-bottom: 10px;
  }
  .estimate > dl dt {
    text-align: center;
  }
  .estimate .method {
    padding: 10px 5vw 0;
  }
  .estimate .method table {
    border-spacing: 0 15px;
  }
  .estimate .method table th, .estimate .method table td {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .estimate .method table th {
    padding: 10px 15px;
    text-align: center;
  }
  .estimate .method table td {
    padding: 5px 5px 20px;
  }
}