@charset "utf-8";
body {
  min-width: 100% !important;
}
.container.w930 {
  max-width: 930px;
  overflow: hidden;
  width: auto !important;
}
.container.w970 {
  max-width: 970px;
  overflow: hidden;
  width: auto !important;
  padding: 0;
}
.formImg {
  float: left;
  width: 460px;
}
.formWrap {
  background: #F4F4F4;
  width: 350px;
  float: right;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 40px;  
}

form.form .required label:after {
    content: ' * ';
    color: red;
    font-weight: bold;
    position: absolute;
    right: 0;
  top: 0;
}





.formBeforeTxt {
  width: 400px;
  float: right;
}
.formImg {
  text-align: center;
}
.formImgTxt {
  font-size: 16px;
  line-height: 1.9;
  border-top: 1px solid #C0C0C0;
  margin: 30px 0 0;
  padding: 15px 0 40px;
  background: url(https://www.teamspirit.co.jp/common/images/form_baloon.png) bottom left no-repeat;
  text-align: left;
}
.formImgTxt p{
  font-size: 16px !important;
  line-height: 1.9 !important;
}
.formWrap .fieldWrap {
  position: relative;
  display: block;
}

.formWrap .fieldWrap:after {
    content: "";
    display: block;
    clear: both;
}

.formWrap .fieldWrap .field-label {
  width: 100px;
  display: inline-block;
  text-align: right;
  padding-right: 1em !important;
  color: #525263;
  position: relative;
}
.formWrap .fieldWrap .error:not([class*="form-field"]) {
  position: absolute;
  top: -20px;
  right: -10px;
  background: rgb(204,0,0);
  padding: 5px;
  color: #FFF !important;
  line-height: 1;
  font-size: 12px;
}
.formWrap .fieldWrap .error::after {
  position: absolute;
  content: '';
  bottom: -10px;
  left: 50%;
  border-style: solid;
  border-color: rgb(204,0,0) transparent transparent transparent;
  border-width: 5px 5px;
}
.fieldWrap.last_name, .fieldWrap.first_name {
  display: inline-block;
}
.fieldWrap.last_name {
  margin-right: 10px;
}
.fieldWrap.last_name input, .fieldWrap.first_name input {
  width: 90px !important;
}
.fieldWrap.first_name .field-label {
  width: auto !important;
}
.fieldWrap.email .description {
  text-align: right !important;
  font-size: 13px;
}



.fieldWrap input, .fieldWrap select {
  width: 230px !important;
  padding: 3px 5px;
  box-sizing: border-box;
  border-radius: 5px;
}
.fieldWrap .pd-checkbox input {
  width: 16px !important;
  height: 16px;
  border-radius: 0;
  vertical-align: middle;
  margin-right: 5px;
}
form.form span.description {
  text-align: left;
}
form.form input[type="submit"], form.form input[type="button"] {
  width: 48%;
  padding: 15px;
  font-size: 20px;
  background: #00BFFF;
}
p.submit{padding: 10px;}
#form_confirm_button{ width: 100%;}

#ui-datepicker-div {
  padding: 5px 8px;
  background: #FFF;
  border: solid 1px #000;
  border-radius: 5px;
  display: none;
}
.ui-datepicker-prev {
  cursor: pointer;
}
.ui-datepicker-next {
  cursor: pointer;
  float: right;
}
.ui-datepicker-title {
  text-align: center;
  margin-bottom: 5px;
}
.ui-datepicker-month {
  margin-right: 5px;
}
.ui-datepicker-calendar {
  border: solid 1px #EEE;
  border-collapse: collapse;
}
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
  padding: 3px 5px;
  border: solid 1px #EEE;
  text-align: center;
}
.ui-datepicker-calendar td {
  padding: 0;
}
.ui-datepicker-calendar td a {
  padding: 3px 5px;
  text-decoration: none;
  display: block;
}
.ui-datepicker-calendar td a:hover {
  background: #1f5683;
  color: #FFF;
}
.ui-datepicker-calendar th {
  background: #CCC;
  border-bottom: solid 1px #CCC;
}

@media (max-width:767px) {
/*-----▼ max-width: 767px ▼----*/
  
  #pardot-form h1{
    font-size: 24px;
  }
  form.form{width: 100%;}
  .formImg {
    float: none;
    max-width: 100%;
    margin: 0 auto;
    width: auto;
  }
  .formImg img{
    width: 100%;
  }
  .formBeforeTxt {
    width: auto;
    float: none;
  }
  .formWrap {
    width: auto !important;
    float: none;
  }
  .fieldWrap.salesContact {
    width: 100%;
  }
