/* toggle_btn */
/* -------------------------------------------------------- */

.toggle_btn span{
    background-color: #000000;
}

.open .toggle_btn span{
    background-color: #ffffff;
}

/* main */
/* -------------------------------------------------------- */

#main .contact_area {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#main .contact_area table {
    width: 88.89%;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 18px;
}

#main .contact_area .table_sp{
    display: none;
}

#main .contact_area table tr th {
    width: calc(250px - 22px);
    background-color: #F0F3F4;
}

#main .contact_area table tr th,
#main .contact_area table tr td {
    padding: 20px 0px 20px 21px;
}

#main .contact_area table tr td select,
#main .contact_area table tr td input,
#main .contact_area table tr td textarea {
    border-radius: 0;
    border: none;
    border: 1px solid #000000;
    outline: none;
    padding-left: 13px;
}

#main .contact_area table tr th label {
    cursor: text;
}

#main .contact_area table tr th label+.tag {
    display: inline;
    background-color: #9E2428;
    text-align: center;
    padding: 3.5px 12.05px;
    font-size: 0.8em;
    line-height: 1;
    color: #ffffff;
    border-radius: 5px;
    margin-left: 12px;
}

#main .contact_area table tr td .select_box {
    position: relative;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: #F2F2F2;
    width: 400px;
    height: 35px;
}

#main .contact_area table tr td .select_box::before {
    position: absolute;
    top: 0;
    right: 6px;
    width: 29px;
    height: 35.35px;
    padding: 0;
    content: "▼";
    transform: translateY(-15%);
    pointer-events: none;
    text-align: center;
    font-size: 1.8125em;
}

#main .contact_area table tr td .select_box::after {
    position: absolute;
    top: 0;
    right: 2.5em;
    bottom: 0;
    width: 1px;
    content: '';
    border-left: 1px solid #000000;
}

#main .contact_area table tr td select {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-color: #F2F2F2;
    font-size: 1.125em;
    cursor: pointer;
    text-overflow: ellipsis;
    border: none;
    outline: none;
}

#main .contact_area table tr td .text {
    color: #9E2428;
    margin-right: 22px;
}

#main .contact_area table tr td .text:last-of-type {
    margin-left: 22px;
}

#main .contact_area table tr:nth-of-type(2)>td input,
#main .contact_area table tr:nth-of-type(3)>td input {
    width: calc(119.0083px - 15px);
    height: 24.6479px;
}

#main .contact_area table tr td .company,
#main .contact_area table tr td .department,
#main .contact_area table tr td .email,
#main .contact_area table tr td .email_verification,
#main .contact_area table tr td .address {
    width: calc(400px - 15px);
    height: 24.6479px;
}

#main .contact_area table tr td .tel,
#main .contact_area table tr td .postal {
    position: relative;
    top: -2px;
    width: calc(100px - 15px);
    height: 24.6479px;
}

#main .contact_area table tr td textarea {
    width: calc(400px - 15px);
    height: 124.6479px;
    resize: none;
}

#main .contact_area .check_btn {
    font-size: 1.0625em;
    margin-bottom: 22px;
}

#main .contact_area .check_btn .check-text {
    margin-left: 8.5px;
}

input[type="checkbox"] {
    display: none;
}

#main .contact_area .check_btn>label {
    position: relative;
}

#main .contact_area .check_btn>label::before {
    position: absolute;
    top: 50%;
    left: -22px;
    display: inline-block;
    content: '';
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    border: 1px solid #000000;
    transform: translateY(-50%);
    z-index: 10;
}

#main .contact_area .check_btn>label::after {
    border-right: 3px solid #004098;
    border-bottom: 3px solid #004098;
    content: '';
    display: block;
    height: 9px;
    left: -18px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-63%) rotate(45deg);
    width: 5px;
    z-index: 20;
}

#main .contact_area .check_btn input[type=checkbox]:checked+label::after {
    opacity: 1;
}

#main .btn {
    border: none;
    font-size: 1.25em;
    line-height: 1;
    padding: 10px 22px;
    border-radius: 5px;
    border: 1px solid #000000;
    background-color: #E6E6E6;
}

#main .gray_area {
    width: calc(100% - 100px);
    margin-top: 0;
    text-align: left;
    padding: 7px 50px 16.5px;
}

#main .contact_protection {
    margin-top: 100px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#main .contact_protection .protection_title {
    font-size: 1.75em;
    max-height: 40px;
    padding-left: 20px;
    border-left: 10px solid #004098;
    margin-bottom: 6px;
    margin-left: 5px;
    text-align: left;
}

#main .contact_protection .line {
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #595757;
    margin-bottom: 50px;
}

#main .error_box {
    color: #9E2428;
    font-size: 1.125em;
}

.contact_completion__text{
    font-size: 2rem;
    margin-bottom: 30px;
}

.contact__completion__sub-text{
    font-size: 1rem;
    margin-bottom: 50px;
}



