@charset 'UTF-8';

/* *****************************
Form
******************************* */

#contactForm {
  margin: 0 1%;
  text-align: center;
  font-family:'dfmrg2_0.ttf';
}
#contactForm>h2 {
  display: inline-block;
  margin: 0 auto 13px;
  padding: 0 0 10px 0;
  letter-spacing: 0.05em;
  font-size: clamp( 9px, 5vw, 18px );
  font-weight: 900;
}
#contactForm>form>table {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
#contactForm tr {
}
#contactForm table>tbody>tr>th,
#contactForm table>tbody>tr>td {
  height: 50px;
  padding: .5em;
  line-height: 3em;
  background-color: transparent;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
#contactForm table>tbody>tr>th {
  width: 10em;
  text-align: right;
  font-weight: 900;
  background-color: #cbe4c1;
}
#contactForm table>tbody>tr>th.heading {
  text-align: left;
  font-size: 1.1em;
  background-color: #6ac07a;
}
#contactForm table>tbody>tr>th>span {
  font-size: 0.6rem;
  color: #f00;
}
#contactForm table>tbody>tr>td {
  text-align: left;
  background-color: rgba( 255, 255, 255, .4 );
}
#contactForm table>tbody>tr>td>input[type='text'],
#contactForm table>tbody>tr>td>input[type='kana'],
#contactForm table>tbody>tr>td input[type='number'],
#contactForm table>tbody>tr>td input[type='tel'],
#contactForm table>tbody>tr>td>input[type='email'],
#contactForm table>tbody>tr>td>input[type='url'] {
  width: 90%;
  height: 2em;
  vertical-align: middle;
  line-height: 1.25;
  border: 1px solid #6ac07a;
  border-radius: 4px;
  box-shadow: 0 0 0 0;
  -webkit-appearance: none;
}
#contactForm table>tbody>tr>td>span.hai {
  position: relative;
  margin: 0 0 0 1em;
}
#contactForm table>tbody>tr>td>span.hai::before {
  position: absolute;
  display: block;
  content: '-';
  top: 0;
  left: -1em;
  height: 1em;
  line-height: 1em;
}
#contactForm table>tbody>tr>td>textarea {
  box-sizing: border-box;
  resize: vertical;
  width: 100%;
  min-height: 6em;
  vertical-align: bottom;
  line-height: 1.25;
  border: 1px solid #6ac07a;
  border-radius: 4px;
  box-shadow: 0 0 0 0;
  -webkit-appearance: none;
}
#contactForm table>tbody>tr>td>select {
  box-sizing: border-box;
  height: 2em;
  padding: 1px .5em 1px .2em;
  font-size: 1em;
  border: 1px solid #6ac07a;
  border-radius: 4px;
}
#contactForm table>tbody>tr>td>input[type='text']:focus,
#contactForm table>tbody>tr>td>input[type='kana']:focus,
#contactForm table>tbody>tr>td>input[type='number']:focus,
#contactForm table>tbody>tr>td>input[type='tel']:focus,
#contactForm table>tbody>tr>td>input[type='email']:focus,
#contactForm table>tbody>tr>td>input[type='url']:focus,
#contactForm table>tbody>tr>td>textarea:focus,
#contactForm table>tbody>tr>td>select:focus {
  outline: none;
  border: 2px solid #cbe4c1;
}
#contactForm table>tbody>tr>td>label:hover { cursor: pointer; }
#contactForm button.btnFormat {
  height: 48px;
  margin: 2em auto;
  padding: 0 2em;
  line-height: 48px;
  font-size: 16px;
  border-width: 0;
}
#contactForm .error { color: #ec6315; }


/* PC 768px ---------------- */
@media all and (min-width: 768px) {

#contactForm {
}
#contactForm>h2 {
  margin: 0 auto 13px;
  padding: 0 0 10px 0;
  letter-spacing: 0.05em;
  font-size: 1.55rem;
}
#contactForm table>tbody>tr>td>input[type='text'] { width: 70%; }
#contactForm table>tbody>tr>td>input[type='text'].tel { width: 12em; }
#contactForm table>tbody>tr>td>input[type='kana'],
#contactForm table>tbody>tr>td>input[type='email'] { width: 90%; }
#contactForm table>tbody>tr>td input[type='number'],
#contactForm table>tbody>tr>td input[type='tel'] { width: 12em; }

}