@charset "UTF-8";
@media all and (min-width: 768px) {
  .contact-title {
    border-bottom: 2px solid #5aff3d;
    margin: 0 5%;
    line-height: 1.4;
    text-align: center;
    font-size: 2.2em;
    font-weight: normal;
  }
  .attention-wrapper {
    margin: auto;
    width: min(100%, 768px);
    height: auto;
    position: relative;
  }
  .attention-wrapper .attention-list {
    padding-left: 0;
    display: block;
    margin-left: 20%;
    width: min(80%, 768px);
    height: auto;
  }
  .attention-wrapper .attention-list .attention-item {
    list-style-type: none;
    line-height: 1.4;
    font-size: 1em;
  }
  .attention-wrapper .attention-list .attention-item::before {
    font-family: FontAwesome;
    content: "\f11e";
    margin-right: 1%;
    color: red;
  }
  #contact-form {
    margin: 3% auto;
    height: auto;
  }
  #contact-form .input-block .contact-list {
    padding-left: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    margin: 1% auto;
    width: min(100%, 768px);
    height: auto;
  }
  #contact-form .input-block .contact-list .contact-key {
    list-style-type: none;
    text-align: right;
    padding: 5px;
    width: 20%;
    height: auto;
  }
  #contact-form .input-block .contact-list .contact-key::after {
    content: "：";
  }
  #contact-form .input-block .contact-list .contact-value {
    list-style-type: none;
    text-align: left;
    width: 80%;
    height: auto;
  }
  #contact-form .input-block .contact-list .contact-value input[type=text], #contact-form .input-block .contact-list .contact-value input[type=email], #contact-form .input-block .contact-list .contact-value textarea {
    padding: 5px;
  }
  #contact-form div input[type=submit] {
    box-shadow: 0px 1px 0px 0px #fff6af;
    background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color: #ffec64;
    border-radius: 6px;
    border: 1px solid #ffaa22;
    display: inline-block;
    cursor: pointer;
    color: #333333;
    font-family: Arial;
    font-size: 15px;
    font-weight: normal;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffee66;
  }
  #contact-form div input[type=submit]:hover {
    background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color: #ffab23;
  }
  #contact-form div input[type=submit]:active {
    position: relative;
    top: 1px;
  }
}
@media all and (max-width: 767px) {
  .contact-title {
    border-bottom: 2px solid #5aff3d;
    margin: 0 5%;
    line-height: 1.4;
    text-align: center;
    font-size: 2.2em;
    font-weight: normal;
  }
  .attention-wrapper {
    margin: auto;
    width: 90%;
    height: auto;
    position: relative;
  }
  .attention-wrapper .attention-list {
    padding-left: 0;
    display: block;
    width: 90%;
    height: auto;
  }
  .attention-wrapper .attention-list .attention-item {
    list-style-type: none;
    line-height: 1.4;
    font-size: 1em;
  }
  .attention-wrapper .attention-list .attention-item::before {
    font-family: FontAwesome;
    content: "\f11e";
    margin-right: 1%;
    color: red;
  }
  #contact-form {
    margin: 8% auto;
    height: auto;
  }
  #contact-form .input-block .contact-list {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    margin: 3% 5%;
    width: 90%;
    height: auto;
  }
  #contact-form .input-block .contact-list .contact-key {
    list-style-type: none;
    padding: 5px;
    width: 100%;
    height: auto;
  }
  #contact-form .input-block .contact-list .contact-key::after {
    content: "：";
  }
  #contact-form .input-block .contact-list .contact-value {
    list-style-type: none;
    text-align: left;
    width: 100%;
    height: auto;
  }
  #contact-form .input-block .contact-list .contact-value input[type=text], #contact-form .input-block .contact-list .contact-value input[type=email], #contact-form .input-block .contact-list .contact-value textarea {
    padding: 5px;
    width: 100%;
    height: auto;
  }
  #contact-form div input[type=submit] {
    box-shadow: 0px 1px 0px 0px #fff6af;
    background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color: #ffec64;
    border-radius: 6px;
    border: 1px solid #ffaa22;
    display: inline-block;
    cursor: pointer;
    color: #333333;
    font-family: Arial;
    font-size: 15px;
    font-weight: normal;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffee66;
  }
  #contact-form div input[type=submit]:hover {
    background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color: #ffab23;
  }
  #contact-form div input[type=submit]:active {
    position: relative;
    top: 1px;
  }
}

/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../stylesheet/scss/contact.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22;AAEA;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EACA;IACE;IAEA;IACA;IACA;IACA;;EACA;IACE;IAEA;IACA;;EACA;IACE;IACA;IACA;IACA;;EAMR;IACE;IACA;;EAEE;IACE;IAEA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;;EACA;IACE;IACA;IAEA;IACA;IACA;;EACA;IACE;;EAGJ;IACE;IACA;IAEA;IACA;;EACA;IACE;;EAMN;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EACA;IACE;IACA;;EAEF;IACE;IACA;;;AASR;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;;EACA;IACE;IAEA;IACA;IACA;;EACA;IACE;IAEA;IACA;;EACA;IACE;IACA;IACA;IACA;;EAMR;IACE;IACA;;EAEE;IACE;IAEA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;;EACA;IACE;IAEA;IACA;IACA;;EACA;IACE;;EAGJ;IACE;IACA;IAEA;IACA;;EACA;IACE;IAEA;IACA;;EAMN;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EACA;IACE;IACA;;EAEF;IACE;IACA%22,%22file%22:%22contact.css%22%7D */