@charset "UTF-8";


/* ==========================================================
 mkto reset
========================================================== */
.info_form {
  /* padding-top: 40px; */
}
form.mktoForm,
.mktoFormCol,
.mktoFieldWrap {
  width: 100% !important;
  padding: 0;
  font-family: MyYuGothicM, '游ゴシック体', 'Yu Gothic', YuGothic, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
}
.mktoForm.mktoLayoutAbove .mktoLabel {
  font-family: MyYuGothicM, '游ゴシック体', 'Yu Gothic', YuGothic, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
.mktoForm .mktoFormRow {
  /*margin-bottom: 16px;*/
}
.mktoForm .mktoFormCol{
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  float: none !important;
  /* min-height: 0 !important; */
}
.mktoForm .mktoOffset {
  display: none;
}
.mktoForm .mktoFieldWrap {
  display: flex;
  flex-direction: column;
}
.mktoForm .mktoGutter,
.mktoForm .mktoClear {
  display: none;
}
@media screen and (max-width: 768px) {
 .mktoForm .mktoFieldWrap {
    flex-direction: column;
  }
  .mktoForm .mktoFormCol{
    margin-bottom: 10px !important;
  }

}
/*label, input-----------------------------------------------*/
.mktoForm .mktoLabel {
  position: relative;
  height: auto;
  font-size: 12px;
  line-height: 20px;
  /* font-weight: normal !important; */
  /* padding: 10px 40px 10px 0 !important; */
  /* margin-right: 20px !important; */
  flex: auto;
  float: none !important;
  width: 100%;
}
/*IE対策*/
@media all and (-ms-high-contrast: none) {
  .mktoForm .mktoLabel {
    flex: 0 0 200px;
  }
}
.mktoForm .mktoAsterix,
.mktoForm.mktoLayoutAbove .mktoRequiredField .mktoAsterix {
  /*  「＊」用スタイル*/
  position: absolute;
  top: 5px;
  right: 0;
  width: auto;
  height: auto;
  font-size: 7px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: #ff6e00 !important;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0 !important;
  float: none !important;

/*  「必須」用スタイル*/
  /*position: absolute;
  top: 8px;
  right: 0;
  width: 56px;
  height: 20px;
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  color: #fff !important;
  background-color: #ff0000;
  border-radius: 10px;
  padding: 0 !important;
  float: none !important;*/
}
/*フォーム上段に注釈追加*/
/* .info_form::before {
  content: "＊は必須項目です";
  display: block;
  width: 100%;
  font-size: 10px;
  line-height: 1.6;
  text-align: right;
} */
.mktoForm input[type=text],
.mktoForm input[type=email],
.mktoForm input[type=tel],
.mktoForm input[type=number],
.mktoForm textarea,
.mktoForm select {
  width: 100% !important;
  height: auto;
  min-height: 0 !important;
  margin: 0;
  padding: 0 4px !important;
  background-color: #fff !important;
  border: 1px solid #9b9b9b !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1em !important;
  float: none !important;
  height: 28px;
  /* flex: 0 1 430px; */
}
.mktoForm textarea {
  padding: 10px !important;
  min-height: 5em !important;
  line-height: 20px !important;
}
.mktoForm input::placeholder {
  color: #999 !important;
  font-weight: normal !important;
}
.mktoHtmlText.mktoHasWidth {
  width: auto !important;
  font-size: 10px;
  line-height: 120%;
  margin-bottom: 13px;
}
@media screen and (max-width: 768px) {
.mktoForm .mktoAsterix,
  .mktoForm.mktoLayoutAbove .mktoRequiredField .mktoAsterix {
    top: 0;
  }
  .mktoForm .mktoLabel,
  .mktoForm input[type=text],
  .mktoForm input[type=email],
  .mktoForm input[type=tel],
  .mktoForm input[type=number],
  .mktoForm textarea,
  .mktoForm select {
    flex: auto;
  }
  .mktoHtmlText.mktoHasWidth {
  padding-left: 0
  }
}
/*checkbox radio-----------------------------------------------------------*/
.mktoForm .mktoRadioList,
.mktoForm .mktoCheckboxList,
.mktoForm.mktoLayoutAbove .mktoRadioList,
.mktoForm.mktoLayoutAbove .mktoCheckboxList {
  float: none !important;
  clear: none !important;
  padding: 5px 0 5px 0 !important;
  margin: 0 !important;
  border: none !important;
  /* width: 430px !important; */
}
.mktoForm input[type=checkbox],
.mktoForm input[type=radio] {
  width: 0 !important;
  height: 0 !important;
  opacity: 0;
  position: absolute;
}
.mktoForm .mktoRadioList > label,
.mktoForm .mktoCheckboxList > label {
  display: inline-block !important;
  position: relative;
  margin: 0 !important;
  padding: 0px 5px 0px 20px !important;
  float: none !important;
  font-size: 10px;
  line-height: 24px !important;
  font-family: MyYuGothicM, '游ゴシック体', 'Yu Gothic', YuGothic, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif
}
.mktoForm input[type=checkbox] + label:before,
.mktoForm input[type=radio] + label:before {
  content: "";
  position: absolute;
  margin: 0 !important;
  top: 3px;
  left: 0;
  width: 16px !important;
  height: 16px !important;
  box-shadow: none !important;
  font-size: 16px !important;
  /* line-height: normal !important; */
  border: 1px solid #aeb0b6;
  background-color: #fff;
}
.mktoForm input[type=checkbox]:checked + label:before {
    content: "\2713 ";
    text-align: center;
    color: #000;
}
.mktoForm input[type=radio]:checked + label:before {
  background-position: center center !important;
}
@media screen and (max-width: 768px) {
  .mktoForm .mktoLabel {
    width: 100% !important;
    margin-right: 0 !important;
    padding: 0 40px 5px 0 !important;
    border-bottom: none;
    font-weight: bold !important;
  }
  .mktoForm input[type=text],
  .mktoForm input[type=email],
  .mktoForm input[type=tel],
  .mktoForm input[type=number],
  .mktoForm select {
    width: 100% !important;
    min-height: 2em !important;
  }
  .mktoForm textarea {
    width: 100% !important;
  }
  .mktoForm .mktoRadioList,
  .mktoForm .mktoCheckboxList,
  .mktoForm.mktoLayoutAbove .mktoRadioList,
  .mktoForm.mktoLayoutAbove .mktoCheckboxList {
    padding: 0 !important;
    width: 100% !important;
  }
  .mktoForm .mktoRadioList > label,
  .mktoForm .mktoCheckboxList > label {
    font-size: 14px;
    width: auto !important;
  }
}
/*ボタン----------------------------------------------------*/
.mktoForm .mktoButton {
  position: relative;
  display: flex;
  width: 100%;
  height: 72px;
  text-align: center;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 6px;
  margin: 16px 0;
  padding: 0 8px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 6px 10px -2px rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.2) !important;
  font-family: MyYuGothicM, '游ゴシック体', 'Yu Gothic', YuGothic, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  font-size: 20px !important;
  font-weight: bold !important;
  color: #fff !important;
  background-color: #EB4F25 !important;
  background-image: none !important;
  border: 3px solid #EB4F25 !important;
}
.mktoForm .mktoButton:hover {
  background: #fff !important;
   color: #222e48 !important;
}

