@charset "utf-8";

@import url("/group/sfe/assets/css/components/recruit-content.css");
@import url("/group/sfe/assets/css/components/link-card.css");

/*==================================================
icon
================================================== */
:root {
    --icon-dot: url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20fill%3D%22url%28%23paint0_linear_640_15827%29%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_640_15827%22%20x1%3D%220%22%20y1%3D%223%22%20x2%3D%226%22%20y2%3D%223%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23117DCA%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23179AB9%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");

    --icon-enquete: url("data:image/svg+xml,%3Csvg%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20395.6%20512%22%3E%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20%234b4b4b%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M391.7%2C88c-3.8-8.9-10-16.4-17.9-21.8-7.9-5.3-17.5-8.5-27.7-8.5h-42.7v-7.4h-61.8c.3-2%2C.4-4.1.4-6.1%2C0-24.4-19.8-44.2-44.2-44.2s-44.2%2C19.8-44.2%2C44.2.2%2C4.1.4%2C6.1h-61.8v7.4h-42.7c-6.8%2C0-13.4%2C1.4-19.3%2C3.9-8.9%2C3.8-16.5%2C10-21.8%2C17.9C3.1%2C87.4%2C0%2C97%2C0%2C107.2v355.2c0%2C6.8%2C1.4%2C13.3%2C3.9%2C19.3%2C3.8%2C8.9%2C10%2C16.4%2C17.9%2C21.8%2C7.9%2C5.3%2C17.5%2C8.5%2C27.7%2C8.5h296.5c6.8%2C0%2C13.4-1.4%2C19.3-3.9%2C8.9-3.8%2C16.5-10%2C21.8-17.9%2C5.3-7.9%2C8.5-17.5%2C8.5-27.7V107.2c0-6.8-1.4-13.4-3.9-19.3ZM197.8%2C27.8c9%2C0%2C16.4%2C7.4%2C16.4%2C16.4s-.4%2C4.2-1.2%2C6.1h-30.4c-.8-1.9-1.2-4-1.2-6.1%2C0-9%2C7.4-16.4%2C16.4-16.4ZM366.1%2C462.5c0%2C2.8-.6%2C5.4-1.6%2C7.8-1.5%2C3.6-4.1%2C6.7-7.3%2C8.9-3.2%2C2.2-7%2C3.4-11.2%2C3.4H49.5c-2.8%2C0-5.4-.6-7.8-1.6-3.6-1.5-6.7-4.1-8.8-7.3-2.2-3.2-3.4-7-3.4-11.2V107.2c0-2.8.6-5.4%2C1.6-7.8%2C1.5-3.6%2C4.1-6.7%2C7.3-8.8%2C3.2-2.2%2C7-3.4%2C11.2-3.4h42.7v6.1c0%2C11.5%2C9.3%2C20.9%2C20.9%2C20.9h169.4c11.5%2C0%2C20.9-9.3%2C20.9-20.9v-6.1h42.7c2.8%2C0%2C5.4.6%2C7.8%2C1.6%2C3.6%2C1.5%2C6.7%2C4.1%2C8.8%2C7.3s3.4%2C7%2C3.4%2C11.2v355.2Z%22%2F%3E%20%20%3Crect%20class%3D%22st0%22%20x%3D%2297.9%22%20y%3D%22170.7%22%20width%3D%2231.6%22%20height%3D%2231.6%22%2F%3E%20%20%3Crect%20class%3D%22st0%22%20x%3D%22167.3%22%20y%3D%22170.7%22%20width%3D%22130.4%22%20height%3D%2231.6%22%2F%3E%20%20%3Crect%20class%3D%22st0%22%20x%3D%2297.9%22%20y%3D%22264.1%22%20width%3D%2231.6%22%20height%3D%2231.6%22%2F%3E%20%20%3Crect%20class%3D%22st0%22%20x%3D%22167.3%22%20y%3D%22264.1%22%20width%3D%22130.4%22%20height%3D%2231.6%22%2F%3E%20%20%3Crect%20class%3D%22st0%22%20x%3D%2297.9%22%20y%3D%22357.6%22%20width%3D%2231.6%22%20height%3D%2231.6%22%2F%3E%20%20%3Crect%20class%3D%22st0%22%20x%3D%22167.3%22%20y%3D%22357.6%22%20width%3D%22130.4%22%20height%3D%2231.6%22%2F%3E%3C%2Fsvg%3E");

    --icon-maker: url("data:image/svg+xml,%3Csvg%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20424.2%20512%22%3E%20%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20%234b4b4b%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M362%2C62.1c-82.8-82.8-217.1-82.8-299.9%2C0-82.8%2C82.8-82.8%2C217.1%2C0%2C299.9l150%2C150%2C150-150c82.8-82.8%2C82.8-217.1%2C0-299.9ZM212.1%2C293.2c-44.8%2C0-81.1-36.3-81.1-81.1s36.3-81.1%2C81.1-81.1%2C81.1%2C36.3%2C81.1%2C81.1-36.3%2C81.1-81.1%2C81.1Z%22%2F%3E%3C%2Fsvg%3E");

    --icon-card: url("data:image/svg+xml,%3Csvg%20id%3D%22_x32_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20512%20477.5%22%3E%20%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20%234b4b4b%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M317.8%2C44.1c0-24.3-19.8-44.1-44.1-44.1h-35.3c-24.3%2C0-44.1%2C19.8-44.1%2C44.1v79.4h123.6V44.1ZM282.5%2C61.8c0%2C4.9-3.9%2C8.8-8.8%2C8.8h-35.3c-4.9%2C0-8.8-3.9-8.8-8.8v-17.7c0-4.9%2C3.9-8.8%2C8.8-8.8h35.3c4.9%2C0%2C8.8%2C3.9%2C8.8%2C8.8v17.7Z%22%2F%3E%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M492%2C106.8h-156.5v16.8c0%2C9.8-7.9%2C17.7-17.7%2C17.7h-123.6c-9.7%2C0-17.7-7.9-17.7-17.7v-16.8H20c-11.1%2C0-20%2C9-20%2C20v330.8c0%2C11%2C8.9%2C19.9%2C20%2C19.9h471.9c11%2C0%2C20-8.9%2C20-19.9V126.8c0-11-9-20-20-20ZM101.2%2C247.6c0-27.2%2C22.1-49.3%2C49.3-49.3s49.3%2C22.1%2C49.3%2C49.3v14c0%2C27.2-22.1%2C49.3-49.3%2C49.3s-49.3-22.1-49.3-49.3v-14ZM150.5%2C404.4H60.4c0-41%2C24-74.7%2C70-82.3%2C6.3%2C2.1%2C13.1%2C3.3%2C20.1%2C3.3s13.8-1.2%2C20.1-3.3c45.9%2C7.5%2C70%2C41.3%2C70%2C82.3h-90.1ZM372.3%2C394.6h-53v-17.7h53v17.7ZM425.3%2C318.1h-105.9v-17.7h105.9v17.7ZM425.3%2C241.6h-105.9v-17.7h105.9v17.7Z%22%2F%3E%3C%2Fsvg%3E");


}

