@charset "utf-8";



/*  Foundation Float button
*/

.scroll-bottom .human-resource .float-button-box {
    bottom: 590px;
}



/*  Modules contact
*/

.humanresource-contact > .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--bg-color-primary);
    padding: 1em 0 0.5em;
}

.humanresource-contact-left {
    width: 40%;
    text-align: right;
}

.humanresource-contact-right {
    width: 50%;
    padding: 2em 0;
}



.humanresource-contact-image-2 {
    margin: 0 auto;
    width: 100%;
    max-width: 320px;
}

.humanresource-contact-image-3 {
    margin: 1em auto;
    width: 100%;
    max-width: 150px;
}



.humanresource-contact-telbox .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.humanresource-contact-telicon {
    margin: 0;
}

.humanresource-contact-telicon img {
    object-fit: contain;
    height: 44px;
    width: auto;
    margin-right: 10px;
}

.humanresource-contact-telnumber {
    margin: 0;
    letter-spacing: 2px;
}

.humanresource-contact-reception-time {
    margin: 0em 27% 0 0;
}

.humanresource-contact-text {
    margin: 0.85em 0 2em;

    color: var(--color-white);
    letter-spacing: 1px;
}

.humanresource-contact-button {
    margin: 2em 0 0;
    justify-content: center;
    align-items: center;
}

.humanresource-contact-button .contact-button .wp-block-button__link {
    border: 1px var(--color-dark-glay) solid;
}



/*  Modules flow
*/

.flow {
    margin: 7em 0;
}

.flow-title-text {
    margin: 0;
    font-weight: bold;
    font-size: 1.3em;
    color: var(--font-color-primary);
}

.flow-one {
    margin: 3em auto;
}

.flow-one > .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flow-one-step {
    border: 1px var(--color-dark-glay) solid;
    padding: 1.5em 5em;
    margin-right: 5em;
    margin-bottom: 0;
    width: fit-content;
    position: relative;
    background-color: var(--color-white);
}

.flow-one-step::after {
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 2.5em;

    position: absolute;
    top: 0;
    bottom: 0;
    right: -1em;
    width: 1em;
    height: 1em;
    margin: auto;
}

.flow-one-title {
    width: 20%;
    height: 160px;
    margin: 0;
    border: 1px var(--color-dark-glay) solid;
    border-right: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

.flow-one-title span {
    width: 80%;
    padding: 1.5em 10%;
    border-right: 1px var(--color-dark-glay) solid;
    font-weight: bold;
    font-size: 1.4em;
    color: var(--color-dark-glay);
}

.flow-one:nth-child(4) .flow-one-title span {
    padding: 0.9em 10%;
}

.flow-one-text {
    width: 38%;
    height: 160px;
    margin: 0;
    border: 1px var(--color-dark-glay) solid;
    border-left: none;

    display: flex;
    justify-content: center;
    align-items: center;
}

.flow-one-text span {
    width: 80%;
    padding: 0 10%;
    letter-spacing: 1px;
    line-height: 1.8em;
    font-size: 0.9em;
    color: var(--color-dark-glay);
}

.flow-one-after {
    width: fit-content;
    margin: 5em auto 0;
    padding: 1em;
    border: 1px var(--color-dark-glay) solid;
    background-color: var(--color-white);

    font-weight: bold;
    font-size: 1.6em;
    letter-spacing: 2px;
}



/*  Modules promiss
*/

.promiss {
    margin: 7em 0;
    padding: 3em 0;
    background-color: var(--bg-color-secondary);
}

.promiss > .wp-block-group__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.promiss-left {
    width: 40%;
    margin-right: 2%;
    text-align: right;
}

.promiss-right {
    width: 40%;
}

.promiss-right-text {
    margin: 2em auto;
    line-height: 3em;
    font-weight: bold;
}

.promiss-contact-button .contact-button .wp-block-button__link {
    border: 1px var(--color-dark-glay) solid;
}



/*  Modules resource site link
*/

.resource-site {
    margin: 12em 0;
    text-align: center;
}

.resource-site .link {
    position: relative;
    padding: 2em 10em;
    background-color: var(--bg-color-primary);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5em;
}

.resource-site .text {
    width: 100%;
    margin: 0.2em auto;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--color-white);
}



.resource-site .link::before {
    content: "";

    position: absolute;
    top: -14px;
    right: calc(5% - 5px);
    bottom: 0;
    width: 20px;
    height: 2px;
    margin: auto;
    background-color: var(--color-white);
    transform: rotate(45deg);
}