.mktoButtonRow,
.mktoButtonWrap {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
}

/*電話番号に欄外注意書き追加----------------------------------------------------*/
input#Phone {
  /* margin-bottom: 20px;
  height: 40px; */
}
input#Phone ~ div.mktoClear {
  display: none;
  /* position: absolute; */
  bottom: 0;
  /* left: 260px; */
  left: 410px;
  width: auto;
  height: 20px;
}
input#Phone ~ div.mktoClear::before {
  display: inline;
  content: "※日中繋がりやすい電話番号をご記入ください";
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  color: #666;
}
@media screen and (max-width: 768px) {
  input#Phone ~ div.mktoClear {
    left: 0;
  }
}
/*顧客コードに欄外注意書き追加----------------------------------------------------*/
input#formcode__c {
  margin-bottom: 20px;
  height: 40px;
}
input#formcode__c ~ div.mktoClear {
  display: block;
  position: absolute;
  bottom: 0;
  left: 410px;
  width: auto;
  height: 20px;
}
input#formcode__c ~ div.mktoClear::before {
  display: inline;
  content: "※半角数字でご記入ください";
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  color: #666;
}
@media screen and (max-width: 768px) {
  input#formcode__c ~ div.mktoClear {
    left: 0;
  }
}

/*姓名分離----------------------------------------------------*/
.mktoForm .mktoFormRow.name-l {
  /* width: calc(50% + 80px); */
  width: calc(50% - 10px);
  float: left;
  clear: none;
}
.mktoForm .mktoFormRow.name-f {
  width: calc(50% - 10px);
  float: right;
  clear: none;
  justify-content: flex-end;
}
.mktoForm .mktoFormRow.name-f .mktoFieldWrap {
  justify-content: flex-end;
}
.mktoFormRow.name-f label#LblFirstName {
  /* display: none; */
  flex: 0 0 18px;
  margin-right: 10px !important;
  padding-right: 0 !important;
}
.mktoFormRow.name-f label#LblFirstName .mktoAsterix {
  /* display: none; */
}
.mktoFormRow.name-l input#LastName,
.mktoFormRow.name-f input#FirstName {
  /* height: 40px; */
  /* width: 100px !important; */
  flex: none;
}
@media screen and (max-width: 768px) {
  .mktoForm .mktoFormRow.name-l,
  .mktoForm .mktoFormRow.name-f {
    width: calc(50% - 10px);
  }
  .mktoFormRow.name-f label#LblFirstName {
    display: block;
  }
  .mktoFormRow.name-f label#LblFirstName .mktoAsterix {
    display: block;
  }
  .mktoFormRow.name-l input#LastName,
  .mktoFormRow.name-f input#FirstName {
    width: 100% !important;
    flex: none;
  }
  /* 2カラムフォーム 0 0 18px→書き換え */
  .mktoFormRow.name-f label#LblFirstName {
    flex: 0 0 24px; 
  }
  /* /2カラムフォーム 0 0 18px→書き換え */
}

