@charset "UTF-8";
/*************************************************/
/* フォーム全体                                  */
/*************************************************/
/* Bodyのリセット */
body {
    margin: 0;
    padding: 0;
}
/* 全体のbox-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 全体のpadding */
form.form {
    padding: 10px;
}

/* 全体の背景 */
form.form {
    background-color: var(--bg-color);
}

/* 全体フォント */
form.form {
    color: var(--font-color);
}
form.form,
form.form input {
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
}
/* 全体エラー */
form.form .errors {
    color: var(--error-color);
    border: var(--error-border);
    margin: 30px 10px;
    padding: 10px;
    border-radius: var(--error-border-radius);
}

/*************************************************/
/* 項目                                          */
/*************************************************/
/* 項目ボックス */
form.form .form-field {
    margin: 0;
    padding: 10px;
    clear: both;
}

/* 項目ラベル */
form.form .field-label {
    display: block;
    width: 100%;
    padding-bottom: 5px;
    font-weight: var(--label-font-weight);
    font-size: 16px;
}

/* 項目入力欄 */
form.form .input-wrapper {
    display: block;
    width: 100%;
}

/* 項目の説明・ノート */
form.form .description,
form.form .required-note,
form.form .js-note {
    display: block;
    width: 100%;
    padding-top: 5px;
    color: var(--description-font-color);
    font-size: 14px;
    font-weight:500;
}

/* 項目必須・任意 */
form.form .required label.field-label,
form.form :not(.required) label.field-label {
    background: inherit;
}
form.form .required label.field-label::after,
form.form .policy-text.required label.inline::after,
form.form .policy-check.required:not(:has( > .field-label)) label.inline::after,
form.form :not(.required) label.field-label::after {
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    padding: 3px 5px;
    border-radius: var(--required-border-radius);
    margin-left: 10px;
    vertical-align: 2px;
    font-weight: bold;
}

/* 必須 */
form.form .required label.field-label::after,
form.form .policy-text.required label.inline::after,
form.form .policy-check.required:not(:has( > .field-label)) label.inline::after {
    content: var(--required-content);
    background-color: var(--required-bg-color);
    color: var(--required-font-color);
}

/* 任意 */
form.form :not(.required) label.field-label::after {
    content: var(--optional-content);
    background-color: var(--optional-bg-color);
    color: var(--optional-font-color);
}

/* 項目入力欄 */
form.form .pd-text input.text,
form.form .pd-date input.date,
form.form .pd-select select,
form.form .pd-textarea textarea {
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    background-color: var(--input-bg-color);
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size);
    color: var(--input-font-color);
    box-shadow: var(--input-box-shadow);
}
form.form .pd-text input.text,
form.form .pd-date input.date,
form.form .pd-textarea textarea {
    padding: 15px;
}
form.form .pd-select select {
    padding: 0 15px;
}

/* 項目テキスト・日付 */
form.form .pd-text input.text,
form.form .pd-date input.date,
form.form .pd-select select {
    height: 50px;
}

/* 項目テキストエリア */
form.form .pd-textarea textarea {
    height: 100px;
}

/* 項目プレースホルダ */
form.form .pd-text input.text::placeholder,
form.form .pd-date input.date::placeholder,
form.form .pd-textarea textarea::placeholder {
    color: var(--placeholder-font-color);
}

/* 項目チェックボックス・ラジオボタン */
form.form .pd-checkbox .value span,
form.form .pd-radio .value span {
    display: var(--checkbox-radio);
    margin-top: 5px;
}
form.form .pd-checkbox .value span label,
form.form .pd-radio .value span label {
    margin: 0 10px 0 5px;
}
form.form .pd-checkbox input[type=checkbox],
form.form .pd-radio input[type=radio] {
    accent-color: var(--accent-color);
}
form.form .pd-checkbox input[type=checkbox]:checked + label,
form.form .pd-radio input[type=radio]:checked + label {
    color: var(--checked-label-color);
}

/* 項目エラー */
form.form .form-field .error.no-label {
    color: var(--error-color);
    clear: both;
    margin: 0;
    padding-top: 5px;
}

