@charset "utf-8";

/*-------------------------
__common
-------------------------*/
#content #main .low_title_box{background:url("/contact/images/main_bg.jpg")no-repeat center center/cover;}
#content #main #contact_content{box-sizing:border-box;padding:100px 20px;margin:0 auto;max-width:1040px;}

@media only screen and (max-width: 767px) {
  #content #main #contact_content{padding:40px 20px 40px;}
}
/*-------------------------
__form_base
-------------------------*/
.id_personal,
#confirm{margin-bottom:30px;}
#content #main #contact_content .form_base table{border-collapse:collapse;border-spacing:0;font-size:14px;line-height:1.6;text-align:left;width:100%;}
#content #main #contact_content .form_base table tr th,
#content #main #contact_content .form_base table tr td{border:none;background:#fff;box-sizing:border-box;padding:15px 0;}
#content #main #contact_content .form_base #confirm table tr th,
#content #main #contact_content .form_base #confirm table tr td{border-bottom:1px solid #eae6e4;}
#content #main #contact_content .form_base table tr th{width:300px;position:relative;padding:15px 60px 15px 0;font-size:16px;font-weight:500;}
#content #main #contact_content .form_base table tr th .required{display:inline-block;background:var(--color2);padding:1px 8px;font-size:13px;color:#FFF;position:absolute;right:30px;top:50%;transform:translateY(-50%);border-radius:2px;}
#content #main #contact_content .form_base table tr td{width:calc(100% - 300px);}
#content #main #contact_content .form_base table tr td input[type="text"],
#content #main #contact_content .form_base table tr td textarea{-webkit-appearance:none;appearance:none;font-size:16px;line-height:1.4;width:100%;margin:4px 0;padding:20px;border:1px solid #eae6e4;box-sizing:border-box;}
#content #main #contact_content .form_base .err{display:block;font-size:13px;line-height:1.5;color:#FF0004;}
#content #main #contact_content .form_base table tr td .form_note{font-size:13px;}
#content #main #contact_content .form_base .agree_txt,
#content #main #contact_content .form_base .transmit{display:block;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:0.04em;margin-bottom:30px;}
#content #main #contact_content .form_base .agree_txt a{color:#2c2c2c;}
#content #main #contact_content .form_base .agree_txt a:hover{text-decoration:none;opacity:0.7;}
#content #main #contact_content .form_base .agree_btn_box{margin-bottom:30px;}
/*ここからチェックボックス*/
.form_base .checkbox{text-align:left;display:inline-block;border:0 none;cursor:pointer;margin:0;padding:0;box-sizing:border-box;}
.form_base .checkbox input{display:none;}
.form_base .checkbox > span{font-size:16px;line-height:1.8;vertical-align:middle;display:inline-block;width:100%;padding:0 1.5em 0 38px;box-sizing:border-box;position:relative;}
.form_base .checkbox > span::before{content:"";display:block;background:#fff;width:28px;height:28px;margin:auto;border-radius:3px;box-sizing:border-box;position:absolute;top:0;left:0;transition:background-color .3s;border:1px solid #eae6e4;}
.form_base .checkbox > span::after{content:"";display:block;width:7px;height:15px;transform:rotate(40deg);border-bottom:3px solid #fff;border-right:3px solid #fff;position:absolute;top:3px;left:9px;transition:opacity .3s;opacity:0;}
.form_base .checkbox input:checked + span::before{background:#777;}
.form_base .checkbox input:checked + span::after{opacity:1;}
/*ここまでチェックボックス*/
#content #main #contact_content .form_base input[type="button"]{width:450px;height:90px;border:1px solid #eae6e4;background:var(--color2);color:#fff;font-size:18px;font-weight:500;border-radius:45px;}
#content #main #contact_content .form_base input[type="button"].re_btn{width:250px;height:60px;border-radius:30px;background:#777;margin-top:20px;font-size:14px;}

@media only screen and (min-width: 768px) {
  #content #main #contact_content .form_base input[type="button"]{transition:opacity 0.3s;}
  #content #main #contact_content .form_base input[type="button"]:hover{opacity:0.7;}
}
@media only screen and (max-width: 767px) {
  #content #main #contact_content .form_base table tr th,
  #content #main #contact_content .form_base table tr td{display:block;padding:0;}
  #content #main #contact_content .form_base table tr th{width:100%;padding:20px 50px 5px 0;font-size:14px;}
  #content #main #contact_content .form_base #confirm table tr th{border-bottom:none;}
  #content #main #contact_content .form_base table tr td{padding:0 0 20px 0;width:100%;border-bottom:1px solid #eae6e4;}
  #content #main #contact_content .form_base table tr th .required{right:0;}
  #content #main #contact_content .form_base .agree_txt,
  #content #main #contact_content .form_base .transmit{text-align:left;}
  #content #main #contact_content .form_base .agree_btn_box{text-align:left;}
  .form_base .checkbox > span{font-size:14px;line-height:1.3;}
  #content #main #contact_content .form_base input[type="button"]{max-width:450px;width:100%;height:80px;border-radius:40px;font-size:16px;}
}

/*-------------------------
__thanks_box
-------------------------*/
#content #main #contact_content.thanks_box dl{margin-bottom:40px;}
#content #main #contact_content.thanks_box dl dt,
#content #main #contact_content.thanks_box dl dd{font-size:15px;line-height:1.6;letter-spacing:0.04em;}

@media only screen and (max-width: 767px) {
  #content #main #contact_content.thanks_box dl{margin-bottom:30px;text-align:left;}
  #content #main #contact_content.thanks_box dl dt,
  #content #main #contact_content.thanks_box dl dd{font-size:14px;}
}