header {
    box-shadow: 0px 0px 13px 0px rgba(17,17,17,.1)
}

@keyframes textanimation {
    0% {
        transform: translateX(-1em);
        opacity: 0
    }

    100% {
        transform: translateX(0);
        opacity: 1
    }
}

.ttl_contents {
    display: grid;
    width: auto;
    line-height: 1.1;
    border-bottom: 1px solid #e4e4e4;
    padding: 0 90px 40px;
    margin: 145px 0 42px
}

    .ttl_contents h1 {
        order: 2
    }

        .ttl_contents h1 .txt_main {
            display: block;
            font-size: 1.3vw;
            font-weight: 500;
            line-height: 1;
            color: #e4002b;
            opacity: 0;
            animation: textanimation .5s forwards;
            animation-delay: .55s
        }

        .ttl_contents h1 .txt_english {
            display: block;
            width: auto;
            font-family: "DM Sans",serif;
            font-weight: 700;
            font-size: 4.4vw;
            color: #111;
            margin: 0
        }

            .ttl_contents h1 .txt_english span {
                display: inline-block;
                opacity: 0;
                transform: translateX(1em);
                animation: textanimation .3s forwards
            }

                .ttl_contents h1 .txt_english span:nth-child(1) {
                    text-transform: capitalize;
                    animation-delay: .2s
                }

                .ttl_contents h1 .txt_english span:nth-child(2) {
                    animation-delay: .25s
                }

                .ttl_contents h1 .txt_english span:nth-child(3) {
                    animation-delay: .3s
                }

                .ttl_contents h1 .txt_english span:nth-child(4) {
                    animation-delay: .35s
                }

                .ttl_contents h1 .txt_english span:nth-child(5) {
                    animation-delay: .4s
                }

                .ttl_contents h1 .txt_english span:nth-child(6) {
                    animation-delay: .45s
                }

                .ttl_contents h1 .txt_english span:nth-child(7) {
                    animation-delay: .5s
                }

                .ttl_contents h1 .txt_english span:nth-child(8) {
                    animation-delay: .55s
                }

                .ttl_contents h1 .txt_english span:nth-child(9) {
                    animation-delay: .6s
                }

                .ttl_contents h1 .txt_english span:nth-child(10) {
                    animation-delay: .65s
                }

                .ttl_contents h1 .txt_english span:nth-child(11) {
                    animation-delay: .7s
                }

                .ttl_contents h1 .txt_english span:nth-child(12) {
                    animation-delay: .75s
                }

                .ttl_contents h1 .txt_english span:nth-child(13) {
                    animation-delay: .8s
                }

    .ttl_contents .list_bread {
        order: 1;
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 1vw;
        list-style: none;
        line-height: 1;
        margin: 0 0 45px
    }

        .ttl_contents .list_bread li {
            display: flex;
            align-items: center
        }

            .ttl_contents .list_bread li:not(:last-child) {
                width: auto
            }

                .ttl_contents .list_bread li:not(:last-child):after {
                    content: "";
                    display: block;
                    width: 7px;
                    height: 7px;
                    transform: rotate(45deg);
                    border-top: 1px solid #555;
                    border-right: 1px solid #555;
                    margin: 0 8px
                }

        .ttl_contents .list_bread a {
            color: inherit
        }

@keyframes fade_animation {
    0% {
        opacity: 0;
        transform: translateY(1em)
    }

    100% {
        opacity: 1;
        transform: translateY(0em)
    }
}

