@charset 'UTF-8';
/* ----------------------------------------------
関数
------------------------------------------------*/
.p-job-list
{
    position: relative;

    margin-top: var(--m100);
}
.p-job-list__heading
{
    margin-bottom: var(--m50);

    text-align: center;
}
.p-job-list__menu
{
    display: flex;

    margin-bottom: var(--m60);
    padding-top: 10px;

    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    grid-gap: var(--m20);
}
.p-job-list__menu.is-fixed
{
    position: fixed;
    z-index: 100;
    left: 50%;

    transform: translateX(-50%);
}
.p-job-list__menu.is-bottom
{
    position: absolute;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
}
.p-job-list__menu-item
{
    max-width: 280px;

    flex: 1;
}
.p-job-list__menu-link
{
    border-radius: var(--m10);
}
.p-job-list__menu-link *
{
    color: var(--main-white);
}
.p-job-list__menu .c-arrow
{
    transform: rotate(90deg);
}
.p-job-list__menu-placeholder
{
    display: none;

    margin-top: var(--m50);
    margin-bottom: var(--m70);
}
.p-job-list__menu-placeholder.is-active
{
    display: block;
}
.p-job-list__item:not(:first-of-type)
{
    margin-top: var(--m200);
}
.p-job-list__title
{
    display: flex;
    overflow: hidden;

    align-items: center;
}
.p-job-list__title-icon
{
    position: relative;
    z-index: 10;

    width: var(--fs50_90);
}
.p-job-list__title-text
{
    font-size: var(--fs18_26);
    font-weight: 600;

    position: relative;
    z-index: 1;

    width: calc(100% - var(--fs50_90));
    padding: .15em .5em .2em 1.25em;

    color: var(--main-white);
}
.p-job-list__title-text::before
{
    position: absolute;
    z-index: -1;
    top: 50%;
    left: calc(var(--fs50_90) / 2 * -1);

    display: inline-block;

    width: calc(100% + var(--fs50_90) / 2);
    height: 100%;

    content: '';
    transform: translateY(-50%);

    background: var(--grade03);
}
.p-job-list__tag-list
{
    display: flex;

    margin-top: var(--m40);

    flex-wrap: wrap;
    align-items: center;
    grid-gap: var(--m14);
}
.p-job-list__tag
{
    font-size: var(--fs14_22);

    padding: .1em 1em .25em;

    color: var(--main-white);
    background-color: var(--sub-col);
}
.p-job-list__catch
{
    font-size: var(--fs16_30);
    font-weight: 600;

    margin-top: var(--m40);

    color: var(--sub-col);
}
.p-job-list__salary
{
    display: flex;

    margin-top: var(--m20);

    flex-wrap: wrap;
    align-items: center;
    grid-gap: 8px;
}
.p-job-list__salary-icon
{
    width: var(--fs24_44);

    background: url(../images/jobs/icon_yen.svg) center/contain no-repeat;

    aspect-ratio: 1/1;
}
.p-job-list__salary-text
{
    font-size: var(--fs16_30);
    font-weight: 600;

    color: var(--sub-col);
}
.p-job-list__salary small
{
    font-size: var(--fs14_20);
    font-weight: 400;

    color: var(--sub-col);
}
.p-job-list__overview
{
    display: flex;

    margin-top: var(--m40);

    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    grid-gap: var(--m50) 0;
}
.p-job-list__overview-body
{
    width: 46.42%;
}
.p-job-list__overview-block:not(:first-of-type)
{
    margin-top: var(--m30);
}
.p-job-list__overview-title
{
    margin-bottom: 8px;
    padding: 0 1.5em;

    color: var(--sub-col);
    background-color: var(--col-blue02);
}
.p-job-list__overview-text
{
    font-size: var(--fs14_20);
}
.p-job-list__income:not(:first-of-type)
{
    margin-top: 8px;
    padding-top: 8px;

    border-top: 2px dotted var(--sub-col);
}
.p-job-list__income span
{
    font-size: var(--fs14_24);
    font-weight: 600;

    display: block;

    color: var(--sub-col);
}
.p-job-list__income strong,
.p-job-list__income em
{
    font-size: var(--fs18_28);
    font-weight: 600;

    display: block;

    color: var(--sub-col);
}
.p-job-list__income em
{
    color: var(--accent-col);
}
.p-job-list__image
{
    overflow: hidden;

    width: 48.78%;

    border: 1px solid var(--col-blue05);

    aspect-ratio: 683/469;
}
.p-job-list__image img
{
    height: 100%;

    -o-object-fit: contain;

       object-fit: contain;
}
.p-job-list__entry.c-button
{
    max-width: 630px;
    margin-top: var(--m100);
    margin-right: auto;
    margin-left: auto;
}
.p-job-list__entry.c-button .c-button__link
{
    border-radius: var(--m10);
}
.p-job-list__entry.c-button .c-button__text
{
    width: calc(100% - var(--fs20_24) - var(--m16));

    text-align: center;
}
.p-job-list__detail
{
    margin-top: var(--m50);
    padding: var(--m40);

    border-radius: var(--m10);
    background: var(--col-blue02);
}
.p-job-list__detail-inner
{
    padding: var(--m20_70) var(--m16_60);

    border-radius: var(--m10);
    background: var(--main-white);
}
.p-job-list__benefits
{
    display: flex;

    margin-top: var(--m200);
    padding: var(--m50) var(--m16_70);

    border: 2px solid var(--main-col);
    border-radius: var(--m10);
    background: var(--grade02);

    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    grid-gap: var(--m40) 0;
}
.p-job-list__benefits-icon
{
    width: 11.6%;
}
.p-job-list__benefits-body
{
    width: 57.23%;
}
.p-job-list__benefits-text
{
    color: var(--main-white);
}
.p-job-list__benefits .c-title
{
    margin-bottom: var(--m30);
}
.p-job-list__benefits .c-button
{
    width: 21.46%;
}

