@charset "utf-8";

#form_wrap {
  min-height: 400px;
}

/* --------------------------------------------- */

form#mail_form {
  width : auto;
}

form#mail_form dl {
  width : 100%;
  overflow : hidden;
  border-top : 1px solid #CCCCCC;
  display: flex;
  flex-wrap: wrap;
}

form#mail_form dl dt {
  clear : both;
  width : 25%;
  border-top : 1px solid #CCCCCC;
  padding :  .75rem  0;
  overflow : hidden;
}

form#mail_form dl dd {
  width : 75%;
  border-top : 1px solid #CCCCCC;
  padding :  .75rem 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
}

form#mail_form dl dt:first-child,
form#mail_form dl dt:first-child+dd {
  border-top : none;
}

form#mail_form dl dt span {
  display : block;
  font-size : 94%;
  color : #56778E;
}

/* -- for JavaScript ここから -------------------------------------------------------------------------------- */

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional {
  display : inline-block;
  float : none;
  color : #ffffff;
  padding : 3px 5px;
  border-radius : 3px;
  font-size: 10px;
  line-height: 1;
  margin-right: 10px
}

form#mail_form dl dt span.required {
  background-color: #CC0000;
}

form#mail_form dl dt span.optional {
  background-color: #999999;
}

form#mail_form dd span {
  color : #CC0000;
  display : block;
  margin-top: 2px;
}

/* -- for JavaScript ここまで -------------------------------------------------------------------------------- */

form#mail_form input {
  border : 1px solid #cccccc;
  background : #fafafa;
}

form#mail_form input[type="text"] {
  padding: 4px;
}

form#mail_form textarea {
  line-height: 150%;
  width : 100%;
  height : auto;
  resize : vertical;
  border : 1px solid #cccccc;
  border-radius : 3px;
  background : #fafafa;
  padding: 4px;
}

form#mail_form select {
  padding: 6px;
}

form#mail_form input:focus,
form#mail_form textarea:focus {
  border : 1px solid #cccccc;
  background : #ffffff;
}

form#mail_form input#name,
form#mail_form input#name_2 {
  width : 180px;
}

form#mail_form input#read_1,
form#mail_form input#read_2 {
  width : 180px;
}

form#mail_form input#corporation,
form#mail_form input#mail_address,
form#mail_form input#mail_address_confirm {
  width : 300px;
}


form#mail_form input#postal {
  width : 100px;
}

form#mail_form input#address_1,
form#mail_form input#address_2,
form#mail_form input#url {
  display : block;
  width : 360px;
}

form#mail_form input#phone {
  width : 160px;
}

form#mail_form input#day {
  width : 160px;
}

form#mail_form button#mail_submit_button {
  
}

form#mail_form input#mail_submit_button:hover {
  
}

/* --responsive------------------------------------------- */

/* 600pixel start */
@media screen and (max-width : 600px) {

#form_wrap {
  width : auto;
  margin: 0 auto;
}


form#mail_form input[type="text"] {
    font-size: 1.08rem;
  width: auto;
  max-width: 100%;
}

form#mail_form textarea {
    font-size: 1.08rem;
 
}


form#mail_form dl {
  width : auto;
  display: block;
}

form#mail_form dl dt {
  width : auto;
  float : none;
  text-align : left;
  font-weight : bold;
  padding:.5rem 0 0 0;
}

form#mail_form dl dd {
  width : auto;
  float : none;
  border-top : none;
}

form#mail_form dl dt span {
  font-weight : normal;
}

/* -- for JavaScript ここから -------------------------------------------------------------------------------- */

form#mail_form dl dt span.required,
form#mail_form dl dt span.optional {
  margin-right : 5px;
}

/* -- for JavaScript ここまで -------------------------------------------------------------------------------- */



form#mail_form input#corporation,
form#mail_form input#name_1,
form#mail_form input#name_2,
form#mail_form input#read_1,
form#mail_form input#read_2,
form#mail_form input#mail_address,
form#mail_form input#mail_address_confirm,
form#mail_form input#postal,
form#mail_form input#address_1,
form#mail_form input#address_2,
form#mail_form input#phone,
form#mail_form input#url,
form#mail_form input#day,
form#mail_form textarea {
  -webkit-appearance : none;
}

}
/* 640pixel end */




/* --thanks------------------------------------------- */

#thanks {
  width : 540px;
  margin : auto;
  padding : 25px 25px;
  text-align : center;
  min-height: 300px
}

#thanks h1 {
  font-size : 20px;
}

/* --responsive------------------------------------------- */

/* 640pixel start */
@media screen and (max-width : 600px) {

#thanks {
  width : 85%;
  padding : 15px;
  text-align : left;
  min-height: 300px
}
}