.wrapper {
    width: auto;
    opacity: 0;
    padding: 0 185px;
    transform: translateY(1em);
    animation: fade_animation .5s forwards;
    animation-delay: .58s
}

    .wrapper .ttl_cmn_1 {
        font-size: 1.4em;
        font-weight: 700;
        line-height: 1.6;
        margin: 0 0 20px
    }

    .wrapper .ttl_cmn_2 {
        display: grid;
        grid-template-columns: 1em 1fr;
        align-items: baseline;
        gap: 3px;
        font-size: 1.5em;
        font-weight: 700;
        line-height: 1.4;
        margin: 0 0 20px
    }

        .wrapper .ttl_cmn_2:before {
            content: "";
            display: block;
            width: .8em;
            height: .8em;
            border: 6px solid #e4002b;
            border-radius: 50%
        }

    .wrapper .ttl_cmn_3 {
        font-size: 2em;
        font-weight: 700;
        line-height: 1.6;
        margin: 0 0 34px
    }

    .wrapper .txt_lead_1 {
        font-size: 1.25em;
        font-weight: 600;
        line-height: 1.6;
        margin: 0 0 20px
    }

    .wrapper p {
        margin: 20px 0 30px
    }

    .wrapper ol, .wrapper ul {
        width: auto;
        line-height: 1.6;
        margin: 20px 0 30px 22px
    }

        .wrapper ol li, .wrapper ul li {
            margin: 5px 0
        }

    .wrapper table {
        margin: 20px 0 30px
    }

        .wrapper table ol, .wrapper table ul {
            margin: 0 0 0 22px
        }

        .wrapper table .list_cmn_2 {
            margin: 0
        }

    .wrapper a {
        color: inherit
    }

        .wrapper a:hover {
            color: #e4002b;
            text-decoration: none
        }

    .wrapper .table_cmn_1 {
        width: 100%
    }

        .wrapper .table_cmn_1 th, .wrapper .table_cmn_1 td {
            text-align: left;
            vertical-align: baseline;
            padding: 3px
        }

        .wrapper .table_cmn_1 th {
            white-space: nowrap
        }

    .wrapper .table_cmn_2 {
        width: 100%
    }

        .wrapper .table_cmn_2 thead {
            background-color: #f8f8f8
        }

            .wrapper .table_cmn_2 thead th {
                font-weight: 700;
                padding: 10px
            }

        .wrapper .table_cmn_2 tbody tr:not(:last-child) {
            border-bottom: 1px solid #e4e4e4
        }

        .wrapper .table_cmn_2 th, .wrapper .table_cmn_2 td {
            text-align: left;
            font-weight: 500;
            vertical-align: baseline;
            padding: 20px 10px
        }

        .wrapper .table_cmn_2 th {
            white-space: nowrap
        }

    .wrapper .table_cmn_3 {
        width: 100%
    }

        .wrapper .table_cmn_3 tbody tr:not(:last-child) {
            border-bottom: 1px solid #e4e4e4
        }

        .wrapper .table_cmn_3 th, .wrapper .table_cmn_3 td {
            text-align: left;
            vertical-align: baseline;
            padding: 20px 0
        }

        .wrapper .table_cmn_3 th {
            font-weight: 700;
            white-space: nowrap
        }

    .wrapper .btn_cmn_1 {
        position: relative;
        display: inline-block;
        width: auto;
        color: #fff;
        line-height: 1.1;
        border-radius: 45px;
        text-decoration: none;
        overflow: hidden;
        background-color: #0b45a4
    }

        .wrapper .btn_cmn_1 span {
            position: relative;
            z-index: 2;
            display: block;
            width: auto;
            background-image: url(../images/common/icon_arrow_input.svg);
            background-position: center right 15px;
            background-size: .8em;
            padding: 18px 58px 18px 25px
        }

        .wrapper .btn_cmn_1:before {
            position: absolute;
            z-index: 1;
            top: 0;
            left: -100%;
            bottom: 0;
            content: "";
            display: block;
            width: 100%;
            height: 80px;
            transition: all .4s ease;
            border-radius: 35px;
            background-color: #e4002b;
            margin: auto 0
        }

        .wrapper .btn_cmn_1:hover:before {
            left: 0
        }

        .wrapper .btn_cmn_1:hover {
            color: #fff
        }

    .wrapper .list_cmn_2 {
        list-style: none
    }

    .wrapper .list_rinen {
        font-size: 1.15em;
        margin: 0 0 0 25px
    }

        .wrapper .list_rinen li {
            margin: 12px 0
        }

    .wrapper .grid_dl_1 {
        display: grid;
        grid-template-columns: 8em 1fr;
        align-items: baseline;
        gap: 5px 0;
        width: auto
    }

    .wrapper .list_dott {
        width: auto;
        list-style: none;
        margin: 0
    }

        .wrapper .list_dott li {
            display: inline-block;
            margin: 0
        }

            .wrapper .list_dott li:not(:last-child):after {
                content: "、"
            }

    .wrapper .grid_3 {
        display: grid;
        grid-template-columns: repeat(3, 31.5%);
        justify-content: space-between;
        gap: 30px 0;
        width: auto;
        text-align: center
    }

        .wrapper .grid_3 img {
            width: 100%;
            height: auto;
            aspect-ratio: 83/56;
            -o-object-fit: contain;
            object-fit: contain;
            background-color: #f3f3f3
        }

        .wrapper .grid_3 figcaption {
            margin: 12px 0 0
        }

    .wrapper .loop_glow, .wrapper .loop_privacy {
        width: auto;
        margin: 0 0 20px
    }

        .wrapper .loop_glow h3, .wrapper .loop_privacy h3 {
            font-size: 1.4em;
            font-weight: 700;
            line-height: 1.6;
            margin: 0 0 6px
        }

        .wrapper .loop_glow p, .wrapper .loop_privacy p {
            font-size: 1.2em;
            margin: 0 0 0 22px
        }

    .wrapper .txt_sign {
        text-align: right;
        line-height: 1.5
    }

    .wrapper .loop_privacy h3 {
        font-size: 1.4em;
        font-weight: 700;
        line-height: 1.6;
        margin: 0 0 6px
    }

    .wrapper .loop_privacy p {
        font-size: inherit;
        margin: 0 0 0 22px
    }

    .wrapper .grid_recruit {
        display: grid;
        grid-template-columns: 1fr 36%;
        gap: 50px;
        width: auto;
        margin: 0 0 40px
    }

        .wrapper .grid_recruit img {
            width: 100%;
            height: auto;
            margin: 0 0 20px
        }

    .wrapper .list_flow {
        width: auto;
        list-style: none;
        line-height: 1.5;
        margin: -10px 0 0
    }

        .wrapper .list_flow li {
            position: relative;
            display: grid;
            grid-template-columns: 3em 1fr;
            align-items: center;
            width: auto;
            border-bottom: 1px solid #e4e4e4;
            padding: 0 0 22px;
            margin: 0 0 22px
        }

            .wrapper .list_flow li::before {
                display: block;
                content: "";
                width: 1.1em;
                height: 1.7em;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center center
            }

            .wrapper .list_flow li:nth-child(1):before {
                background-image: url(../images/recruit/txt_no_1.svg)
            }

            .wrapper .list_flow li:nth-child(2):before {
                background-image: url(../images/recruit/txt_no_2.svg)
            }

            .wrapper .list_flow li:nth-child(3):before {
                background-image: url(../images/recruit/txt_no_3.svg)
            }

            .wrapper .list_flow li:nth-child(4):before {
                background-image: url(../images/recruit/txt_no_4.svg)
            }

            .wrapper .list_flow li:nth-child(5):before {
                background-image: url(../images/recruit/txt_no_5.svg)
            }

            .wrapper .list_flow li:nth-child(6):before {
                background-image: url(../images/recruit/txt_no_6.svg)
            }

            .wrapper .list_flow li:nth-child(7):before {
                background-image: url(../images/recruit/txt_no_7.svg)
            }

            .wrapper .list_flow li:nth-child(8):before {
                background-image: url(../images/recruit/txt_no_8.svg)
            }

            .wrapper .list_flow li:after {
                position: absolute;
                left: 0;
                bottom: -0.5em;
                content: "";
                display: block;
                width: 2em;
                height: 1em;
                background-image: url(../images/common/icon_arrow_flow.svg);
                background-size: .7em;
                background-position: bottom left 3px;
                background-repeat: no-repeat;
                background-color: #fff
            }

            .wrapper .list_flow li:last-child {
                border: none
            }

                .wrapper .list_flow li:last-child:after {
                    content: none
                }

    .wrapper .list_nav_recruit {
        display: grid;
        grid-template-columns: repeat(2, 49%);
        justify-content: space-between;
        width: auto;
        text-align: center;
        list-style: none;
        line-height: 1.2;
        margin: 0 0 52px
    }

        .wrapper .list_nav_recruit a {
            display: block;
            width: auto;
            border: 1px solid #626262;
            border-radius: 8px;
            color: #626262;
            text-decoration: none;
            padding: 15px
        }

            .wrapper .list_nav_recruit a:hover {
                color: #fff;
                font-weight: 600;
                background-color: #626262
            }

        .wrapper .list_nav_recruit .is_current {
            pointer-events: none;
            color: #fff;
            font-weight: 600;
            background-color: #626262
        }

    .wrapper .hgroup_lead {
        display: grid;
        grid-template-columns: 18% 1fr;
        align-items: baseline;
        width: auto;
        font-weight: 600;
        line-height: 1.4;
        color: #e4002b;
        background-color: #fff8f8;
        padding: 20px;
        margin: 30px 0 40px
    }

        .wrapper .hgroup_lead h3 {
            width: auto;
            font-weight: 600;
            margin: 0
        }

            .wrapper .hgroup_lead h3:before {
                content: "■"
            }

        .wrapper .hgroup_lead ul {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
            width: auto;
            list-style: none;
            margin: 0
        }

            .wrapper .hgroup_lead ul li {
                margin: 0
            }

                .wrapper .hgroup_lead ul li:before {
                    content: "■"
                }

    .wrapper .txt_message {
        border-top: 1px solid #aaa;
        border-bottom: 1px solid #aaa;
        padding: 32px 0
    }

    .wrapper .table_form {
        width: 100%;
        margin: 0 0 40px
    }

        .wrapper .table_form th, .wrapper .table_form td {
            text-align: left;
            vertical-align: middle;
            padding: 30px 5px
        }

        .wrapper .table_form th {
            width: 14vw
        }

            .wrapper .table_form th:after {
                float: right;
                display: block;
                font-size: .8em;
                font-weight: 500;
                line-height: 1;
                color: #fff;
                border-radius: 4px;
                padding: 5px 6px;
                margin: .2em 0 0
            }

            .wrapper .table_form th.is_any:after {
                content: "任意";
                background-color: #aaa
            }

            .wrapper .table_form th.is_required:after {
                content: "必須";
                background-color: #e4002b
            }

        .wrapper .table_form td {
            padding-left: 30px
        }

        .wrapper .table_form tr {
            border-bottom: 1px solid #e4e4e4
        }

    .wrapper .box_privacy {
        width: auto;
        text-align: center;
        margin: 30px 0
    }

    .wrapper .txt_privacy {
        text-align: center
    }

    .input-validation-error {
        color: #721c24;
        background-color: #f8d7da !important;
    }
    .field-validation-error {
        color: #dc3545;
    }