form.form input[type="submit"], form.form input[type="button"] {
  font-size: 16px;
}
p.submit{padding: 0;}
  
  form.form p span {
    width: auto;
    display: inline-block;
    clear: both;
}
  
/*-----▲ max-width: 767px ▲----*/}

@media (max-width:480px) {
  /*-----▼ max-width: 480px ▼----*/
  .fieldWrap.first_name .field-label {
    width: 70px;
  }
  .formWrap .fieldWrap .field-label {
    width: 100% !important;
    text-align: left;
  }
  .fieldWrap.last_name input, .fieldWrap.first_name input {
    width: 100% !important;
  }
  .fieldWrap.last_name {
    margin-right: 0;
  }
  .fieldWrap.last_name, .fieldWrap.first_name {
    display: block;
  }
  .fieldWrap input, .fieldWrap select {
    width: 100% !important;
  }
  
  form.form .required label:after {
    position: relative;
}


  
/*-----▲ max-width: 480px ▲----*/}

.privacypolicy_link{display: block; padding: 10px;}

@media screen and (max-width: 767px) {
/*-----▼ max-width: 767px ▼----*/
.privacypolicy_link{display: block; padding: 10px 0;}

/*-----▲ max-width: 767px ▲----*/}


/*-----------------------------------------------
    お問い合わせ　
------------------------------------------------*/
.contactForm .formImgTxt .tscircleLink{ background: #E0F3FA; padding: 10px; border-radius: 5px; font-size: 14px !important;}
.contactForm .formImgTxt .tscircleLink strong{ font-size: 18px;color: #00BFFF; font-weight: normal;}
.contactForm .formImgTxt .tscircleLink strong a{ color: #00BFFF;}



.contactForm .formWrap{ width: 400px;}
.contactForm .formWrap .fieldWrap .field-label{ width: 120px;}

.contactForm .fieldWrap.functions .field-label{ float: left; margin-right: .5em;}
.contactForm .fieldWrap.functions span.value,
.contactForm .fieldWrap.functions span#confirm_undefined{ display: block; float: left;width: 250px; margin-bottom: 1em;}
.contactForm .fieldWrap.functions span.value span,
.contactForm .fieldWrap.functions span#confirm_undefined span{ display: inline-block; font-size: 13px;}

.contactForm .fieldWrap.FormType__c .field-label{ width: 100%; text-align: left;}
.contactForm .fieldWrap.FormType__c span label{ padding-right: 15px; background: none !important;}
.contactForm .fieldWrap.ref .field-label{ width: 100%; text-align: left;}
.contactForm .fieldWrap.ref textarea{ width: 100%; box-sizing: border-box;}

.contactForm .fieldWrap.CampaignCode__c p {width: 100%; text-align: center;}
.contactForm .fieldWrap.CampaignCode__c .field-label{width: 100%; text-align: center;}
.contactForm .fieldWrap.CampaignCode__c input{width: 270px !important; max-width: 100%;}

.contactForm .fieldWrap input[type="radio"]{width: auto !important;}
.contactForm .fieldWrap .value span{width: auto !important; display: inline-block;}

@media screen and (max-width: 767px) {
/*-----▼ max-width: 767px ▼----*/
 .contactForm .fieldWrap.functions .field-label{ float: none; margin-right: 0;}
.contactForm .fieldWrap.functions span.value,
.contactForm .fieldWrap.functions span#confirm_undefined{ display: block; float: none;width: 100%; margin-bottom: 1em;}
.contactForm .fieldWrap.functions span.value span,
.contactForm .fieldWrap.functions span#confirm_undefined span{ width: auto;}
 
  
/*-----▲ max-width: 767px ▲----*/}



/*-----------------------------------------------
    トライアル
------------------------------------------------*/

.trialForm .formImg { float: right; padding-left:40px; border-left: 1px solid #CCC; margin-left: 30px; margin-bottom: 30px; margin-top: 0;}
.trialForm .formImg .formImgTxt p{ font-size: 14px !important}
.trialForm .formImg img{ width: 340px;position: relative; left: -20px;}
.trialForm .formWrap { background: none; width: auto; float: none; padding: 0;}
.trialForm .formWrap .fieldWrap{  max-width: 420px;}
.trialForm .formWrap .fieldWrap:after{ clear: none;}


.trialForm .formWrap .fieldWrap .field-label{ width: 120px; }

.trialForm .fieldWrap.functions .field-label{ float: left; margin-right: .5em;}
.trialForm .fieldWrap.functions span.value,
.trialForm .fieldWrap.functions span#confirm_undefined{ display: block; float: left;width: 270px; margin-bottom: 1em;}
.trialForm .fieldWrap.functions span.value span,
.trialForm .fieldWrap.functions span#confirm_undefined span{ display: inline-block; font-size: 13px;}
.trialForm .fieldWrap.functions::after{ content: ''; clear:left; height: 0; visibility:hidden; }


.trialForm .fieldWrap.CampaignCode__c,
.trialForm .fieldWrap.CampaignCode__c p{width: 410px; text-align: center;}
.trialForm .fieldWrap.CampaignCode__c .field-label{width: 100%; text-align: center; padding: 0 !important;}
.trialForm .fieldWrap.CampaignCode__c input{width: 270px !important; max-width: 100%;}


.trialForm .fieldWrap.subscription_top{clear: both;}
.trialForm .fieldWrap.subscription_top span.description{text-align: center;}
.trialForm .fieldWrap.subscription_top,
.trialForm .fieldWrap.subscription{max-width: 100%;}

.trialForm .fieldWrap.labelNone{width: 500px; margin: 0 auto; max-width: 100%;}
.trialForm .fieldWrap.labelNone p{padding-bottom: .5em;}

.trialForm .fieldWrap.privacypolicy_link{width: 440px; margin: 0 auto; max-width: 100%;}
.trialForm .fieldWrap.privacypolicy_link p{padding-bottom: 0;}

.trialForm #form_confirm_button,
.trialForm #form_back_button,
.trialForm input[type="submit"]{width: 325px !important; margin: 0 5px 10px; max-width: 100%;}

@media screen and (max-width: 767px) {
/*-----▼ max-width: 767px ▼----*/
.trialForm .formImg { float: none; padding-left:0; border-left: none; margin: 0 auto 30px; max-width: 100%;}
.trialForm .formImg img{ left: 0;}  
.trialForm .formWrap { background: #F4F4F4; width: auto; float: none; padding: 25px;}
.trialForm .fieldWrap.functions span.value,
.trialForm .fieldWrap.functions span#confirm_undefined { display: block; float: none; width: 100%; margin-bottom: 1em;}
.trialForm .fieldWrap.CampaignCode__c,
.trialForm .fieldWrap.CampaignCode__c p{width: 100%; text-align: center;}

  
/*-----▲ max-width: 767px ▲----*/}

.g-recaptcha{ max-width: 100%; overflow: hidden; text-align: center;}
.g-recaptcha > div{ max-width: 100%; overflow: hidden; width: 100% !important;}
.g-recaptcha iframe{ max-width: 100%; overflow: hidden;}
/*-----▼ max-width: 767px ▼----*/
@media screen and (max-width: 767px) {
  .g-recaptcha{ text-align: left;}
  
/*-----▲ max-width: 767px ▲----*/  }

/*-----------------------------------------------
    資料ダウンロード
------------------------------------------------*/
.container.w930 iframe { width: 100%;}
.formImgTxt2{ position: relative; border: 1px solid #999; margin-left:80px; margin-bottom: 30px; padding: 15px 40px; border-radius: 8px; }
.formImgTxt2 p {  font-size: 16px !important;}
.formImgTxt2 ul {margin: 0 !important;}
.formImgTxt2 ul li { list-style: none; color:#00BFFF; font-weight: bold; font-size: 16px !important; text-align: left; margin-bottom: .5em;}
.formImgTxt2 img{ position: absolute; bottom: -30px; left: -80px; width: auto !important;}
/*-----▼ max-width: 767px ▼----*/
@media screen and (max-width: 767px) {
  .formImgTxt2{ margin-left:0px; margin-bottom: 80px; padding: 15px 20px;}
  .formImgTxt2 img{bottom: -80px; left: 0;}
  
/*-----▲ max-width: 767px ▲----*/  }
/*-----------------------------------------------
    チェックボックス等修正
------------------------------------------------*/
/*-----▼ max-width: 767px ▼----*/
@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  select{
    font-size: 18px !important;
  }

  .form input[type="checkbox"],
  .form input[type="radio"],
  .contactForm .fieldWrap input[type="radio"]{
    width: 24px !important;
    height: 24px !important;
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    bottom: 2px;
  }
 .form .pd-checkbox span label, form.form .pd-radio span label{
    font-size: 18px;
    line-height: 24px;
   vertical-align: middle;
  }
  .form  span.value span, .form span#confirm_undefined span,form.form .pd-checkbox .value>span,form.form .pd-radio .value>span {
    padding: 5px 8px 20px;
    box-sizing: border-box;
  }
  
  .form .fieldWrap .value span{
    padding: 5px 8px
  }
  
  form.form .pd-checkbox span label, form.form .pd-radio span label {
  display: inline;
}
    .content .container p {
  font-size: 18px;
}
  .trialForm .fieldWrap.labelNone{width: 100%;}
  .trialForm .fieldWrap.privacypolicy_link{width: 100%;}  
/*-----▲ max-width: 767px ▲----*/  }