/**
 * EF入力画面のスタイル
 * EFの埋め込み先のCSSの干渉を防ぐため
 * 固有のIDを指定かつimportant属性を付与している
 */
 #ef-wrapper table {
   border-collapse: collapse !important;
   border-spacing: 0 !important;
   width: 100%;
 }

 #ef-wrapper {
   font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !important;
   text-align: left !important;
   max-width: 1000px !important;
 }

#ef-wrapper th, #ef-wrapper td {
   border-bottom: 1px solid #ddd;
   padding: 2.5%;
 }
#ef-wrapper th {
  vertical-align: center;
  font-weight: 700;
 }
#ef-wrapper th span {
  display: block;
  padding: 1% 2.5%;
  color: #fff;
  font-size: 1em;
  background: #e53715;
  float: right;
  font-weight: 700;
 }
#ef-wrapper th .cf-red {
  background-color: #e53715;
 }
#ef-wrapper th .cf-gray {
  background-color: #8b8b8b;
 }
#ef-wrapper td {
  position: relative;
  width: 65%;
 }
 
 #ef-wrapper input,#ef-wrapper select, #ef-wrapper textarea{
   font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !important;
   position: relative;
   width: 100%;
   padding: 2.5%;
 }

.form-radio {
  margin-bottom: 1.5%;
}

.form-group {
  margin-bottom: 2.5%;
}
 
.button-wrapper {
   text-align: center !important;
   margin: 20px 0 !important;
 }
