@charset "UTF-8";

div.message{
  padding-top: 50px;
  color: #f00;
}

form#form{
  max-width: 500px;
  margin: 0 auto 40px auto;
}

span.error{
  color: red;
}

.form_attr{
  margin-bottom: 5px;
  padding-left: 5px;
  border-left: 10px solid #3f81ba;
}

.form_value{
  margin: 0 0 60px 20px;
  padding: 5px;
  border: 3px solid #ccc;
}

input, textarea{
  font-size: 100%;
  border-radius: 5px;
}

input.text_form{
  padding: 8px 0 8px 2px;
  border: 1px solid #000;
}


textarea.text_area{
  border: 1px solid #000;
  height: 200px;
}

.text_form, .text_area{
  width: 100%;
}

span.must{
  font-weight: bold;
  color: #f90;
  padding-left: 10px;
}

span.sample{
  color: #666;
}

input[type="submit"]{
  -webkit-appearance: none;
  padding: 3px 5px;
  border-radius: 10px;
}

/* PC */
@media screen and (min-width:960px){
  input[type="submit"]{
    cursor: pointer;
  }
}

div.form_button_container{
  margin: 0 auto 90px auto;
}

div.button_correct{
  float: left;
}

div.button_send{
  float: right;
}

#form input[type="submit"], .button_correct input[type="submit"]{
  color: #fff;
  background-color: #3f81ba;
  border: 2px solid #2c71ab;
}

 .button_send input[type="submit"]{
  color: #fff;
  background-color: #007900;
  border: 2px solid #006000;
}

/* PC */
@media screen and (min-width:960px){
  .form_button_container{
    width: 400px;
  }

  div.button_correct{
    width: 100px;
  }

  div.button_send{
    width: 190px;
  }

  #form input[type="submit"]:hover, .button_correct input[type="submit"]:hover{
    background-color: #438ac7;
  }

  .button_send input[type="submit"]:hover{
    background-color: #009000;
  }
}

/* タブレットスマートフォン */
@media screen and (max-width:959px){
  .form_button_container{
    max-width: 400px;
  }

  div.button_correct{
    width: 95px;
  }

  div.button_send{
    width: 175px;
  }
}