/* only IE10-11 -----------------------------------------*/
@media all and (-ms-high-contrast: none) {
  .mktoForm.mktoLayoutAbove .mktoRequiredField .mktoAsterix,
  .mktoForm select.mktoField,
  .mktoForm input[type=text],
  .mktoForm input[type=email],
  .mktoForm input[type=tel],
  .mktoForm textarea,
  .mktoForm select.mktoField {
    font-family: Arial, 'メイリオ', Meiryo, MyYuGothic, '游ゴシック体', 'Yu Gothic', YuGothic, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important;
  }
}
/* アーカイブセミナーページ用 */
.mktoForm input[type=radio] + label:before {
  border-radius: 1em;
}
.mktoForm input[type=radio]:checked + label:before {
  background-image: url(../images/dot-bk.png);
  background-position: 3px 3px;
  background-repeat: no-repeat;
}
.mktoForm input[type=checkbox]:checked + label:before, .mktoForm input[type=radio]:checked + label:before {
  text-align: center;
  color: #000;
}
.mktoForm input[type=radio]:checked + label:before {
  background-image: url(https://go.kaonavi.jp/js/forms2/images/dot-bk.png);
  background-position: center center !important;
  background-repeat: no-repeat;
}

.mktoForm .input-disable {
    display:none !important;
}

.mktoForm select.mktoField{
  height: 28px;
}

/* 2カラムフォーム用 */
@media all and (max-width:768px){
  .mktoForm .mktoLabel{
    font-size: 16px;
  }
  .mktoForm input[type=text], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm textarea, .mktoForm select{
    font-size: 14px!important;
  }
}