.button-wrapper p {
   display: inline !important;
 }
 #ef-wrapper input#cf_submit,
 #ef-wrapper input#cf_cancel{
   margin-top:0.5em !important;
   width:270px !important;
   height: 64px !important;
   display:inline-block !important;
   letter-spacing:2px !important;
   text-align:center !important;
   line-height:60px !important;
   font-weight:bold !important;
   font-size:30px !important;
   cursor:pointer !important;
   -moz-box-sizing:border-box !important;
   -webkit-box-sizing:border-box !important;
   box-sizing:border-box !important;
   -moz-border-radius:10px !important;
   -webkit-border-radius:10px !important;
   border-radius:5px !important;
   outline: 0 !important;
   text-indent: 0 !important;
   box-shadow: 0 4px 0 rgb(0 0 0 / 10%) !important;
 }
 @media (max-width: 710px) {
   #ef-wrapper input#cf_submit,
   #ef-wrapper input#cf_cancel{
     margin:30px 0 0 0 !important;
   }
 }
 
 #ef-wrapper input[type="submit"],
 #ef-wrapper input[type="button"]{
   margin:60px auto 0 auto !important;
   padding: 0 !important;
   height:88px !important;
   display:block !important;
   letter-spacing:2px !important;
   text-align:center !important;
   line-height:88px !important;
   font-weight:bold !important;
   font-size:34px !important;
   cursor:pointer !important;
   -moz-box-sizing:border-box !important;
   -webkit-box-sizing:border-box !important;
   box-sizing:border-box !important;
   -moz-border-radius:10px !important;
   -webkit-border-radius:10px !important;
   border-radius:10px !important;
   -webkit-appearance: none !important;
 }
 #ef-wrapper input[type="submit"]:hover,
 #ef-wrapper input[type="button"]:hover {
   -webkit-filter: brightness(1.1) !important;
   filter: brightness(1.1) !important;
 }
 #ef-wrapper input#cf_submit {
   background:#e75200 !important;
   color: #fff !important;
   border: 2px solid #e75200 !important;
 }
 #ef-wrapper input#cf_submit.inactive {
   border: 2px solid rgb(204, 204, 204) !important;
   opacity: 0.5 !important;
 }
 #ef-wrapper .visibility-hidden {
   visibility: hidden;
 }
 #ef-wrapper input#cf_cancel {
   background:#ffffff !important;
   color: #888 !important;
   border: 2px solid #888 !important;
 }
 #wonder_efblock {
   width: 95% !important;
     margin: 15px auto !important;
 }
 
 #ef-wrapper input[type="text"],
 #ef-wrapper input[type="tel"],
 #ef-wrapper input[type="url"]{
   -webkit-appearance:none !important;
   outline:none !important;
   display:inline !important; /* レスポンシブ用に追加 */
   border:1px solid #dddddd !important;
   font-size:14px !important;
   color:#4c4c4c !important;
   -moz-box-sizing:border-box !important;
   -webkit-box-sizing:border-box !important;
   box-sizing:border-box !important;
   -moz-border-radius:5px !important;
   -webkit-border-radius:5px !important;
   border-radius:5px
 }
 #ef-wrapper input#last_name,
 #ef-wrapper input#last_name_kana,
 #ef-wrapper input#name_alphabet1 {
   width: 98% !important;
   display: block !important;
 }
 #ef-wrapper input#first_name,
 #ef-wrapper input#first_name_kana,
 #ef-wrapper input#name_alphabet2 {
   width: 98% !important;
   display: block !important;
 }
 #ef-wrapper .ef-if-wide-horizontal {
   width: 49.5% !important;
   display: inline !important;
 }
 @media (max-width: 700px) {
   #ef-wrapper .ef-if-wide-horizontal {
     width: 100% !important;
     display: block !important;
   }
   #ef-wrapper input#last_name,
   #ef-wrapper input#last_name_kana,
   #ef-wrapper input#name_alphabet1 {
     width: 100% !important;
   }
   #ef-wrapper input#first_name,
   #ef-wrapper input#first_name_kana,
   #ef-wrapper input#name_alphabet2 {
     width: 100% !important;
   }
 }
 
 #ef-wrapper select{
   outline:none !important;
   padding:10px !important;
   display:inline !important; /* レスポンシブ用に追加 */
   border:1px solid #dddddd !important;
   font-size:16px !important;
   color:#4c4c4c !important;
   -moz-box-sizing:border-box !important;
   -webkit-box-sizing:border-box !important;
   box-sizing:border-box !important;
   -moz-border-radius:5px !important;
   -webkit-border-radius:5px !important;
   border-radius:5px
 }
 
 #ef-wrapper textarea{
   -webkit-appearance:none !important;
   outline:none !important;
   padding:10px !important;
   display:inline !important; /* レスポンシブ用に追加 */
   border:1px solid #dddddd !important;
   font-size:16px !important;
   color:#4c4c4c !important;
   -moz-box-sizing:border-box !important;
   -webkit-box-sizing:border-box !important;
   box-sizing:border-box !important;
   -moz-border-radius:5px !important;
   -webkit-border-radius:5px !important;
   border-radius:5px !important;
   max-width:100% !important;
   min-width:100% !important;
 }
 
 #ef-wrapper input[type="checkbox"]{
   width:25px !important;
   height:25px !important;
   vertical-align:bottom !important;
   margin: 0 5px 2px 0 !important;
 }
 
 #ef-wrapper [type="radio"]{
   width:25px !important;
   height:25px !important;
   vertical-align:bottom !important;
   margin: 0 5px 2px 0 !important;
 }
 
 #ef-wrapper .input-zip,
 #ef-wrapper .input-tel,
 #ef-wrapper .input-fax {
   width: 38% !important;
 }
 #ef-wrapper .ef-character-type-attention {
   margin: 0 0 0 10px !important;
   font-weight: normal !important;
   font-size: 14px !important;
 }
 
 #ef-wrapper #form-info-area{
   text-align: left !important;
   width:170px !important;
   margin: 10px auto 10px 680px !important;
   border:1px #6bb34e solid !important;
   color:#6bb34e !important;
   background: #FFF !important;
   border-radius:5px !important;
 }
 
 #ef-wrapper #form-info-area p{
   margin: 5px 10px !important;
 }
 #ef-wrapper .ok-icon,
 #ef-wrapper .ng-icon{
   width: 15px !important;
   margin: 0 3px 2px !important;
   vertical-align: middle !important;
   display: none !important;
 }
 
 #ef-wrapper .cf_req_icon_style{
   /* 必須アイコンの色合いを柔らかな感じに修正 */
   display: block !important;
   padding: 0px 6px !important;
   color: #fff !important;
   font-size: 1em !important;
   background: #e53715 !important; /*レスポンシブ用に追加*/
   margin-right: 10px !important;
   float: right !important;
 }
 
 #ef-wrapper .required {
   white-space: normal !important;
 }
 
 #ef-wrapper .wcf-err-line{
   font-size: 14px !important;
   display: none !important; /*レスポンシブ用に追加*/
   background-color: #FF5F5F !important;
   color: #FFFFFF !important;
   margin: 0 auto 10px !important;
   padding-left: 10px !important;
   padding-right: 10px !important;
   padding-bottom: 5px !important;
   padding-top: 5px !important;
   white-space: nowrap !important;
   text-align: center !important;
   position: relative !important;
 }
 
 #ef-wrapper .wcf-err-line::after {
     position: absolute;
     display: block;
     border-width: 0;
     background-color: black;
     border-radius: 2px;
     content: "";
     transform: rotate(45deg);
 }
 #ef-wrapper .wcf-err-line::after {
   position: absolute !important;
   background-color: #FF5F5F !important;
   width: 8px !important;
   height: 8px !important;
   left: 50% !important;
 }
 .wonder-terms-block {
   margin-bottom: 30px !important;
   padding: 15px !important;
   background: #eee !important;
   text-align: left !important;
 }
 .wonder-terms-block .terms-inner{
   height: 180px !important;
   margin-top: 10px !important;
   margin-bottom: 15px !important;
   padding: 15px !important;
   overflow-y: scroll !important;
   line-height: 1.7 !important;
   font-size: 12px !important;
   background: #fff !important;
   border: 1px solid #ccc !important;
 }
 .wonder-terms-block p.center strong {
     font-weight: bold !important;
     font-size: 17px !important;
     border: none !important;
   text-align: center !important;
 }
 .wonder-terms-block p {
     margin-bottom: 0 !important;
     margin: 0 0 10px !important;
 }
 .wonder-terms-block p strong {
     font-weight: bold !important;
     border-bottom: 1px dotted #ddd !important;
     display: block !important;
     margin: 0 0 5px !important;
     padding: 0 0 5px !important;
 }
 
 /**
  * 画面上部のプログレスのスタイル
  */
 #ef-wrapper .cd-breadcrumb {
   background-color: #edeff0 !important;
   border-radius: 0 !important;
   line-height: 1.5 !important;
   margin: 0 0 20px 0 !important;
 }
 #ef-wrapper .cd-breadcrumb:after {
   content: "" !important;
   display: table !important;
   clear: both !important;
 }
 #ef-wrapper .cd-breadcrumb li {
   display: block !important;
   float: left !important;
   margin: 0.5em 0 !important;
 }
 #ef-wrapper .cd-breadcrumb li::after {
   /* this is the separator between items */
   display: inline-block !important;
   content: '\00bb' !important;
   margin: 0 .6em !important;
   color: #959fa5 !important;
 }
 #ef-wrapper .cd-breadcrumb li > * {
   /* single step */
   display: inline-block !important;
   font-size: 14px !important;
   color: #2c3f4c !important;
   text-align: center !important;
 }
 #ef-wrapper .cd-breadcrumb li.current > * {
   /* selected step */
   color: #96c03d !important;
 }
 #ef-wrapper .cd-breadcrumb.triangle {
   /* reset basic style */
   background-color: transparent !important;
   padding: 0 !important;
   display: flex !important;
     justify-content: center !important;
   transform: translateZ(0px);
   -webkit-transform: translateZ(0px);
 }
 #ef-wrapper .cd-breadcrumb.triangle li {
   position: relative !important;
   padding: 0 !important;
   margin: 4px 4px 4px 0 !important;
   border: 1px solid #bbb !important;
 }
 #ef-wrapper .cd-breadcrumb.triangle li:last-of-type {
   margin-right: 0 !important;
 }
 #ef-wrapper .cd-breadcrumb.triangle li > * {
   width: 210px !important;
   position: relative !important;
   padding: 6px 10px 6px 25px !important;
   color: #2c3f4c !important;
   background-color: #edeff0 !important;
   /* the border color is used to style its ::after pseudo-element */
   border-color: #edeff0 !important;
 }
 #ef-wrapper .cd-breadcrumb.triangle li.current > * {
   /* selected step */
   color: #ffffff !important;
   background-color: #6bb34e !important;
   border-color: #6bb34e !important;
 }
 #ef-wrapper .no-touch .cd-breadcrumb.triangle a:hover {
   /* steps already visited */
   color: #ffffff !important;
   background-color: #2c3f4c !important;
   border-color: #2c3f4c !important;
 }
 #ef-wrapper .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
   /*
   li > *::after is the colored triangle after each item
   li::after is the white separator between two items
   */
   content: '' !important;
   position: absolute !important;
   top: 0 !important;
   left: 100% !important;
   content: '' !important;
   height: 0 !important;
   width: 0 !important;
   /* 48px is the height of the <a> element */
   border: 18px solid transparent !important;
   border-right-width: 0 !important;
   border-left-width: 20px !important;
 }
 #ef-wrapper .cd-breadcrumb.triangle li::after {
   /* this is the white separator between two items */
   z-index: 1 !important;
   -webkit-transform: translateX(4px) !important;
   -moz-transform: translateX(4px) !important;
   -ms-transform: translateX(4px) !important;
   -o-transform: translateX(4px) !important;
   transform: translateX(1px) !important;
   border-left-color: #bbb !important;
   /* reset style */
   margin: 0 !important;
 }
 #ef-wrapper .cd-breadcrumb.triangle li:last-of-type::after {
   border-left-color: #bbb !important;
 }
 #ef-wrapper .cd-breadcrumb.triangle li > *::after {
   /* this is the colored triangle after each element */
   z-index: 2 !important;
   border-left-color: inherit !important;
 }
 @-moz-document url-prefix() {
   #ef-wrapper .cd-breadcrumb.triangle li::after,
   #ef-wrapper .cd-breadcrumb.triangle li > *::after {
     border-left-style: dashed !important;
   }
 }

 #ef-wrapper .img-responsive {
     display: block !important;
     max-width: 100% !important;
     height: auto !important;
 }
 #ef-wrapper.ef-container {
     margin-right: auto !important;
     margin-left: auto !important;
 }
 #ef-wrapper .ef-clearfix:before,
 #ef-wrapper .ef-clearfix:after,
 #ef-wrapper.ef-container:before,
 #ef-wrapper.ef-container:after {
     content: " " !important;
     display: table !important;
 }
 #ef-wrapper .ef-clearfix:after,
 #ef-wrapper.ef-container:after {
     clear: both !important;
 }
 
 #ef-wrapper .ef-center-block {
     display: block !important;
     margin-left: auto !important;
     margin-right: auto !important;
 }
 #ef-wrapper .ef-pull-right {
     float: right !important;
 }
 #ef-wrapper .ef-pull-left {
     float: left !important;
 }
 #ef-wrapper .wcf-err-line {
   width: 180px !important;
   cursor: pointer !important;
 }
 #ef-wrapper #prefectures {
   width: 300px !important;
 }
 #ef-wrapper #phone_number {
   width: 300px !important;
 }
 #ef-wrapper #fax {
   width: 300px !important;
 }
 #ef-wrapper #postal_code {
   width: 270px !important;
 }
 #ef-wrapper #company_name_vmessage {
   width: 227px !important;
 }
 #ef-wrapper #name_kana_vmessage {
     width: 243px !important;
 }
 #ef-wrapper #name_alphabet_vmessage {
     width: 270px !important;
 }
 #ef-wrapper #fax_vmessage {
     width: 210px !important;
     margin-right: 56% !important;
 }
 #ef-wrapper #company_url_vmessage {
     width: 245px !important;
 }
 #ef-wrapper #name_vmessage {
   width: 215px !important;
 }
 #ef-wrapper #mail_address_vmessage {
   width: 286px !important;
 }
 #ef-wrapper #memo_vmessage {
   width: 274px !important;
 }
 #ef-wrapper #street_address_vmessage {
   width: 215px !important;
   margin-right: 55% !important;
 }
 #ef-wrapper #phone_number_vmessage {
   width: 244px !important;
   margin-right: 55% !important;
 }

 .zip-label {
  display: inline-block;
  margin-right: 1.5%;
 }

 .error {
  background-color: rgb(255, 218, 185);
  margin-top: 40px;
 }

 div.error {
  position: absolute;
  top: 15px;
  left: 5%;
  display: block;
  background-color: #ff5f5f;
  padding: 1% 2.5%;
  text-align: center;
  color: #fff;
  font-weight: 700;
  margin: 0;
 }

 div.error::after {
  position: absolute;
  bottom: -12%;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 8px;
  height: 5px;
  background-color: #ff5f5f;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
 }

 h2 {
  text-align: center;
  padding-bottom: 2.5%;
  color: #e53715;
  font-weight: 700;
 }

 @media screen and (min-width: 561px) {
  h2 {
    font-size: 44px;
   }
}

 @media screen and (max-width: 560px) {
  h2 {
    font-size: 32px;
   }
}

.thanks-txt {
  text-align: center;
  font-size: 1.1em;
  padding-bottom: 3%;
}

.thanks-btn {
  width: 300px;
  margin: 0 auto;
}

.thanks-btn a {
  background: #e75200;
  color: #fff;
  border: 2px solid #e75200;
  display: block;
  letter-spacing: 2px;
  text-align: center;
  font-weight: bold;
  font-size: 26px;
  border-radius: 10px;
  padding: 5% 0;
  box-shadow: 0 4px 0 rgb(0 0 0 / 10%);
  text-decoration: none;
}