@charset "UTF-8";
/*=======================================
form 設定
=======================================*/
:root {
    /*form font-size ------*/
    --font_form: 1.6rem;
    /*form color ------*/
    /*#fff*/
    --form_bg: 255, 255, 255;
    /* --form_bg_grade: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 100%); */
    /*#c1c1c4*/
    --form_border: 193, 193, 196;
    /*#bababa*/
    --placeholder_color: 186, 186, 186;
    /*#666666*/
    --disabled_color: 102, 102, 102;
    /*box ----*/
    --form_bd: 0.6em;
    --form_in: 0.8em;
    --form_radius: 3px;
    /*重なったとき用*/
    --form_spacer: 0.1em;
    /*ステータス ------*/
    /*入力中*/
    /*#fcd554*/
    --focus_color: 252, 213, 84;
}
/*=======================================
リセット
=======================================*/
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"] {
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
    box-sizing: border-box;
    font-size: var(--font_form);
    /*入力中*/
    &:focus {
        border: rgba(var(--focus_color), 1) 1px solid;
    }
}
select {
    /*-webkit-appearance: none;
  appearance: none;*/
    border: none;
    outline: none;
    background: transparent;
    box-sizing: border-box;
    font-size: var(--font_form);
}

button,
input[type="submit"],
input[type="reset"],
input[type="search"],
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    box-sizing: border-box;
    font-size: var(--font_form);
}
textarea {
    -webkit-appearance: none;
    appearance: none;
    resize: none;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    box-sizing: border-box;
    font-size: var(--font_form);
}
textarea {
    /*可変*/
    &.sizing_textarea {
        line-height: 1.5;
        field-sizing: content;
        min-height: 2lh;
        width: 100%;
        /*最大サイズ*/
        max-height: 4lh;
    }
}
/*入力例の文字装飾*/
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
    color: rgba(var(--placeholder), 1);
}
input:focus::-webkit-input-placeholder,
input:focus:-moz-placeholder,
input:focus::-moz-placeholder {
    color: transparent;
}
textarea:focus::-webkit-input-placeholder,
textarea:focus:-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent;
}
/*form　item*/
input[type="number"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
    border: 1px solid rgba(var(--form_border), 1);
    background: rgba(var(--form_bg), 1);
    padding: var(--form_bd) var(--form_in);
    margin-top: var(--form_spacer);
    margin-bottom: var(--form_spacer);
    border-radius: var(--form_radius);
}
textarea {
    border: 1px solid rgba(var(--form_border), 1);
    background: rgba(var(--form_bg), 1);
    padding: var(--form_bd) var(--form_in);
    margin-top: var(--form_spacer);
    margin-bottom: var(--form_spacer);
    border-radius: var(--form_radius);
}
/* select {
  border: 1px solid rgba(var(--form_border), 1);
  background: rgba(var(--form_bg),1);
  padding-block: var(--form_bd);
  padding-inline: var(--form_in);
  margin-block: var(--form_spacer);
  border-radius: var(--form_radius);
}
select:focus {
  border: 1px solid rgba(var(--form_border), 1);
  background: rgba(var(--form_bg),1);
  padding-block: var(--form_bd);
  padding-inline: var(--form_in);
  margin-block: var(--form_spacer);
  border-radius: var(--form_radius);
} */
.input_spe {
    margin-left: 0.4em;
    margin-right: 0.4em;
}
/*=======================================
parts
=======================================*/
/*送信・戻るボタン----------*/
.submit_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px 16px;
    @media (width >=768px) {
        flex-direction: row;
    }
    :is(input),
    :is(a) {
        line-height: 1.2;
        display: block;
        border: none;
        border-radius: var(--btn_radius);
        padding: 1em 24px;
        cursor: pointer;
        width: min(100%, 480px);
        transition: 0.2s;
        font-size: 1.2em;
        font-weight: 700;
        margin-left: auto;
        margin-right: auto;
        &:hover {
            opacity: 0.8;
        }
        @media (width >=768px) {
            min-width: 240px;
            width: revert;
        }
    }
    :is(a) {
        text-decoration: none;
    }
    .inp_submit01 {
        & > input,
        & > a {
            color: rgba(var(--light_tx_color), 1);
            background: rgba(var(--maincolor), 1);
        }
    }
    .inp_submit02 {
        & > input,
        & > a {
            color: rgba(var(--light_tx_color), 1);
            background: rgba(var(--gray), 1);
        }
    }
}
* + .submit_btn {
    margin-top: 32px;
}
/*attention----------*/
.attention {
    color: rgba(var(--gray), 1);
    font-size: var(--font_s);

    &.tx_red {
        color: rgba(var(--error_color), 1);
    }
}
/*=======================================
form table
=======================================*/
.contact_table {
    /*form*/
    --form_tbl_bd: #888;
    --form_th_bg: rgba(252, 213, 84, 0.6);
    --form_td_bg: #fff;
    --form_td_child_bg: RGB(255, 246, 231);
    --form_tbl_pd_b: 12px;
    --form_tbl_pd_in: 16px;
    width: 100%;
    border-left: 1px solid var(--form_tbl_bd);
    border-top: 1px solid var(--form_tbl_bd);
    background: rgba(var(--bg_white), 1);
    @media (width >=768px) {
        border-collapse: separate;
    }
    :is(tr) {
        & > th,
        & > td {
            padding: var(--form_tbl_pd_b) var(--form_tbl_pd_in);
            text-align: left;
            line-height: 1.2;
        }
        & > th {
            display: block;
            border-right: 1px solid var(--form_tbl_bd);
            border-bottom: 1px solid var(--form_tbl_bd);
            background: var(--form_th_bg);
            @media (width >=768px) {
                display: table-cell;
                border-right: 1px dotted var(--form_tbl_bd);
                width: 28%;
            }
        }
        & > td {
            display: block;
            border-right: 1px solid var(--form_tbl_bd);
            border-bottom: 1px solid var(--form_tbl_bd);
            background: var(--form_td_bg);
            & > label {
                display: inline-block;
                margin-right: 1em;
                padding-top: var(--form_spacer);
                padding-bottom: var(--form_spacer);
            }
            & > select {
                border: 1px solid rgba(var(--form_border), 1);
                background: rgba(var(--form_bg), 1);
                padding-block: var(--form_bd);
                padding-inline: var(--form_in);
                margin-block: var(--form_spacer);
                border-radius: var(--form_radius);
            }
            @media (width >=768px) {
                display: table-cell;
                &.bottom_dotted {
                    border-bottom: 1px dotted var(--form_tbl_bd);
                }
                &.td_child {
                    border-right: 1px dotted var(--form_tbl_bd);
                    border-bottom: 1px solid var(--form_tbl_bd);
                    background: var(--form_td_child_bg);
                    max-width: 200px;
                    width: 200px;
                }
            }
        }
    }
}
/*必須/任意----------*/
/*<span class="txt_required">必須</span>*/
.txt_required,
.txt_optional {
    display: inline-block;
    width: max-content;
    color: rgba(var(--light_tx_color), 1);
    font-size: clamp(1rem, 0.878477306vw, 1.2rem);
    border-radius: 100px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    line-height: 1.4;
    vertical-align: middle;
    margin-right: 0.5em;
}
.txt_required {
    background: rgba(var(--error_color), 1);
}
.txt_optional {
    background: rgba(var(--gray), 1);
}
/* input_list ---------*/
.input_list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    & > li {
        white-space: nowrap;
    }
}
.input_list > li input[type="checkbox"],
.input_list > li input[type="radio"] {
    margin-right: 0.2em;
}
/*エラーメッセージ用 ----------*/
/*top*/
.errtop {
    --errtop_size: 15px;
    position: relative;
    margin: calc(var(--errtop_size) + 6px) 0;
    padding: 0.6em;
    text-align: center;
    font-weight: bold;
    color: rgba(var(--error_color), 1);
    background: rgba(var(--error_color), 0.2);
    &::after {
        position: absolute;
        left: 50%;
        bottom: -30px;
        width: 0;
        height: 0;
        margin-left: calc(var(--errtop_size) * -1);
        content: "";
        border: solid var(--errtop_size) transparent;
        border-top: solid var(--errtop_size) rgba(var(--error_color), 0.2);
    }
    & > span {
        --errmsg_size: 10px;
        position: relative;
        display: inline-block;
        margin-top: calc(var(--errmsg_size) + 4px);
        padding-block: 0.4em;
        padding-inline: 0.8em;
        font-weight: bold;
        color: rgba(var(--error_color), 1);
        background: rgba(var(--error_color), 0.2);
        &::after {
            position: absolute;
            left: 1.5em;
            top: calc(var(--errmsg_size) * 2 * -1);
            width: 0;
            height: 0;
            content: "";
            border: solid var(--errmsg_size) transparent;
            border-bottom: solid var(--errmsg_size) rgba(var(--error_color), 0.2);
        }
    }
}
/*table in*/
.errmsg {
    --errtop_size: 15px;
    position: relative;
    margin: calc(var(--errtop_size) + 6px) 0 0;
    padding: 0.4em 0.6em;
    text-align: left;
    font-weight: bold;
    color: rgba(var(--error_color), 1);
    background: rgba(var(--error_color), 0.2);
    &::after {
        position: absolute;
        left: 16px;
        top: -30px;
        width: 0;
        height: 0;
        content: "";
        border: solid var(--errtop_size) transparent;
        border-bottom: solid var(--errtop_size) rgba(var(--error_color), 0.2);
    }
}
/*エラーメッセージ*/
.error_tx {
    color: rgba(var(--error_color), 1);
    background: rgba(var(--error_color), 0.2);
    padding: 0.5em 1em;
    & + * {
        margin-top: 16px !important;
    }
}
* + .error_tx {
    margin-top: 24px;
}
[class^="box0"] {
    .error_tx {
        width: min(100%, var(--inline_max));
        margin-left: auto;
        margin-right: auto;
    }
}
/*入力エリアサイズ*/
.input_10 {
    width: clamp(40px, 10%, 48px);
}
.input_20 {
    width: clamp(80px, 20%, 150px);
}
.input_30 {
    width: clamp(180px, 30%, 240px);
}
.input_50 {
    width: clamp(240px, 50%, 400px);
}
.input_80 {
    width: min(100%, 600px);
}
.input_100 {
    width: 100%;
}
/*=======================================
その他　パーツ
=======================================*/
/*select ------*/
.select_box {
    position: relative;
    width: max-content;
    border: 1px solid rgba(var(--form_border), 1);
    background: rgba(var(--form_bg), 1);
    margin-block: var(--form_spacer);
    border-radius: var(--form_radius);
    &::before {
        font-family: remixicon !important;
        font-style: normal;
        content: "\ea4e";
        pointer-events: none;
        display: block;
        position: absolute;
        inset: 50% 0.4em auto auto;
        transform: translateY(-50%);
        color: rgba(var(--maincolor), 1);
    }
    :is(select) {
        padding-block: var(--form_bd);
        padding-inline: var(--form_in) 2em;
    }
}
/*message ------*/
.form_note_box {
    color: rgba(var(--error_color), 1);
    border: 4px solid rgba(var(--error_color), 1);
    border-radius: var(--base_radius);
    width: min(100%, var(--inline_max));
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em 1em 1.5em;
    & > i {
        font-size: 3em;
    }
    & > p {
        font-size: var(--font_l);
        font-weight: 700;
        line-height: 1.4;
    }
    & + * {
        margin-top: 2em;
    }
}
/*=======================================
目のパスワード　ない時は削除  */
#fieldPassword {
    border: 1px solid rgba(var(--form_border), 1);
    background: rgba(var(--form_bg), 1);
    border-radius: var(--form_radius);
    padding: 0;
    margin-top: var(--form_spacer);
    margin-bottom: var(--form_spacer);
    width: 100%;
    position: relative;
}
#fieldPassword #buttonEye {
    font-size: 1.2em;
    position: absolute;
    inset: 50% 6px auto auto;
    transform: translateY(-50%);
}
#fieldPassword #textPassword {
    width: 100%;
    border: none;
    background: transparent;
    padding-right: 40px;
    margin: 0;
    &:focus {
        border: rgba(var(--focus_color), 1) 1px solid;
        border-radius: var(--form_radius);
        margin: -1px;
    }
}
/*=======================================
datepickerもしくはdatetimepicker使用時　ない時は削除   */
.datepicker_box {
    border: 1px solid rgba(var(--form_border), 1);
    background: rgba(var(--form_bg), 1);
    border-radius: var(--form_radius);
    padding: 0;
    margin-top: var(--form_spacer);
    margin-bottom: var(--form_spacer);
    width: max-content;
    position: relative;
    &::before {
        font-family: remixicon !important;
        font-style: normal;
        content: "\eb21";
        position: absolute;
        top: 50%;
        right: 0.5em;
        transform: translateY(-50%);
        font-size: 1.2em;
        color: rgba(var(--maincolor), 1);
        pointer-events: none;
    }
    & > input[type="text"] {
        border: none;
        margin: 0;
        padding-right: 1.5em;
    }
}
/*=======================================
ファイルアップロード　*/
input[type="file"] {
    display: none;
}
#ua_change label.fileUp_btn {
    display: flex;
    justify-content: center;
    gap: 8px;
    border: none;
    line-height: 1;
    border-radius: var(--btn_radius);
    padding: 16px 1em;
    cursor: pointer;
    transition: 0.2s;
    font-size: var(--font_l);
    color: rgba(var(--light_tx_color), 1);
    background-color: rgba(var(--maincolor), 1);
    min-width: 240px;
    width: 100%;
    &:hover {
        opacity: 0.8;
    }
    & + .file_p {
        padding-top: 0.2em;
    }

    @media (width >= 576px) {
        width: max-content;
    }
}