.p-flow
{
    margin-top: var(--m110);
    padding: var(--m100) 0 var(--m130);
}
.p-flow .c-title
{
    margin-bottom: var(--m30);
}
.p-flow__list
{
    position: relative;
    z-index: 1;

    display: flex;

    margin-top: var(--m60);

    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    grid-gap: var(--m40) 0;
}
.p-flow__list::before,
.p-flow__list::after
{
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;

    display: inline-block;

    width: 100%;
    height: 10px;

    content: '';
    transform: translate(-50%, -50%);

    background-color: var(--col-blue06);
}
.p-flow__list::before
{
    display: none;
}
.p-flow__item
{
    width: 22.857%;
    padding: 0 var(--m16) var(--m30);

    border: 2px solid var(--col-blue06);
    border-radius: var(--m10);
    background-color: var(--main-white);
}
.p-flow__num
{
    display: flex;
    flex-direction: column;

    width: var(--fs60_90);
    margin-top: calc(min(.9vw, 15px) * -1);
    margin-left: calc(min(.9vw, 15px) * -1 - var(--m16));

    border: 3px solid var(--main-white);
    border-radius: 100%;
    background-color: var(--main-col);

    aspect-ratio: 1/1;
    align-items: center;
    justify-content: center;
}
.p-flow__num small
{
    font-size: var(--fs14_20);
    font-weight: bold;
    line-height: 1;

    color: var(--main-white);
}
.p-flow__num span
{
    font-size: var(--fs18_30);
    font-weight: bold;
    line-height: 1;

    color: var(--main-white);
}
.p-flow__icon
{
    width: 100%;
    height: var(--fs52_110);
    margin-top: calc(var(--fs14_22) * -1);

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.p-flow__icon--01
{
    background-image: url(../images/jobs/flow01.svg);
}
.p-flow__icon--02
{
    background-image: url(../images/jobs/flow02.svg);
    background-size: auto 83.7%;
}
.p-flow__icon--03
{
    background-image: url(../images/jobs/flow03.svg);
}
.p-flow__icon--04
{
    background-image: url(../images/jobs/flow04.svg);
    background-size: auto 73.8%;
}
.p-flow__title
{
    font-size: var(--fs18_24);
    font-weight: 600;

    margin-top: var(--m25);

    text-align: center;

    color: var(--sub-col);
}
.p-flow__text
{
    margin-top: var(--m20);
    padding-top: var(--m8);

    border-top: var(--col-gray04) 2px dotted;
}

@media all and (max-width: 1024px)
{
    .p-job-list__menu.is-fixed
    {
        padding: 0 5%;
    }
}
@media all and (max-width: 768px)
{
    .p-job-list__menu-item
    {
        width: calc(50% - var(--m20) / 2);

        flex: unset;
    }
    .p-job-list__overview
    {
        justify-content: center;
    }
    .p-job-list__overview-body
    {
        width: 100%;
    }
    .p-job-list__image
    {
        width: 100%;
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;
    }
    .p-flow__list::before
    {
        top: 25%;

        display: inline-block;
    }
    .p-flow__list::after
    {
        top: 75%;
    }
    .p-flow__item
    {
        width: 48.5%;
    }
    .p-flow__num
    {
        margin-top: calc(var(--fs60_90) * -.2);
        margin-left: calc(var(--fs60_90) * -.4);
    }
}
@media all and (max-width: 620px)
{
    .p-job-list__menu.is-fixed
    {
        grid-row-gap: 5px;
    }
    .p-job-list__menu.is-fixed .p-job-list__menu-link
    {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .p-job-list__benefits
    {
        flex-direction: column;

        align-items: center;
    }
    .p-job-list__benefits-icon
    {
        width: 20%;
    }
    .p-job-list__benefits-body
    {
        width: 100%;
    }
    .p-job-list__benefits .c-button
    {
        width: 100%;
    }
}