/*==================================================
sp
================================================== */

/* ========================================================================
[sp]interview-page-header
========================================================================= */
.job-page-header {
    margin: calc(32 * var(--vw-unit)) auto calc(64 * var(--vw-unit));
    padding: 0 calc(16 * var(--vw-unit));
    position: relative;
}

.job-page-header h1 {
    margin: 0 auto calc(24 * var(--vw-unit));
    color: #000;
    font-family: var(--font-sans-serif);
    font-size: calc(24 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
}

.job-page-header__lead {
    margin: 0 auto calc(32 * var(--vw-unit));
    color: #000;
    font-family: var(--font-sans-serif);
    font-size: calc(14 * var(--vw-unit));
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}

.job-page-header figure {
    margin: 0 0 calc(32 * var(--vw-unit)) calc(-63 * var(--vw-unit));
    width: calc(467 * var(--vw-unit));
}

.job-page-header figure img {
    max-width: calc(467 * var(--vw-unit));
    width: calc(467 * var(--vw-unit));
    height: auto;
}

/* ========================================================================
[sp]section-wrapper
========================================================================= */
.section-wrapper {
    background: #E1F5FA;
    margin-bottom: calc(100 * var(--vw-unit));
    padding: calc(64 * var(--vw-unit)) calc(16 * var(--vw-unit));
}

/* ========================================================================
[sp]job-overview
========================================================================= */
.job-overview {
    margin: 0 auto calc(64 * var(--vw-unit));
    width: calc(343 * var(--vw-unit));
}

.job-overview__item {
    background: #fff;
    padding: calc(24 * var(--vw-unit));
}

.job-overview__item dt {
    color: #000;
    font-family: var(--font-sans-serif);
    font-size: calc(18 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
    margin-bottom: calc(24 * var(--vw-unit));
    padding: 0 0 0 calc(42 * var(--vw-unit));
    position: relative;
}

.job-overview__item--duties dt::before {
    content: "";
    width: calc(27 * var(--vw-unit));
    height: calc(35 * var(--vw-unit));
    background-color: #0F78C0;
    -webkit-mask: var(--icon-enquete);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask: var(--icon-enquete);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    position: absolute;
    top: calc(50% - calc(17.5 * var(--vw-unit)));
    left: calc(6 * var(--vw-unit));
}

.job-overview__item--role dt::before {
    content: "";
    width: calc(29 * var(--vw-unit));
    height: calc(36 * var(--vw-unit));
    background-color: #0F78C0;
    -webkit-mask: var(--icon-maker);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask: var(--icon-maker);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    position: absolute;
    top: calc(50% - calc(18 * var(--vw-unit)));
    left: calc(3 * var(--vw-unit));
}

.job-overview__item--employment dt::before {
    content: "";
    width: calc(30 * var(--vw-unit));
    height: calc(27 * var(--vw-unit));
    background-color: #0F78C0;
    -webkit-mask: var(--icon-card);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask: var(--icon-card);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    position: absolute;
    top: calc(50% - calc(13.5 * var(--vw-unit)));
    left: calc(3 * var(--vw-unit));
}


.job-overview__item dd {
    border-top: calc(1 * var(--vw-unit)) #ccc solid;
    padding: calc(24 * var(--vw-unit)) 0 0;
}


.job-overview__item--duties {
    margin-bottom: calc(4 * var(--vw-unit));
    border-radius: calc(32 * var(--vw-unit)) calc(32 * var(--vw-unit)) 0 0;
}

.job-overview__item--role {
    margin-bottom: calc(4 * var(--vw-unit));
}

.job-overview__item--employment {
    border-radius: 0 0 calc(32 * var(--vw-unit)) calc(32 * var(--vw-unit));
}

.job-overview__list {
    list-style: none;
    color: #000;
    font-family: var(--font-sans-serif);
    font-size: calc(14 * var(--vw-unit));
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
}

.job-overview__list li {
    padding-left: calc(20 * var(--vw-unit));
    position: relative;
}

.job-overview__list li+li {
    margin-top: calc(19 * var(--vw-unit));
}

.job-overview__list li::before {
    content: "";
    width: calc(6 * var(--vw-unit));
    height: calc(6 * var(--vw-unit));
    background-color: #0F78C0;
    -webkit-mask: var(--icon-dot);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask: var(--icon-dot);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    position: absolute;
    top: calc(0.85em - calc(3 * var(--vw-unit)));
    left: calc(5 * var(--vw-unit));
}


.job-overview__table th {
    color: #000;
    font-family: var(--font-sans-serif);
    font-size: calc(16 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
    padding: 0 0 calc(16 * var(--vw-unit));
}

.job-overview__table td {
    color: #000;
    font-family: var(--font-sans-serif);
    font-size: calc(14 * var(--vw-unit));
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    padding: 0 0 calc(16 * var(--vw-unit)) calc(24 * var(--vw-unit));
}

.job-overview__table tr:last-child th,
.job-overview__table tr:last-child td {
    padding-bottom: 0;
}

/* ========================================================================
[sp]day-work-section
========================================================================= */

.day-work-section {
    margin: 0 auto calc(100 * var(--vw-unit));
    width: calc(343 * var(--vw-unit));
}

.work-wrapper {
    position: relative;
}

.work-wrapper::before {
    content: '';
    width: calc(8 * var(--vw-unit));
    background: #0CA4CF;
    position: absolute;
    top: calc(34 * var(--vw-unit));
    bottom: 0;
    left: 0;
}

.work {
    margin-top: calc(4 * var(--vw-unit));
    background: #fff;
    padding: calc(24 * var(--vw-unit)) calc(24 * var(--vw-unit)) calc(24 * var(--vw-unit)) calc(34 * var(--vw-unit));
}

.work#work01 {
    margin-top: 0;
    border-radius: calc(32 * var(--vw-unit)) calc(32 * var(--vw-unit)) 0 0;
}

.work h3 {
    color: #000;
    font-family: var(--font-sans-serif);
    font-size: calc(18 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    margin-bottom: calc(20 * var(--vw-unit));
    padding-bottom: calc(20 * var(--vw-unit));
    border-bottom: calc(1 * var(--vw-unit)) #ccc solid;
}

.work h3 .time {
    color: #0180A3;
    font-size: calc(40 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    display: block;
    margin-bottom: calc(16 * var(--vw-unit));
    position: relative;
}

.work h3 .time::before {
    content: '';
    width: calc(24 * var(--vw-unit));
    height: calc(24 * var(--vw-unit));
    background: url(/group/sfe/recruit/jobs/ma_full/assets/img/time_pointer.svg) no-repeat center center;
    background-size: calc(24 * var(--vw-unit)) auto;
    position: absolute;
    top: calc(50% - calc(12 * var(--vw-unit)));
    left: calc(-42 * var(--vw-unit));
    z-index: 10;
}


.work p {
    color: #000;
    font-family: var(--font-sans-serif);
    font-size: calc(14 * var(--vw-unit));
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}

.work-wrapper figure img {
    width: 100%;
    height: auto;
}

/* ========================================================================
[sp]jobs-section
========================================================================= */
.jobs-section {
    margin: 0 auto calc(100 * var(--vw-unit));
    width: calc(343 * var(--vw-unit));
}

/* ========================================================================
[sp]related-section
========================================================================= */
.related-section {
    margin: 0 auto;
    width: calc(343 * var(--vw-unit));
}

.section__sub-title {
    margin-bottom: calc(32 * var(--vw-unit));
    color: #000;
    font-family: var(--font-sans-serif);
    font-size: calc(24 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
}


/* ========================================================================
[sp]job-list
========================================================================= */
.job-list {
    margin: 0 auto;
    width: calc(343 * var(--vw-unit));
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: calc(24 * var(--vw-unit)) calc(16 * var(--vw-unit));
}

.job-list li {
    width: calc(163 * var(--vw-unit));
    display: flex;
}

.job-list li a,
.job-list li .is-current {
    background: var(--color-white);
    display: block;
    width: 100%;
    text-decoration: none;
    border-radius: calc(32 * var(--vw-unit));
    overflow: hidden;
    padding-bottom: calc(62 * var(--vw-unit));
    border: calc(1 * var(--vw-unit)) #ccc solid;
    position: relative;
}

.job-list li .is-current::before {
    content: "";
    background: #031521;
    opacity: 0.8;
    position: absolute;
    inset: 0;
    z-index: 10;
}

.job-list li .job-list__current-label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: var(--font-sans-serif);
    font-size: calc(24 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
    position: absolute;
    inset: 0;
    z-index: 11;
}

h3.job-list__title {
    margin: 0;
    padding: calc(16 * var(--vw-unit)) calc(16 * var(--vw-unit)) 0;
    color: var(--color-black);
    font-family: var(--font-sans-serif);
    font-size: calc(16 * var(--vw-unit));
    font-style: normal;
    font-weight: 700;
    line-height: 170%;
}

.job-list__link {
    width: calc(48 * var(--vw-unit));
    height: calc(33 * var(--vw-unit));
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    bottom: calc(16.5 * var(--vw-unit));
    right: calc(16 * var(--vw-unit));
}

.job-list__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border: calc(3 * var(--vw-unit)) solid transparent;
    border-radius: calc(50 * var(--vw-unit));
    background: linear-gradient(90deg, #0E76C0 0%, #189AB8 100%) border-box;
    mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
}

.job-list__link::after {
    content: "";
    width: calc(14 * var(--vw-unit));
    height: calc(12 * var(--vw-unit));
    background-color: #0F78C0;
    -webkit-mask: var(--icon-link-arrow);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask: var(--icon-link-arrow);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    position: absolute;
    top: calc(50% - calc(6 * var(--vw-unit)));
    right: calc(17 * var(--vw-unit));
    pointer-events: none;
}


/* ========================================================================
[sp]banner-interview
========================================================================= */
.banner-interview {
    margin: 0 auto calc(100 * var(--vw-unit));
    width: calc(343 * var(--vw-unit));
}

/* ========================================================================
[sp]video-list
========================================================================= */
.video-list {
    margin: 0 auto calc(100 * var(--vw-unit));
    width: calc(343 * var(--vw-unit));
    list-style: none;
}

.video-list li {
    width: calc(343 * var(--vw-unit));
}

.video-list li+li {
    margin-top: calc(32 * var(--vw-unit));
}


/*==================================================
pc
================================================== */
@media print,
screen and (min-width:768px) {


    /* ========================================================================
    [pc]job-page-header
    ========================================================================= */
    .job-page-header {
        margin: 0 auto;
        padding: 160px 0 0;
        width: var(--pc-container);
        min-height: 654px;
        min-height: 564px;
        position: relative;
    }

    .job-page-header h1 {
        margin: 0 auto 16px;
        color: #000;
        font-family: var(--font-sans-serif);
        font-size: 42px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
    }

    .job-page-header__lead {
        margin: 0 0 40px;
        width: auto;
        max-width: 580px;
        color: #000;
        font-family: var(--font-sans-serif);
        font-size: 16px;
        letter-spacing: -0.0125em;
        font-style: normal;
        font-weight: 400;
        line-height: 180%;
    }

    .job-page-header figure {
        margin: 0;
        width: 72.68%;
        max-width: 846px;
        position: absolute;
        top: 0;
        right: 0;
        left: 584px;
        left: 50.17%;
    }

    .job-page-header figure img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* ========================================================================
    [pc]小ディスプレイ、拡大対応
    ========================================================================= */
    @media print,
    screen and (max-width:1280px) {
        .job-page-header h1 {
            margin: 0 0 16px;
            width: 40%;
            font-size: 38px;
        }

        .job-page-header__lead {
            margin: 0 0 40px;
            width: 40%;
            max-width: 40%;
        }

        .job-page-header figure {
            width: 60%;
            position: absolute;
            top: 0;
            right: 0;
            left: calc(100% - 56%);
            z-index: -1;
        }

    }

    /* ========================================================================
    [pc]section-wrapper
    ========================================================================= */
    .section-wrapper {
        background: #E1F5FA;
        margin: 0 0 120px;
        padding: 80px 0;
        width: 100%;
    }


    /* ========================================================================
    [pc]job-overview
    ========================================================================= */
    .job-overview {
        margin: 0 auto 80px;
        width: var(--pc-container);
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }

    .job-overview__item {
        background: #fff;
        padding: 32px;
        width: 33.07560137%;
        max-width: 385px;
    }

    .job-overview__item dt {
        color: #000;
        font-family: var(--font-sans-serif);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
        margin-bottom: 32px;
        padding: 0 0 0 42px;
        position: relative;
    }

    .job-overview__item--duties dt::before {
        content: "";
        width: 27px;
        height: 35px;
        background-color: #0F78C0;
        -webkit-mask: var(--icon-enquete);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask: var(--icon-enquete);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
        position: absolute;
        top: calc(50% - 17.5px);
        left: 0;
    }

    .job-overview__item--role dt::before {
        content: "";
        width: 29px;
        height: 36px;
        background-color: #0F78C0;
        -webkit-mask: var(--icon-maker);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask: var(--icon-maker);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
        position: absolute;
        top: calc(50% - 18px);
        left: 3px;
    }

    .job-overview__item--employment dt::before {
        content: "";
        width: 30px;
        height: 27px;
        background-color: #0F78C0;
        -webkit-mask: var(--icon-card);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask: var(--icon-card);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
        position: absolute;
        top: calc(50% - 13.5px);
        left: 3px;
    }


    .job-overview__item dd {
        border-top: 1px #ccc solid;
        padding: 24px 0 0;
    }


    .job-overview__item--duties {
        margin-bottom: 0;
        border-radius: 32px 0 0 32px;
    }

    .job-overview__item--role {
        margin-bottom: 0;
    }

    .job-overview__item--employment {
        border-radius: 0 32px 32px 0;
    }

    .job-overview__list {
        list-style: none;
        color: #000;
        font-family: var(--font-sans-serif);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 170%;
    }

    .job-overview__list li {
        padding-left: 20px;
        position: relative;
    }

    .job-overview__list li+li {
        margin-top: 16px;
    }

    .job-overview__list li::before {
        content: "";
        width: 6px;
        height: 6px;
        background-color: #0F78C0;
        -webkit-mask: var(--icon-dot);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask: var(--icon-dot);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
        position: absolute;
        top: calc(0.85em - 3px);
        left: 5px;
    }


    .job-overview__table th {
        color: #000;
        font-family: var(--font-sans-serif);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
        text-align: left;
        white-space: nowrap;
        vertical-align: top;
        padding: 0 0 16px;
    }

    .job-overview__table td {
        color: #000;
        font-family: var(--font-sans-serif);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 170%;
        padding: 0 0 16px 24px;
    }

    .job-overview__table tr:last-child th,
    .job-overview__table tr:last-child td {
        padding-bottom: 0;
    }


    /* ========================================================================
    [pc]day-work-section
    ========================================================================= */

    .day-work-section {
        margin: 0 auto 80px;
        width: var(--pc-container);
    }

    .work-wrapper {
        --work-gap: 16px;
        --work-gap-half: 8px;
        --work-column-width: calc((100% - var(--work-gap)) / 2);
        --work-content-left: 56px;
        --work-content-right: 32px;
        --time-pointer-size: 54px;
        --time-pointer-half: 27px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 4px var(--work-gap);
    }

    .work-wrapper::before {
        content: '';
        width: var(--work-gap);
        background: #0CA4CF;
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--work-column-width);
    }

    .work {
        margin-top: 0;
        background: #fff;
        padding: 24px 32px 24px var(--work-content-left);
        width: var(--work-column-width);
        min-height: 285px;
    }

    .work#work01 {
        margin-top: 0;
        border-radius: 0 32px 0 0;
    }

    .work h3 {
        color: #000;
        font-family: var(--font-sans-serif);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px #ccc solid;
    }

    .work h3 .time {
        color: #0180A3;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        display: block;
        margin-bottom: 16px;
        position: relative;
    }

    .work h3 .time::before {
        content: '';
        width: var(--time-pointer-size);
        height: var(--time-pointer-size);
        background: url(/group/sfe/recruit/jobs/ma_full/assets/img/time_pointer.svg) no-repeat center center;
        background-size: var(--time-pointer-size) auto;
        position: absolute;
        top: calc(50% - var(--time-pointer-half));
        left: -36px;
        z-index: 10;
    }

    .work#work01 h3 .time::before,
    .work#work03 h3 .time::before,
    .work#work05 h3 .time::before,
    .work#work07 h3 .time::before,
    .work#work09 h3 .time::before,
    .work#work11 h3 .time::before {
        position: absolute;
        top: 100px;
        left: calc(0px - var(--work-content-left) - var(--work-gap-half) - var(--time-pointer-half));
    }

    .work#work02 h3 .time::before,
    .work#work04 h3 .time::before,
    .work#work06 h3 .time::before,
    .work#work08 h3 .time::before,
    .work#work10 h3 .time::before {
        position: absolute;
        top: 100px;
        left: calc(100% + var(--work-content-right) + var(--work-gap-half) - var(--time-pointer-half));
    }

    .work p {
        color: #000;
        font-family: var(--font-sans-serif);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 180%;
    }


    .work-wrapper figure {
        width: var(--work-column-width);
        overflow: hidden;
    }

    .work-wrapper figure img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    figure#work-image01 {
        order: 1;
        border-radius: 32px 0 0 0;
        overflow: hidden;
    }

    .work#work01 {
        order: 2;
    }

    .work#work02 {
        order: 3;
    }

    figure#work-image02 {
        order: 4;
    }

    figure#work-image03 {
        order: 5;
    }

    .work#work03 {
        order: 6;
    }

    .work#work04 {
        order: 7;
    }

    figure#work-image04 {
        order: 8;
    }

    figure#work-image05 {
        order: 9;
    }

    .work#work05 {
        order: 10;
    }

    .work#work06 {
        order: 11;
    }

    figure#work-image06 {
        order: 12;
    }

    figure#work-image07 {
        order: 13;
    }

    .work#work07 {
        order: 14;
    }

    .work#work08 {
        order: 15;
    }

    figure#work-image08 {
        order: 16;
    }

    figure#work-image09 {
        order: 17;
    }

    .work#work09 {
        order: 18;
    }

    .work#work10 {
        order: 19;
    }


    figure#work-image10 {
        order: 20;
    }

    figure#work-image11 {
        order: 21;
    }

    .work#work11 {
        order: 22;
    }

    /* ========================================================================
    [pc]jobs-section
    ========================================================================= */
    .jobs-section {
        margin: 0 auto 120px;
        width: var(--pc-container);
    }

    /* ========================================================================
    [pc]related-section
    ========================================================================= */
    .related-section {
        margin: 0 auto;
        width: var(--pc-container);
    }

    .section__sub-title {
        margin-bottom: 40px;
        color: #000;
        font-family: var(--font-sans-serif);
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
    }

    /* ========================================================================
    [pc]job-list
    ========================================================================= */
    .job-list {
        margin: 0 auto;
        width: var(--pc-container);
        list-style: none;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

    .job-list li {
        width: 22.93814433%;
        max-width: 267px;
        display: block;
        container-type: inline-size;
    }

    .job-list li+li {
        margin-top: 0;
    }

    .job-list li a,
    .job-list li .is-current {
        display: flex;
        flex-direction: column;
        padding-bottom: 16px;
        max-width: 267px;
        width: 100%;
        aspect-ratio: 267 / 387;
        /* height: 387px; */
        height: auto;
        min-height: 100%;
        border-radius: 32px;
        padding: 0;
        border: 1px #ccc solid;
        position: relative;
    }

    .job-list li .is-current::before {
        content: "";
        background: #031521;
        opacity: 0.8;
        position: absolute;
        inset: 0;
        z-index: 10;
    }

    .job-list li .job-list__current-label {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
        font-family: var(--font-sans-serif);
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
        position: absolute;
        inset: 0;
        z-index: 11;
    }

    .job-list li figure {
        overflow: hidden;
        width: 100%;
        /* height: 229px; */
        aspect-ratio: 267 / 229;
        height: auto;
        position: static;
    }

    .job-list li figure img {
        transition: all 0.3s ease;
    }

    .job-list li a:hover figure img {
        transform: scale(1.1);
        transform-origin: center center;
    }

    h3.job-list__title {
        margin: 20px 20px 0;
        padding: 0;
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 170%;
    }

    @container (max-width: 250px) {
        h3.job-list__title {
            margin: 10px 10px 0;
            font-size: 16px;
        }
    }

    @container (max-width: 220px) {
        h3.job-list__title {
            margin: 10px 10px 0;
            font-size: 14px;
        }
    }

    @container (max-width: 184px) {
        h3.job-list__title {
            margin: 10px 10px 0;
            font-size: 13px;
        }
    }

    @container (max-width: 170px) {
        h3.job-list__title {
            margin: 10px 10px 0;
            font-size: 12px;
        }
    }

    .job-list__link {
        margin: 0;
        margin-top: auto;
        width: max-content;
        color: var(--color-black);
        font-family: var(--font-sans-serif);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 180%;
        color: var(--color-black);
        display: flex;
        height: 42px;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        bottom: 16px;
        right: 20px;
        padding-right: 70px;
        transition: color 0.3s ease;
        overflow: hidden;
    }

    a:hover .job-list__link {
        color: rgba(0, 0, 0, 0.4);
    }


    .job-list__link::before {
        content: "";
        display: block;
        background: #fff;
        width: 60px;
        height: 42px;
        box-sizing: border-box;
        border: 3px solid #0E76C0;
        border-radius: 50px;
        transition: all 0.3s ease;
        -webkit-mask: none;
        mask: none;
        inset: auto;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    a:hover .job-list__link::before {
        background: linear-gradient(90deg, #0e76c0 0%, #189ab8 100%);
        border: none;
    }

    .job-list__link::after {
        content: "";
        width: 18.4px;
        height: 16px;
        background-color: #0F78C0;
        -webkit-mask: var(--icon-link-arrow);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask: var(--icon-link-arrow);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
        position: absolute;
        top: calc(50% - 8px);
        right: 20px;
        pointer-events: none;
        transition: none;
    }

    a:hover .job-list__link::after {
        animation: arrow-loop-white 0.5s ease forwards;
    }


    @container (max-width: 220px) {
        .job-list__link {
            font-size: 12px;
            height: 28px;
            bottom: 16px;
            right: 20px;
            padding-right: 70px;
        }

        .job-list__link::before {
            width: 40px;
            height: 28px;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .job-list__link::after {
            width: 13px;
            height: 12px;
            top: calc(50% - 6px);
            right: 13px;
        }
    }


    /* ========================================================================
    [pc]banner-interview
    ========================================================================= */
    .banner-interview {
        margin: 0 auto 100px;
        width: var(--pc-container);
    }

    /* ========================================================================
    [pc]video-list
    ========================================================================= */
    .video-list {
        margin: 0 auto 120px;
        width: var(--pc-container);
        list-style: none;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

    .video-list li {
        width: 31.52920962%;
    }

    .video-list li+li {
        margin-top: 0;
    }


}