@media screen and (max-width: 1000px) {
    /* main */
    /* -------------------------------------------------------- */

    #main .contact_area{
        width: 100%;
    }

    #main .contact_area table {
        margin-bottom: 1.62vw;
    }

    #main .contact_area table tr th {
        width: calc(22.5vw - 1.98vw);
    }

    #main .contact_area table tr th,
    #main .contact_area table tr td {
        padding: 1.8vw 0px 1.8vw 1.89vw;
    }

    #main .contact_area table tr td select,
    #main .contact_area table tr td input,
    #main .contact_area table tr td textarea {
        padding-left: 1.17vw;
    }

    #main .contact_area table tr th label+.tag {
        padding: 0.315vw 1.0845vw;
        font-size: max(1.152vw, 12px);
        border-radius: 0.45vw;
        margin-left: 1.08vw;
    }

    #main .contact_area table tr td .select_box {
        border-radius: 0.45vw;
        width: 36vw;
        height: 3.15vw;
    }

    #main .contact_area table tr td .select_box::before {
        right: 0.54vw;
        width: 2.61vw;
        height: 3.1815vw;
        transform: translateY(-10%);
        font-size: max(2.61vw, 12px);
    }

    #main .contact_area table tr td select {
        border-radius: 0.45vw;
        font-size: max(1.62vw, 12px);
    }

    #main .contact_area table tr td .text {
        margin-right: 1.98vw;
    }

    #main .contact_area table tr td .text:last-of-type {
        margin-left: 1.98vw;
    }

    #main .contact_area table tr:nth-of-type(2)>td input,
    #main .contact_area table tr:nth-of-type(3)>td input {
        width: calc(10.710747vw - 1.35vw);
        height: 2.218311vw;
    }

    #main .contact_area table tr td .company,
    #main .contact_area table tr td .department,
    #main .contact_area table tr td .email,
    #main .contact_area table tr td .email_verification,
    #main .contact_area table tr td .address {
        width: calc(36vw - 1.35vw);
        height: 2.218311vw;
    }

    #main .contact_area table tr td .tel,
    #main .contact_area table tr td .postal {
        position: relative;
        top: -0.18vw;
        width: calc(9vw - 1.35vw);
        height: 2.218311vw;
    }

    #main .contact_area table tr td textarea {
        width: calc(36vw - 1.35vw);
        height: 11.218311vw;
    }

    #main .contact_protection .protection_title {
        font-size: 1.75em;
    }

}

@media screen and (max-width: 888px) {
    #main .contact_area table tr th label+.tag{
        display: inline-block;
    }
}

@media screen and (max-width: 655px) {
    #main .contact_area table tr td .select_box{
        padding-right: 8vw;
    }
}

@media screen and (max-width: 592px) {
    #main .contact_area table tr td .select_box{
        height: 20px;
    }

    #main .contact_area table tr td .select_box::before{
        right: 1.84vw;
        height: 0;
    }
}

@media screen and (max-width: 575px) {
    #main .contact_area table tr th{
        width: calc(32.5vw - 1.98vw);
    }
}

@media screen and (max-width: 500px) {
    #main .contact_area .table_pc{
        display: none;
    }

    #main .contact_area .table_sp{
        display: table;
        width: 100%;
    }

    #main .contact_area table tr th, #main .contact_area table tr td{
        padding: 4vw 5vw;
    }

    #main .contact_area table tr th label {
        font-size: max(3.2vw, 12px);
    }

    #main .contact_area table tr th label+.tag{
        margin-left: 2.2vw;
        font-size: max(2.56vw, 11px);
        padding: 0.6vw 2vw;
    }

    #main .contact_area table tr td .select_box{
        width: calc(100% - 11vw);
        height: 8.58325vw;
        padding-right: 11vw;
    }

    #main .contact_area table tr td select{
        font-size: max(3.6vw, 14px);
    }

    #main .contact_area table tr td .select_box::before{
        right: 2.7vw;
        width: 6.61vw;
        height: 3.1815vw;
        transform: translateY(-35%);
        font-size: max(7.61vw, 12px);
    }

    #main .contact_area table tr td .select_box::after{
        right: 11vw;
    }

    #main .contact_area table tr td input, #main .contact_area table tr td textarea{
        width: 23.8vw;
        height: 5vw;
    }

    #main .contact_area table tr td .text{
        font-size: max(3.2vw, 12px);
    }

    #main .contact_area table tr td .company, #main .contact_area table tr td .department, #main .contact_area table tr td .email, #main .contact_area table tr td .email_verification, #main .contact_area table tr td .address{
        width: calc(100% - 1.35vw - 1px);
        height: 5vw;
    }

    #main .contact_area table tr td .tel, #main .contact_area table tr td .postal{
        width: 20vw;
        height: 5vw;
    }

    #main .contact_area table tr td textarea{
        width: calc(100% - 1.35vw - 1px);
        height: 24.92958vw;
    }

    #main .contact_area .check_btn .check-text{
        font-size: max(3.4vw, 13px);
    }

    #main .contact_area .check_btn>label::before{
        transform: translateY(-58%);
    }

    #main .contact_protection {
        width: 100%;
    }

    #main .gray_area{
        font-size: max(3.2vw, 12px);
        width: calc(100% - 11.6vw);
        padding: 2.2vw 5.8vw;
    }
}