@media screen and (max-width: 640px) {
    img {
        max-width: 100%;
        height: auto
    }

    .ttl_contents {
        display: grid;
        width: auto;
        padding: 0 6% 25px;
        margin: 94px 0 42px
    }

        .ttl_contents h1 .txt_main {
            font-size: 1.4rem
        }

        .ttl_contents h1 .txt_english {
            font-size: 4rem;
            margin: 0 0 4px
        }

        .ttl_contents .list_bread {
            font-size: 1.2rem;
            margin: 0 0 34px
        }

    .wrapper {
        width: 88%;
        font-size: 1.55rem;
        line-height: 1.81;
        padding: 0;
        margin: 0 auto
    }

        .wrapper .ttl_cmn_1 {
            font-size: 1.9rem;
            font-weight: 700;
            line-height: 1.55;
            margin: 0 0 8px
        }

        .wrapper .ttl_cmn_2 {
            font-size: 2.1rem;
            font-weight: 700;
            line-height: 1.4;
            margin: 0 0 15px
        }

        .wrapper .ttl_cmn_3 {
            font-size: 2.2rem;
            margin: 0 0 15px
        }

        .wrapper p {
            margin: 0 0 30px
        }

        .wrapper table {
            margin: 0 0 30px
        }

            .wrapper table.is_block tbody, .wrapper table.is_block tr, .wrapper table.is_block th, .wrapper table.is_block td {
                display: block;
                width: 100%
            }

            .wrapper table.is_block tr {
                margin: 0 0 5px
            }

        .wrapper .table_cmn_2 {
            width: 100%
        }

            .wrapper .table_cmn_2 thead {
                background-color: #f8f8f8
            }

                .wrapper .table_cmn_2 thead th {
                    font-weight: 700;
                    padding: 10px
                }

            .wrapper .table_cmn_2 tbody tr:not(:last-child) {
                border-bottom: 1px solid #e4e4e4
            }

            .wrapper .table_cmn_2 th, .wrapper .table_cmn_2 td {
                text-align: left;
                font-weight: 500;
                vertical-align: baseline;
                padding: 20px 10px
            }

            .wrapper .table_cmn_2 th {
                white-space: wrap
            }

        .wrapper .table_cmn_3 {
            width: 100%;
            margin: -15px 0 30px
        }

            .wrapper .table_cmn_3 tbody tr:not(:last-child) {
                border-bottom: 1px solid #e4e4e4
            }

            .wrapper .table_cmn_3 th, .wrapper .table_cmn_3 td {
                padding: 0
            }

            .wrapper .table_cmn_3 tr {
                padding: 15px 0 15px;
                margin: 0
            }

        .wrapper .btn_cmn_1 {
            position: relative;
            display: inline-block;
            width: auto;
            color: #fff;
            line-height: 1.1;
            border-radius: 45px;
            text-decoration: none;
            overflow: hidden;
            background-color: #0b45a4
        }

            .wrapper .btn_cmn_1 span {
                position: relative;
                z-index: 2;
                display: block;
                width: auto;
                background-image: url(../images/common/icon_arrow_input.svg);
                background-position: center right 15px;
                background-size: .8em;
                padding: 18px 58px 18px 25px
            }

            .wrapper .btn_cmn_1:before {
                position: absolute;
                z-index: 1;
                top: 0;
                left: -100%;
                bottom: 0;
                content: "";
                display: block;
                width: 100%;
                height: 80px;
                transition: all .4s ease;
                border-radius: 35px;
                background-color: #e4002b;
                margin: auto 0
            }

            .wrapper .btn_cmn_1:hover:before {
                left: 0
            }

            .wrapper .btn_cmn_1:hover {
                color: #fff
            }

        .wrapper .list_rinen {
            font-size: 1.7rem;
            line-height: 1.8;
            margin: 0 0 20px 22px
        }

            .wrapper .list_rinen li {
                margin: 5px 0
            }

        .wrapper .grid_dl_1 {
            display: grid;
            grid-template-columns: 8em 1fr;
            align-items: baseline;
            gap: 5px 0;
            width: auto
        }

        .wrapper .list_dott {
            width: auto;
            list-style: none;
            margin: 0
        }

            .wrapper .list_dott li {
                display: inline-block;
                margin: 0
            }

                .wrapper .list_dott li:not(:last-child):after {
                    content: "、"
                }

        .wrapper .grid_3 {
            display: grid;
            grid-template-columns: auto;
            gap: 30px
        }

            .wrapper .grid_3 figcaption {
                margin: 6px 0 0
            }

        .wrapper .loop_glow, .wrapper .loop_privacy {
            width: auto;
            margin: 0 0 20px
        }

            .wrapper .loop_glow h3, .wrapper .loop_privacy h3 {
                display: grid;
                grid-template-columns: 1.5em 1fr;
                font-size: 1.8rem
            }

                .wrapper .loop_glow h3 span, .wrapper .loop_privacy h3 span {
                    display: block;
                    width: auto
                }

            .wrapper .loop_glow p, .wrapper .loop_privacy p {
                font-size: 1.6rem;
                margin: 0 0 0 1.5em
            }

        .wrapper .grid_recruit {
            grid-template-columns: auto;
            gap: 25px
        }

        .wrapper .list_nav_recruit {
            margin: 0 0 40px
        }

            .wrapper .list_nav_recruit a {
                font-size: 1.4rem;
                padding: 15px 0
            }

                .wrapper .list_nav_recruit a:hover {
                    color: #fff;
                    font-weight: 600;
                    background-color: #626262
                }

            .wrapper .list_nav_recruit .is_current {
                pointer-events: none;
                color: #fff;
                font-weight: 600;
                background-color: #626262
            }

        .wrapper .hgroup_lead {
            grid-template-columns: auto;
            margin: 0 0 30px
        }

            .wrapper .hgroup_lead h3 {
                font-size: 1.9rem;
                margin: 0 0 10px
            }

            .wrapper .hgroup_lead ul {
                display: block;
                list-style: disc;
                margin: 0 0 0 22px
            }

                .wrapper .hgroup_lead ul li {
                    margin: 2px 0
                }

                    .wrapper .hgroup_lead ul li:before {
                        content: none
                    }

        .wrapper .txt_message {
            border-top: 1px solid #aaa;
            border-bottom: 1px solid #aaa;
            padding: 32px 0
        }

        .wrapper .table_form {
            width: 100%;
            margin: 0 0 40px
        }

            .wrapper .table_form th, .wrapper .table_form td {
                padding: 0
            }

            .wrapper .table_form th {
                width: auto;
                margin: 0 0 20px
            }

                .wrapper .table_form th:after {
                    font-size: 1.2rem;
                    margin: 0
                }

            .wrapper .table_form td {
                padding-left: 0
            }

            .wrapper .table_form tr {
                padding: 20px 0
            }

            .wrapper .table_form tbody, .wrapper .table_form tr, .wrapper .table_form th, .wrapper .table_form td {
                display: block;
                width: 100%
            }

            .wrapper .table_form th {
                display: flex;
                align-items: baseline;
                gap: 10px
            }

            .wrapper .table_form input {
                width: 100%
            }

        .wrapper .box_privacy {
            width: auto;
            font-size: 1.5rem;
            text-align: left;
            line-height: 1.7;
            margin: 30px 0
        }

        .wrapper .txt_privacy {
            text-align: center
        }
}