/** 顔写真登録 **/
#ua_change.disp_sp .elem_pc {
    display: none;
}
#ua_change.disp_pc .elem_sp {
    display: none;
}
#ua_change.disp_sp .fileUp {
    display: block;
}
@media print, screen and (min-width: 576px) {
    #ua_change.disp_sp .fileUp {
        display: inline-block;
    }
}
#ua_change.disp_sp .fileUp p {
    max-width: 240px;
    margin: 10px auto;
}
.thum_img {
    display: block;
    margin: 20px auto;
}
.thum_img img {
    display: block;
    margin: auto;
    max-width: 250px;
}

/*=======================================
エラーメッセージ  */
.error_message {
    text-align: left;
    background: rgba(var(--error_color), 0.15);
    color: rgba(var(--error_color), 1);
    padding: 16px;
    border-radius: var(--base_radius);
    font-size: var(--font_base);
    line-height: 1.4;
    :is(p) {
        line-height: 1.4;
    }
    :is(ul) {
        :is(li) {
            line-height: 1.4;
            position: relative;
            padding-left: 0.6em;
            &::before {
                content: "";
                width: 3px;
                height: 3px;
                background-color: rgba(var(--error_color), 1);
                border-radius: 100px;
                display: block;
                position: absolute;
                left: 0;
                top: 10px;
            }
            & + li {
                margin-top: 0.2em;
            }
        }
    }

    & > * + * {
        margin-top: 0.5em;
    }

    & + * {
        margin-top: clamp(32px, 4vw, 48px);
    }
}