.resource-site .link::after {
    content: "";

    position: absolute;
    top: 0;
    right: 5%;
    bottom: 0;
    width: 13%;
    height: 2px;
    margin: auto;
    background-color: var(--color-white);
}



/*  pc middle : pc standard  ((1600 + 1920) / 2)
*/

@media screen and (max-width: 1760px) {
    /*  Modules contact
    */
    .humanresource-contact-reception-time {
        margin: 0em 21.5% 0 0;
    }
}


/*  pc small : pc middle  ((1366 + 1600) / 2)
*/

@media screen and (max-width: 1483px) {
    /*  Modules contact
    */
    .humanresource-contact-reception-time {
        margin: 0em 14% 0 0;
    }

    /*  Foundation Float button
    */
    .scroll-bottom .human-resource .float-button-box {
        bottom: 120px;
    }
}


/*  pc x-small : pc small  ((1280 + 1366) / 2)
*/

@media screen and (max-width: 1323px) {
    /*  Modules contact
    */
    .humanresource-contact-reception-time {
        margin: 0em 12% 0 0;
    }

    /*  Foundation Float button
    */
    .scroll-bottom .human-resource .float-button-box {
        bottom: 220px;
    }
}



/*  pc xx-small : pc small ((1024 + 1366) / 2)
*/

@media screen and (max-width: 1195px) {
    /*  Modules promiss
    */
    .promiss-right {
        width: 45%;
    }

    /*  Modules contact
    */
    .humanresource-contact-telicon img {
        height: 35px;
        margin-right: 5px;
    }

    .humanresource-contact-telnumber {
        font-size: 3.5em !important;
        letter-spacing: 1px;
    }

    .humanresource-contact-reception-time {
        margin: 0em 8.5% 0 0;
    }

    /*  Foundation Float button
    */
    .scroll-bottom .human-resource .float-button-box {
        bottom: 300px;
    }
}



/*  new iPad portrate : pc x-small ((810px + 1024px) / 2)
*/
@media screen and (max-width: 917px) {
    .flow-one-step {
        padding: 1.5em 3em;
        margin-right: 3em;
    }

    .flow-one-title {
        width: 25%;
    }

    .flow-one-text {
        width: 35%;
    }

    /*  Modules contact
    */
    .humanresource-contact-image-2 img {
        width: 204px;
        height: fit-content;
        object-fit: contain;
    }

    .humanresource-contact-image-3 {
        max-width: 120px;
    }

    .humanresource-contact-telicon img {
        height: 30px;
    }

    .humanresource-contact-telnumber {
        font-size: 2.5em !important;
    }

    .humanresource-contact-reception-time {
        margin: 0em 12% 0 0;
    }

    /*  Foundation Float button
    */
    .scroll-bottom .human-resource .float-button-box {
        bottom: 670px;
    }
}


/*  iPad portrate : new iPad portrate ((768px + 810px) / 2)
*/

@media screen and (max-width: 789px) {
    /*  Modules contact
    */
    .humanresource-contact-reception-time {
        margin: 0em 10% 0 0;
    }
}



/*  iPhone 12 pro Max : iPad portrate ((428px + 768px) / 2)
*/

