/* @import url('http://example.com/example_style.css'); */
/*<fieldset class="form-columns-1">
    <div class="hs-fieldtype-text field hs-form-field">
        <label>
            <span>会社名</span><span class="hs-form-required">*</span>
        </label>
        <div class="input">
            <input  name="company" required placeholder="" type="text" class="hs-input" inputmode="text" autocomplete="organization" value="">
        </div>
    </div>
</fieldset>*/

/***** FORM *****/
.pcaForm { font-size: 1.1rem; max-width: 880px; margin: 0 auto 60px; text-align: left; color: #222;}
.pcaForm * { font-family: inherit;}
.pcaForm fieldset[class^="form-columns"] { max-width: none;}
.pcaForm textarea[name="temporary_textarea_02"]　{ height: 70px;}
.pcaForm input[type=text],
.pcaForm input[type=url],
.pcaForm input[type=email],
.pcaForm input[type=tel],
.pcaForm input[type=number],
.pcaForm input[type=date],
.pcaForm textarea,
.pcaForm select
{ height: 46px; border: 1px solid #ccc; border-radius: 6px; background: #fcfbfb; padding: 10px; font-size: 1.1rem;}

.pcaForm .form-columns-1 { margin: 10px 0:}
.pcaForm .form-columns-2 { display: flex; margin: 10px 0:}
.pcaForm .multi-container { margin-top: 20px;}

#section_1column .pcaForm input[type=text],
#section_1column .pcaForm input[type=url],
#section_1column .pcaForm input[type=email],
#section_1column .pcaForm input[type=tel],
#section_1column .pcaForm input[type=number],
#section_1column .pcaForm input[type=date],
#section_1column .pcaForm textarea, 
#section_1column .pcaForm select
{ width: 100%;}

.pcaForm .input { padding: 0 5px;}
.pcaForm input::placeholder,
.pcaForm textarea::placeholder
{ color: #999;}

/*チェックボックスとラジオの処理*/
.pcaForm input[type=radio],
.pcaForm input[type=checkbox] 
{ height: 22px; width: 22px !important; margin-right: 12px; vertical-align: top;}
.pcaForm .hs-form-checkbox { font-size: 1.1rem; margin: 7px 0;}

/* 各フォームの入力部分（会社名など） */
.pcaForm .hs-form-field { position: relative; clear: both; margin: 5px 0 0 0; width: 100%; min-height: 2em;}
.pcaForm .hs-form-field > label { background: linear-gradient(180deg, #fbfdff, #fff); color: #222; padding: 2px 5px 0; display: block; letter-spacing: 0.15em;}
.pcaForm .hs-form-field legend.hs-field-desc { color: #666; font-size: 12px;}
.pcaForm .hs-form-radio { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 3px dotted #ccc; font-size: 14px;}

/*入力必須*/
.hs-form-required { color: #D30D0D;}
.pcaForm .hs-form-required:after { border-radius: 3px; border: 1px solid #ffafaf; background: #fff; content: '必須' !important; padding: 0 2px; margin-left: 5px; font-size: 0.8rem;}

/*エラーメッセージ*/
.pcaForm .hs-error-msg { position: relative; background: #e7dada; margin: 0 0 0 10px; padding: 2px 3px; text-align: left; color: #8a3737; font-size: 0.8rem; border-radius: 5px;}
.pcaForm .hs-error-msg:after{ border: solid transparent; content: ''; height: 0; width: 0; pointer-events: none; position: absolute; border-color: rgba(247, 0, 0, 0);
    border-top-width: 9px; border-bottom-width: 9px; border-left-width: 6px; border-right-width: 6px; margin-left: -6px; border-bottom-color: #e7dada; bottom:100%;
    left: 20%;}
.pcaForm .hs_error_rollup { margin: 20px auto 20px; text-align: center; color: #D30D0D;}

/*お問い合わせのときはマージンを開ける*/
.pcaForm .hs-form-field.hs_message { margin: 20px 0 0 0;}

/*個人情報チェックなどのチェックボックス**************************************/
/* チェックボックスの高さを揃える */
.hs-form-booleancheckbox { display: flex; align-items: center; gap: 8px;}
.hs-form-booleancheckbox .hs-input[type="checkbox"] { height: 32px; margin: 0 10px 20px 0; flex-shrink: 0;}
.hs-form-booleancheckbox .hs-form-booleancheckbox-display span { line-height: 1.4;}

/*連絡が欲しい場合の注意書き*/
.pcaForm .hs_demo_need { margin: 20px 0 0;} 
.pcaForm .contact_check { margin: 0 10px; font-size: 0.8rem; color: #666;}

/*個人情報の取り扱いについて同意するのチェックボックス修正*/
.pcaForm .hs_privacy_agree { margin: 30px auto; text-align: center; font-size: 1.1rem;}
/***************************************/

/* 送信 */
.pcaForm .actions { text-align: center;}
.pcaForm [type=submit] { background: #f0831f; width: 90%; color: #fff; border: none; font-size: 1.2rem; font-weight: bold; position: relative; height: 60px; cursor: pointer; border-radius: 10px;}
.pcaForm [type=submit]:before { content: ''; position: absolute; width: 9px; height: 16px; vertical-align: middle; top: 50%; right: 35px; transform: translateY(-50%);}
.pcaForm [type=submit]:hover { background-color: rgba(238,160,90,0.8);}

/*テキストエリアの広さ*/
.pcaForm textarea[rows="1"] { height: 2em;}
.pcaForm textarea[rows="2"] { height: 3.4em;}
.pcaForm textarea[rows="3"] { height: 4.6em;}
.pcaForm textarea[rows="4"] { height: 5.8em;}
.pcaForm textarea[rows="5"] { height: 7em;}
.pcaForm textarea[rows="6"] { height: 8.2em;}
.pcaForm textarea[rows="7"] { height: 9.4em;}
.pcaForm textarea[rows="8"] { height: 10.6em;}

/*スマホサイズ設定*/
@media only screen and (max-width: 768px) {
  .pcaForm input[type=text],
  .pcaForm input[type=url],
  .pcaForm input[type=email],
  .pcaForm input[type=tel],
  .pcaForm input[type=number],
  .pcaForm input[type=date],
  .pcaForm textarea,
  .pcaForm select
  { height: 38px; padding: 5px; font-size: 0.9rem;}
  
/*チェックボックスとラジオの処理*/
  .pcaForm .hs-form-checkbox { font-size: 0.8rem;}
  
  .pcaForm .hs-form-field { margin: 0;}
  .pcaForm .hs-form-field > label { font-size: 0.9rem;}
  
 /*個人情報の取り扱いについて同意するのチェックボックス修正*/
  .pcaForm .hs_privacy_agree { margin: 20px auto; font-size: 0.9rem;}
  .pcaForm .hs_privacy_agree input[type=checkbox]  { height: 26px;}
}

/* article_template_2_columns_form の場合の色変更*/
#two__columns #sectionForm .hs-form-field > label { background: #e8f2fb;}
#two__columns #sectionForm .pcaForm .hs-form-field > label { float: left;}

.pcaForm textarea[name="message"], .pcaForm textarea[name="temporary_textarea_01"] { padding: 10px 10px 10px 20px; height: 200px;}

@media only screen and (max-width: 768px) {
  .pcaForm { width: 100%; padding: 0;}
  
  .pcaForm input[type=text],
  .pcaForm input[type=url],
  .pcaForm input[type=email],
  .pcaForm input[type=tel],
  .pcaForm input[type=number],
  .pcaForm input[type=date],
  .pcaForm textarea,
  .pcaForm select
  { width: 100%; font-size: 0.9rem;}
  
  #section_1column .pcaForm input[type=text],
  #section_1column .pcaForm input[type=url],
  #section_1column .pcaForm input[type=email],
  #section_1column .pcaForm input[type=tel],
  #section_1column .pcaForm input[type=number],
  #section_1column .pcaForm input[type=date],
  #section_1column .pcaForm textarea, 
  #section_1column .pcaForm select
  { margin: 0px;}
  .pcaForm .hs-error-msg { background: #e7dada; margin: 0; padding: 2px 3px; font-size: 0.6rem;}
}

@media only screen and (min-width: 769px) {
  #two__columns .pcaForm { width: 100%; padding: 0; }
  #two__columns .mktoFieldWrap > label { width: 100% !important; border-bottom: 1px solid #c8d6e1;}
  #two__columns [type=submit] { width: 224px;}
 
  #two__columns .pcaForm input[type=text],
  #two__columns .pcaForm input[type=url],
  #two__columns .pcaForm input[type=email],
  #two__columns .pcaForm input[type=tel],
  #two__columns .pcaForm input[type=number],
  #two__columns .pcaForm input[type=date],
  #two__columns .pcaForm textarea,
  #two__columns .pcaForm select{
    width: 100%;
  }
}

/*210610 フォームのスピンダウン削除 士業のみ*/
input[name="ex_touroku_number"]::-webkit-outer-spin-button,
input[name="ex_touroku_number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;}
input[name="ex_touroku_number"] { -moz-appearance:textfield;}