.contact { padding-bottom: 40px;}
.contact-box {padding: 0 15px;}
.contact-header { padding: 40px 0; font-size: 20px; font-weight: 500; text-align: center; color: #333;}

.contact-list {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border: 1px solid #a5a5a5; padding: 15px; justify-content: space-between;}
.contact-tel,
.contact-map,
.contact-email {display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; align-items: center;}
.contact-tel span img,
.contact-map span img,
.contact-email span img { width: 40px;}
.contact-tel span,
.contact-map span,
.contact-email span {display: block; margin-right: 10px;}
.contact-tel p,
.contact-map p,
.contact-email p {font-size: 16px; line-height: 1.2; color: #222;}
.contact-tel small {margin-top: 5px; text-align: right; font-weight: 500; font-size: 11px; line-height: 1;}
.contact-tel p {font-size: 26px; font-weight: 500;}

.contact-item-box {padding: 20px 0; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between;}
.contact-item {-ms-flex: 0 0 49%; flex: 0 0 49%; max-width: 49%; border: 1px solid #a5a5a5; margin-bottom: 20px; padding: 15px 5px; text-align: center;}
.contact-item h2 { margin-bottom: 15px; color: #231815; font-size: 18px;}
.contact-addr {color: #969696; font-size: 12px;}

@media (max-width: 767.98px) {
  .contact-tel,
  .contact-map,
  .contact-email {margin-bottom: 15px; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
}
@media (max-width: 730px) {
  .contact-tel,
  .contact-map,
  .contact-email {margin-bottom: 15px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
}

@media (min-width: 576px) {
  .contact {padding-bottom: 50px;}
  .contact-header { padding: 50px 0; font-size: 28px;}

  .contact-tel span img,
  .contact-map span img,
  .contact-email span img { width: 35px;}
  .contact-list { padding: 20px;}
  .contact-tel span,
  .contact-map span,
  .contact-email span {margin-right: 10px;}
  .contact-tel small {margin-top: 5px; text-align: right; font-weight: 500; font-size: 11px; line-height: 1;}
  .contact-tel p,
  .contact-map p,
  .contact-email p {font-size: 15px; line-height: 1.2;}
  .contact-tel p {font-size: 24px;}
  
  .contact-item { -ms-flex: 0 0 47%; flex: 0 0 47%; max-width: 47%; margin-bottom: 35px; padding: 35px 0;}
  .contact-item h2 {font-size: 22px;}
  .contact-addr {font-size: 14px; line-height: 1.2;}
}

@media (min-width: 768px) {
  .contact-header { padding: 50px 0; font-size: 28px;}

  .contact-tel span img,
  .contact-map span img,
  .contact-email span img { width: 40px;}
  .contact-list { padding: 20px;}
  .contact-tel span,
  .contact-map span,
  .contact-email span {margin-right: 10px;}
  .contact-tel small {margin-top: 5px; text-align: right; font-weight: 500; font-size: 11px; line-height: 1;}
  .contact-tel p,
  .contact-map p,
  .contact-email p {font-size: 14px; line-height: 1.6;}
  .contact-tel p {font-size: 24px; }
  
  .contact-item-box {padding: 60px 0;}
  .contact-item { margin-bottom: 45px; padding: 40px 0;}
  .contact-item h2 {font-size: 20px;}
  .contact-addr {font-size: 16px; line-height: 1.6;}
}

@media (min-width: 992px) {
  .contact {padding-bottom: 60px;}
  .contact-box {padding: 0;}
  .contact-header { padding: 60px 0; font-size: 30px;}

  .contact-tel span img,
  .contact-map span img,
  .contact-email span img { width: 40px;}
  .contact-list { padding: 24px;}
  .contact-tel span,
  .contact-map span,
  .contact-email span {margin-right: 15px;}
  .contact-tel small {font-size: 12px; line-height: 1;}
  .contact-tel p,
  .contact-map p,
  .contact-email p {font-size: 15px; line-height: 1.5;}
  .contact-tel p {font-size: 26px; }

  .contact-item-box {padding: 60px 0;}
  .contact-item { -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; margin-bottom: 45px; padding: 40px 0;}
  .contact-item h2 {font-size: 20px;}
  .contact-addr {font-size: 14px; line-height: 1.6;}
}

@media (min-width: 1200px) {
  .contact {padding-bottom: 60px;}
  .contact-box {padding: 0;}
  .contact-header { padding: 60px 0; font-size: 32px;}

  .contact-tel span img,
  .contact-map span img,
  .contact-email span img { width: 45px;}
  .contact-list { padding: 24px;}
  .contact-tel span,
  .contact-map span,
  .contact-email span {margin-right: 15px;}
  .contact-tel small {font-size: 12px; line-height: 1;}
  .contact-tel p,
  .contact-map p,
  .contact-email p {font-size: 16px; line-height: 1.6;}
  .contact-tel p {font-size: 28px; }

  .contact-item-box {padding: 60px 0;}
  .contact-item { -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; margin-bottom: 45px; padding: 40px 0;}
  .contact-item h2 {font-size: 24px;}
  .contact-addr {font-size: 16px; line-height: 1.6;}
  
}

@media (min-width: 1440px) {
  .contact { padding-bottom: 80px;}
  .contact-header { padding: 80px 0; font-size: 36px;}

  .contact-tel span img,
  .contact-map span img,
  .contact-email span img { width: 45px;}
  .contact-list { padding: 28px;}
  .contact-tel span,
  .contact-map span,
  .contact-email span {margin-right: 15px;}
  .contact-tel small {margin-top: 10px;  font-size: 12px; }
  .contact-tel p,
  .contact-map p,
  .contact-email p {font-size: 18px; line-height: 1.6;}
  .contact-tel p {font-size: 35px; }

  .contact-item { margin-bottom: 52px; padding: 50px 0;}
  .contact-item h2 {font-size: 28px;}
  .contact-addr {font-size: 16px; line-height: 2;}
}

@media (min-width: 1600px) {
  .contact-header { padding: 100px 0; font-size: 40px;}

  .contact-list { padding: 30px;}
  .contact-tel span,
  .contact-map span,
  .contact-email span {margin-right: 20px;}

  .contact-item {margin-bottom: 60px; padding: 60px 0;}
  .contact-item h2 {font-size: 30px;}
  .contact-addr {font-size: 18px; line-height: 2;}
}
@media (min-width: 1800px) {
  .contact-tel span,
  .contact-map span,
  .contact-email span {margin-right: 30px;}

  .contact-map p,
  .contact-email p {line-height: 1.5;}
}