@media screen and (max-width: 598px) {
    /*  humanresource-contact
    */
    .humanresource-contact > .wp-block-group__inner-container {
        flex-wrap: wrap;
        padding: 2em 0;
    }

    .humanresource-contact-left {
        width: 100%;
        margin: 0;
        position: relative;
    }

    .humanresource-contact-right {
        width: 100%;
        margin: 0;
    }

    .humanresource-contact-image-1 {
        position: absolute;
        top: 190px;
        left: 0;
        right: 0;
        width: fit-content;
        margin: auto;
    }

    .humanresource-contact-image-1 img {
        width: 283px;
        height: fit-content;
        object-fit: contain;
    }

    .humanresource-contact-image-2 {
    }

    .humanresource-contact-image-2 img {
        width: 204px;
        height: fit-content;
        object-fit: contain;
    }

    .humanresource-contact-image-3 {
        max-width: 120px;
    }

    .humanresource-contact-telicon img {
        height: 26px;
        margin-right: 5px;
    }

    .humanresource-contact-telnumber {
        font-size: 2.3em !important;
        letter-spacing: 1px;
    }

    .humanresource-contact-reception-time {
        margin: 0 auto;
        margin-bottom: calc(224px + 3em);    /* .humanresource-contact-image-1 imgの高さ + 上下margin */
        text-align: center;
    }

    .humanresource-contact-text {
        margin: 0 2em;
        font-size: var(--font-size-body-big);
    }

    .contact-button .wp-block-button__link {
        padding: 0.7em 1.5em 0.7em calc(1.5em + 15px);    /* padding + 左側の右向き矢印のwidthの3/8（数値上は1/2で良いが、右向き矢印が円形で周囲にスペースがあるため広く見え、錯視補正のため3/8としておく） */
        letter-spacing: 0;
    }

    /*  flow
    */
    .flow {
        margin: 3em auto;
    }

    .flow-one {
        margin: 0;
    }

    .flow-title-image img {
        width: 103px;
        height: fit-content;
        object-fit: contain;
    }

    .flow-title-text {
        font-size: var(--font-size-main);
        margin-bottom: 1.5em;
    }

    .flow-one > .wp-block-group__inner-container {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .flow-one-step {
        display: inline-block;
        width: 58px;
        height: 34px;
        line-height: 26px;
        margin: 0 0 0 5%;
        padding: 0;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px var(--color-dark-glay) solid;
        text-align: center;
        background-color: var(--color-white);
    }

    .flow-one-step img {
        vertical-align: middle;
    }

    .flow-one-step::after {
        content: "\f0d7";
        left: 0;
        right: 0;
        top: auto;
        bottom: -0.8em;
    }

    .flow-one-title {
        width: calc(86% - 58px);    /* 計算上は90%から引けば良いが、.flow-one-textのテキスト幅にあわせるため調整する */
        height: 34px;
        padding-left: 5%;
        box-sizing: border-box;
        border: none;
        border-bottom: 1px var(--color-dark-glay) solid;
        justify-content: flex-start;
    }

    .flow-one-title span {
        width: initial;
        padding: 0;
        border: none;
    }

    .flow-one:nth-child(4) .flow-one-title span {
        padding: 0;
    }

    .flow-one-title br {
        display: none;
    }

    .flow-one-text {
        width: 100%;
        height: initial;
        margin: 1em 5% 3em calc(10% + 58px);
        border: none;
    }

    .flow-one-text span {
        width: 100%;
        padding: 0;
        font-size: var(--font-size-body);
        line-height: 2em;
    }

    .flow-one-after {
        width: fit-content;
        margin: 1em 8.9% 1em calc(10% + 50px);    /* .flow-one-textと右は合わせる、左ははみ出す */
        padding: 0.5em;
        box-sizing: border-box;
        border: 1px var(--color-dark-glay) solid;
        font-size: var(--font-size-main);
        text-align: left;
    }

    /*  promiss
    */
    .promiss {
        margin: 2em 0;
        padding: 1em 0;
    }

    .promiss > .wp-block-group__inner-container {
        flex-wrap: wrap;
    }

    .promiss-left {
        width: 100%;
        margin: 0;
    }

    .promiss-right {
        width: 100%;
        margin: 0;
    }

    .promiss-left > .wp-block-group__inner-container {
        position: relative;
    }

    .promiss-left-image {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        bottom: auto;
        width: auto;
        margin: auto;
    }

    .promiss-left-image img {
        height: fit-content;
        object-fit: contain;
    }

    .promiss-right-image {
        margin-bottom: 260px;
        text-align: center;
    }

    .promiss-right-image img {
        width: 269px;
        height: fit-content;
        object-fit: contain;
    }

    .promiss-right-text {
        margin: 0 0.3em 3em;
        font-size: var(--font-size-body-big);
    }

    .promiss-contact-button {
        margin: 3em auto;
    }


    /*  resouce site
    */
    .resource-site {
        margin: 3em 0 10em;
    }

    .resource-site .link {
        width: 90%;
        margin: auto;
        padding: 0.8em 0;
        border-radius: 2em;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .resource-site img {
        width: 103px;
        height: fit-content;
        object-fit: contain;
    }

    .resource-site .text {
        margin: 0.2em 0 0 0;
        line-height: 1em;
        letter-spacing: 0;
        font-size: var(--font-size-body);
    }

    .resource-site .link::before {
        top: -8px;
        right: 5%;
        bottom: 0;
        width: 10px;
        height: 1px;
    }

    .resource-site .link::after {
        height: 1px;
    }

    .resource-site .text {
        width: 100%;
    }

    /*  humanresource-contact:last-child
    */
    .humanresource-contact:last-child {
        display: none;
    }

    /*  Foundation Float button
    */
    .scroll-bottom .human-resource .float-button-box {
        bottom: 0;
    }
}



/*  iPhone 6/7/8 : iPhone 12/12 pro ((375px + 390px) / 2)
*/

@media screen and (max-width: 383px) {
    .promiss-right-text {
        letter-spacing: -1px;
    }
}





