@charset "UTF-8";

/* =========================================================
   CONTACT
   お問い合わせページ
========================================================= */


/* =========================================================
   CONTACT AREA
   電話・メール案内
========================================================= */


.contact-area {

  display: flex;

  gap: 30px;

  max-width: 1080px;

  margin: 40px auto;

}



.contact-box {

  flex: 1;

  padding: 30px;

  border: 1px solid #ddd;

  background: #fff;

  box-sizing: border-box;

}



.contact-box h3 {

  margin: 0 0 25px;

  padding: 12px 15px;

  background: #f3f6f8;

  border-left: 5px solid #1976b5;

  font-size: 20px;

  font-weight: bold;

}



.contact-box p {

  line-height: 1.8;

}



/* =========================================================
   PHONE
========================================================= */


.contact-tel {

  margin: 20px 0;

  font-size: 26px;

  font-weight: bold;

}



.contact-tel a {

  color: #1976b5;

  text-decoration: none;

}



.contact-tel a:hover {

  text-decoration: underline;

}



.contact-fax {

  font-size: 18px;

}



.icon {

  margin-right: 8px;

}



/* =========================================================
   MAIL BUTTON
========================================================= */


.contact-button {

  display: block;

  width: fit-content;

  margin: 20px auto 0;

  padding: 14px 45px;

  background: #1976b5;

  color: #fff;

  border-radius: 5px;

  text-decoration: none;

  font-size: 16px;

}



.contact-button:hover {

  opacity: 0.8;

}


/* =========================================================
   MAIL ICON
========================================================= */

.mail-icon {
  font-size: 28px;
  margin-right: 10px;
  vertical-align: -3px;
}


/* =========================================================
   SMARTPHONE
========================================================= */


@media screen and (max-width:768px) {


  /* 電話・メール */

  .contact-area {

    display: block;

    margin: 25px auto;

  }



  .contact-box {

    margin-bottom: 20px;

    padding: 20px;

  }



  .contact-box h3 {

    font-size: 18px;

  }



  .contact-tel {

    font-size: 22px;

  }



  .contact-button {

    width: 100%;

    box-sizing: border-box;

    text-align: center;

  }


}