@charset "UTF-8";
.contactin-wrap {
    position: relative; 
    height: 100%; 
    color: #fff; 
    background-color: #000;
    padding: 100px 30px 30px;
}
.con-tit {font-size: 2em; padding-bottom: 30px;}
.con-txt {padding-bottom: 30px;}
.contactin {
    position: relative;
    height: 940px;
    border: 1px solid #aaa;
    border-radius: 50px;
    padding: 30px;
    text-align: left;
    margin: auto;
}
.name {margin: 20px;}
#contact_name {width: 200px; margin: 20px; color: #fff; padding-bottom: 5px; border: 0; border-bottom: 1px solid #aaa; background-color: transparent; border-radius: 0;}
.e-mail {margin: 20px;}
#contact_email {width: 200px; margin: 20px; color: #fff; padding-bottom: 5px; border: 0; border-bottom: 1px solid #aaa; background-color: transparent;border-radius: 0;}
.tel {margin: 20px;}
#contact_phone {width: 200px; margin: 20px; color: #fff; padding-bottom: 5px; border: 0; border-bottom: 1px solid #aaa; background-color: transparent;border-radius: 0;}
.subject {margin: 20px;}
#contact_message {width: 200px; margin: 20px; color: #fff; padding: 10px; border: 1px solid #aaa; border-radius: 20px; background-color: transparent;}
.btn_submit {position: absolute; bottom: 30px; right: 20px; padding: 10px 20px; border-radius: 20px; border: 0; background-color: #fff; font-size: 1.2em; color: #000;}
.btn_submit:hover {background-color: #aaa; color: #fff;}

.container {display: none;}
#contactForm_term {position: absolute; bottom: 80px;}
#contactForm_term h2 {border-bottom: 1px solid #fff; padding: 0.5em;}
#contactForm_term h3 {color: #fff; margin: 0.3em 0; font-size: 1em;}
#contactForm_term dl {}
#contactForm_term dl dt {font-weight: bold;}
#contactForm_term dl dt:before {display: inline-block; content: '-'; margin-right: 0.2em;}
#contactForm_term dl dd {margin-left: 3em;}
#contactForm .contactForm_agree2 {border: 0; font-size: 1.2em; font-weight: bold; background-color: transparent; color: #fff; border-radius: 5px; padding: 0.8em ; text-align: center; margin: 0.8em 0;}
.tbl_frm01 textarea {border: 1px solid #EEE; padding: 0.3em; width: 60%; margin-bottom: 0.5em; height: 250px;} 
#contactForm {}
#contactForm .agree_text {display:block; padding:20px; width:100%; line-height:1.6em; font-size: 0.8em;}


/* alert Bootstrap */
#alertOk, #alertErr { display:none; }
.alert {
  position: absolute;
  left: 25% ;
  top: calc(50% - 25px);
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success hr {
  border-top-color: #c9e2b3;
}
.alert-success .alert-link {
  color: #2b542c;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-danger hr {
  border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
  color: #843534;
}

.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
       -o-transition: opacity .15s linear;
          transition: opacity .15s linear;
}
.fade.in {
  opacity: 1;
}

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}
button.close {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
@media screen and (max-width: 339px) {
  .contactin {padding: 20px 10px}
  #contact_name, #contact_email, #contact_phone, #contact_message {width: 160px;}
}
@media screen and (max-width: 767px) {
  .contact-wrap {
    text-align: center; 
  }
}
@media screen and (min-width: 483px) and (max-width: 1279px) {
  .subject {position: absolute; top: 210px;}
  .subject-wrap {padding: 40px 0;}
}
@media screen and (min-width: 1280px) and (max-width: 1526px) {
  .subject {position: absolute; top: 270px;}
}
@media screen and (min-width: 1280px) {
  .con-tit {font-size: 2.5em; padding-bottom: 30px;}
  .con-tit::after {
      content: '';
      display: block;
      position: absolute;
      top: 140px;
      left: 450px;
      width: 50px;
      border-top: 1px dotted #aaa;
  }
  .con-txt {position: absolute; top: 125px; left: 550px;}
  .contact {padding: 110px;}
  .name-wrap, .email-wrap, .tel-wrap {width: 400px; float: left; margin: 30px;}
  .subject-wrap {padding:120px 30px; max-width: 1200px;}
  .name {margin: 20px;}
  #contact_name {width: 340px; margin: 20px; color: #fff; padding-bottom: 5px; border: 0; border-bottom: 1px solid #aaa; background-color: transparent;}
  .e-mail {margin:20px;}
  #contact_email {width: 340px; margin: 20px; color: #fff; padding-bottom: 5px; border: 0; border-bottom: 1px solid #aaa; background-color: transparent;}
  .tel {margin: 20px;}
  #contact_phone {width: 340px; margin: 20px; color: #fff; padding-bottom: 5px; border: 0; border-bottom: 1px solid #aaa; background-color: transparent;}
  .subject {margin: 20px;}
  #contact_message {width: 100%; margin: 20px; color: #fff; padding: 10px; border: 1px solid #aaa; border-radius: 20px; background-color: transparent;}
  .btn_submit {position: absolute; bottom: 50px; right: 60px; padding: 10px 30px; border-radius: 20px; border: 0; background-color: #fff; font-size: 1.2em; color: #000;}
  #contactForm_term {left: 90px;}

}
@media screen and (min-width: 1650px) {}