/* 項目テキストのエラー */
form.form .pd-text.error input.text,
form.form .pd-text input.text.error,
form.form .pd-date.error input.date,
form.form .pd-date input.date.error,
form.form .pd-select.error select,
form.form .pd-select select.error,
form.form .pd-textarea.error textarea,
form.form .pd-textarea textarea.error {
    border: 1px solid var(--error-color);
}

/* 項目フォーカス */
form.form .pd-text input.text:focus,
form.form .pd-date input.date:focus,
form.form .pd-select select:focus,
form.form .pd-textarea textarea:focus {
    border-color: var(--focus-border-color);
    background-color: var(--focus-bg-color);
    outline: none;
    box-shadow: var(--focus-box-shadow);
    color: var(--focus-font-color);
}

/*************************************************/
/* 2列配置                                       */
/*************************************************/
form.form .form-field.input-inline_2-1,
form.form .form-field.input-inline_2-2 {
    float: left;
    width: 50%;
    clear: inherit;
}
form.form .form-field.input-inline_2-2 + .form-field {
    clear: both;
}

/*************************************************/
/* 3列配置                                       */
/*************************************************/
form.form .form-field.input-inline_3-1,
form.form .form-field.input-inline_3-2,
form.form .form-field.input-inline_3-3 {
    float: left;
    width: calc(100% / 3);
    clear: inherit;
}
form.form .form-field.input-inline_3-3 + .form-field {
    clear: both;
}

/*************************************************/
/* 送信ボタン                                    */
/*************************************************/
/* 送信ボタン */
form.form .submit {
    margin: 30px 10px;
}

form.form .submit input {
    display: block;
    margin: 15px auto;
    padding: 15px;
    min-width: 240px;
    color: var(--submit-font-color);
    border: var(--submit-border);
    border-radius: var(--submit-border-radius);
    background-color: var(--submit-bg-color);
    font-size: 20px;
    font-weight: bold;
    white-space: normal;
    box-shadow: var(--submit-box-shadow);
}
form.form .submit input:hover {
    cursor: pointer;
    opacity: 0.7;
}

/*************************************************/
/* レスポンシブ                                  */
/*************************************************/
@media screen and (max-width: 520px) {
    /* 2列配置・3列配置 */
    form.form .form-field.input-inline_2-1,
    form.form .form-field.input-inline_2-2,
    form.form .form-field.input-inline_3-1,
    form.form .form-field.input-inline_3-2,
    form.form .form-field.input-inline_3-3 {
        clear: both;
        width: 100%;
    }
    /* 項目チェックボックス・ラジオボタン */
    form.form .pd-checkbox .value span,
    form.form .pd-radio .value span {
        display: block;
    }
    /* 送信ボタン */
    form.form .submit input {
        width: 100%;
    }
}

/*************************************************/
/* CSSクラス                                     */
/*************************************************/
/* 項目の前に区切り線を入れる */
/* CSSクラス（before-hr） */
form.form .form-field.before-hr:before {
    content: "";
    display: block;
    border-bottom: 1px solid var(--item-section-hr);
    margin: 15px 0 35px 0;
}

/* 項目の後に区切り線を入れる */
/* CSSクラス（after-hr） */
form.form .form-field.after-hr::after {
    content: "";
    display: block;
    border-bottom: 1px solid var(--item-section-hr);
    margin: 35px 0 15px 0;
}

/*************************************************/
/* 項目の説明を右側に配置する */
/* CSSクラス（text-after） */
form.form .form-field.text-after .input-wrapper {
    display: inline-block;
    width: calc(100% - 35px);
}
form.form .form-field.text-after .description {
    display: inline-block;
    width: auto;
    padding-left: 5px;
    color: inherit;
}

/*************************************************/
/* 項目をカスタムの幅にする */
/* CSSクラス（input-custom_w） */
@media screen and (min-width: 521px) {
    form.form .form-field.input-custom_w input.text,
    form.form .form-field.input-custom_w input.date,
    form.form .form-field.input-custom_w select.select,
    form.form .form-field.input-custom_w textarea.standard {
        max-width: var(--input-custom-width);
    }
}

/*************************************************/
/* 項目ラベルを非表示にする */
/* CSSクラス（no-label） */
form.form .no-label .field-label {
    visibility: hidden;
    overflow: hidden;
    white-space: nowrap;
}

@media screen and (max-width: 520px) {
    form.form .no-label .field-label {
        display: none;
    }
}