@charset "utf-8";

/*-----------------------------------------------------
  mail.html
-----------------------------------------------------*/
#mail h3 {margin-top: 0;}
#mail table, #mail th, #mail td {border: none;}
#mail table {margin-top: 3em;}
#mail td:first-of-type { width: 21%; font-weight: 700;}
#mail [type=text], #mail textarea {
  width: auto;
  height: auto;
  padding: .5rem;
  border-color: #ccc;
}
#mail .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#mail .flex> input:not([size]), #mail .flex> textarea {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;}
#mail .flex:nth-of-type(n + 2) [type=text] {margin-top: 1rem}
#mail input:focus, #mail textarea:focus {border-color: #009900;}
@media only screen and (max-width: 767px), only screen and (max-width: 896px) and (orientation: landscape) {
  #mail .inner100 {padding: 5rem 0;}
  #mail table {margin-top: 1em;}
  #mail td {display: block; width: 100% !important; }
  #mail td:nth-of-type(n +2) {padding-top: 0;}
  #mail .flex {display: block;}
  #mail [type=text], #mail textarea {width: calc(100% - 1em);}
  #mail input[type="submit"] {width: 100%;}
}