@charset "utf-8";

#wrapper {
    overflow: visible;
    overflow-x: clip !important;
}

/*-------------------------------------
   recruit-nav-wrap 
-------------------------------------*/
.recruit-nav-wrap {
    display: flex;
    width: 100%;
    height: 100px;
    background-color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 50;
    align-items: center;
    /* justify-content: space-between; */
    padding: 0 1.5vw;
    gap: clamp(10px, 2vw, 40px);
    min-width: 1200px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    margin-top: 100px;
}

.recruit-nav-wrap .sp-recruit-nav-btn {
    display: none;
}

.recruit-nav-wrap .sp-recruit-nav-btn-txt {
    font-family: var(--en);
}

.recruit-nav-wrap .logo-wrap {
    /* width: clamp(140px, 13vw, 280px); */
    width: auto;
    height: clamp(60px, 4vw, 80px);
    flex-shrink: 0;
}

.recruit-nav-wrap .logo-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.recruit-nav-wrap .logo-wrap img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

.recruit-nav-wrap button img {
    width: 30px;
    object-fit: contain;
}

.recruit-nav-wrap .recruit-nav-list-wrap {
    margin-left: auto;
}

.recruit-nav-wrap .recruit-nav-list {
    display: inline-flex;
    /* gap: 15px 25px; */
    gap: min(.6vw, 10px) clamp(24px, 2.4vw, 40px);
    align-items: center;
    height: 100%;
    align-content: center;
    flex-wrap: wrap;
}

.recruit-nav-wrap .recruit-nav-item a,
.recruit-nav-wrap .recruit-nav-item button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: clamp(1.5rem, 1cqw, 1.6rem);
    color: var(--navy);
    padding: 15px 0;
}

.recruit-nav-wrap .recruit-nav-item>button {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.recruit-nav-wrap .recruit-nav-item>a::before,
.recruit-nav-wrap .recruit-nav-item>button::before {
    content: "\f107";
    color: var(--main);
    font-family: var(--webicon);
    font-weight: bold;
    font-size: 1.2rem;
    display: none;
}

.recruit-nav-wrap .recruit-nav-item.page-top a {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.recruit-nav-wrap .recruit-nav-item.page-top a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 17px;
    background-color: var(--main);
}

.recruit-nav-wrap .job-dropdown {
    position: relative;
}

.recruit-nav-wrap .job-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #d7e3ef;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.recruit-nav-wrap .job-dropdown:hover .job-dropdown-menu,
.recruit-nav-wrap .job-dropdown:focus-within .job-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* .recruit-nav-wrap .job-dropdown:hover .job-dropdown-toggle::before,
.recruit-nav-wrap .job-dropdown:focus-within .job-dropdown-toggle::before {
    transform: rotate(180deg);
} */

.recruit-nav-wrap .job-dropdown-menu li+li {
    margin-top: 10px;
}

.recruit-nav-wrap .job-dropdown-menu a {
    display: flex;
    align-items: center;
    font-size: clamp(1.5rem, 1cqw, 1.6rem);
    white-space: nowrap;
    padding: 10px 0;
    position: relative;
    gap: 5px;
}

.recruit-nav-wrap .job-dropdown-menu a::before {
    content: "";
    width: 10px;
    height: 1px;
    background-color: var(--main);
    display: block;
}

.recruit-nav-wrap .job-dropdown-toggle::before {
    transition: transform .25s ease;
}

.recruit-nav-wrap .btn-more {
    margin: 0;
    flex-shrink: 0;
}

.recruit-nav-wrap .btn-more a {
    border-radius: 8px;
    font-size: clamp(1.5rem, 1.2vw, 1.8rem);
    font-weight: 600;
    /* min-width: 240px; */
    padding: 18px 50px 18px 35px;
    min-width: initial;
}

@media screen and (min-width: 769px) {
    .recruit-nav-wrap .logo-wrap a:hover {
        opacity: .7;
    }

    .recruit-nav-wrap .recruit-nav-item a:hover {
        color: var(--main) !important;
    }

    .recruit-nav-wrap .nav-icon {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .sp_gnav_btn {
        position: fixed;
    }

    .recruit-nav-wrap {
        flex-direction: column;
        gap: 0;
        width: 100%;
        min-width: initial;
        height: initial;
        padding: 0;
        align-items: flex-start;
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        margin: 0;
    }

    .recruit-nav-wrap .logo-wrap {
        display: none;
    }

    .recruit-nav-wrap .btn-more {
        display: none;
    }

    .recruit-nav-wrap .sp-recruit-nav-btn {
        display: flex;
        position: relative;
        align-items: center;
        gap: 10px;
        width: calc(100% - 60px);
        background-color: var(--main);
        height: 60px;
        padding: 0 3vw;
    }

    .recruit-nav-wrap .sp-recruit-nav-btn::before,
    .recruit-nav-wrap .sp-recruit-nav-btn::after {
        content: "";
        position: absolute;
        right: 5vw;
        top: 50%;
        width: 20px;
        height: 1px;
        background-color: #fff;
        transition: all .3s;
        box-sizing: border-box;
    }

    .recruit-nav-wrap .sp-recruit-nav-btn::before {
        transform: translateY(-50%) rotate(0deg);
    }

    .recruit-nav-wrap .sp-recruit-nav-btn::after {
        transform: translateY(-50%) rotate(90deg);
    }

    .recruit-nav-wrap .sp-recruit-nav-btn.accordion-active::before {
        display: none;
    }

    .recruit-nav-wrap .sp-recruit-nav-btn.accordion-active::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .recruit-nav-wrap button .icon-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .recruit-nav-wrap button img {
        width: 25px;
        filter: brightness(0) invert(1);
    }

    .recruit-nav-wrap button svg,
    .recruit-nav-wrap button svg * {
        fill: #fff;
        stroke: #fff;
    }


    .recruit-nav-wrap .sp-recruit-nav-btn-txt {
        font-size: 1.7rem;
        letter-spacing: .15em;
        color: #fff;
    }

    .recruit-nav-wrap .recruit-nav-list-wrap {
        display: none;
        width: 100%;
        background: var(--pale-blue);
    }

    .recruit-nav-wrap .recruit-nav-list {
        display: flex;
        /* flex-direction: column; */
        align-items: flex-start;
        align-content: flex-start;
        width: 100%;
        padding: 5vw;
        gap: 0;
    }

    .recruit-nav-wrap .recruit-nav-item {
        width: 100%;
    }

    .recruit-nav-wrap .recruit-nav-list a {
        padding: 4vw 0;
        width: 100%;
        font-size: 1.6rem;
        border-bottom: 1px solid #cbd8e3;
        gap: 10px;
        line-height: 1.2;
    }

    .recruit-nav-wrap .recruit-nav-list>li:first-child a {
        padding-top: 0;
    }

    .recruit-nav-wrap .job-dropdown .job-dropdown-toggle {}

    .recruit-nav-wrap .job-dropdown .job-dropdown-toggle::before {
        transform: none;
    }

    .recruit-nav-wrap .job-dropdown .job-dropdown-menu {
        display: block;
        position: static;
        min-width: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
        padding: 0;
    }

    .recruit-nav-wrap .job-dropdown .job-dropdown-menu li+li {
        margin-top: 0;
    }

    .recruit-nav-wrap .job-dropdown .job-dropdown-menu a {
        padding: 4vw 10vw;
        font-size: 1.5rem;
        gap: 6px;
    }

    .recruit-nav-wrap .nav-icon {
        width: 7vw;
        height: 7vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .recruit-nav-wrap .nav-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .recruit-nav-wrap .recruit-nav-item a:has(> .nav-icon)::before {
        display: none;
    }
}

/*-------------------------------------
   btn-more.recruit
-------------------------------------*/
:root {
    --cv-recruit: #05CC76;
    --cv-recruit-hover: #00874d;
}

.btn-more.recruit a {
    background-color: var(--cv-recruit);
}

.btn-more.recruit a::after {
    content: "\f08e";
}

@media screen and (min-width: 769px) {
    .btn-more.recruit a:hover {
        background-color: var(--cv-recruit-hover);
    }
}


@media screen and (max-width: 768px) {}

/*-------------------------------------
   mv-area
-------------------------------------*/
.mv-area {
    /* background: url(../img/recruit-mv-pc.jpg) center / cover, no-repeat; */
    height: clamp(800px, 100vh, 1500px);
    width: 100%;
    position: relative;
}

.mv-area .bg-wrap {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../img/webp/recruit-mv-pc.webp");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
}

.mv-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(10deg, rgba(2, 78, 162, 0.6) 0%, rgba(2, 78, 162, 0) 40%);
}

.mv-area .inner {
    position: relative;
    height: 100%;
    z-index: 1;
}

.mv-area .mv-txt-wrap {
    position: absolute;
    left: 0;
    bottom: 3%;
    color: #fff;
    container-type: inline-size;
    width: 100%;
    z-index: 1;
}

.mv-area .mv-txt-wrap .mv-catch {
    font-size: clamp(3.6rem, 12cqw, 8.6rem);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0;
    text-shadow: 0 0 30px rgba(2, 78, 162, 0.7);
}

.mv-area .mv-txt-wrap .mv-catch-en {
    font-size: clamp(1.8rem, 1.9cqw, 2.4rem);
    letter-spacing: .2em;
    text-shadow: 0 0 30px rgba(2, 78, 162, 0.7);
}

@media screen and (max-width: 768px) {
    .mv-area {
        height: 90vw;
        /* background: url(../img/recruit-mv-sp.jpg) center bottom / cover, no-repeat; */
    }

    .mv-area .bg-wrap {
        background-attachment: initial;
        background: url(../img/webp/recruit-mv-sp.webp) center bottom / cover, no-repeat;
    }

    .mv-area::before {
        background: linear-gradient(10deg, rgba(2, 78, 162, 0.8) 0%, rgba(2, 78, 162, 0.6) 20%, rgba(2, 78, 162, 0) 50%);
    }

    .mv-area .mv-txt-wrap {
        bottom: 3vw;
        left: 5vw;
        width: calc(100% - 10vw);
    }

    .mv-area .mv-txt-wrap .mv-catch-en {
        font-size: clamp(1.3rem, 3cqw, 1.8rem);
        line-height: 1.6;
    }

    .mv-area .mv-txt-wrap .mv-catch {
        font-size: clamp(2.0rem, 9cqw, 4.0rem);
        line-height: 1.4;
    }

    /* .bread-h1-wrap {
        top: 90vw;
    } */
}

/*-------------------------------------
   catch-area
-------------------------------------*/

.catch-area {
    padding: 100px 0;
    position: relative;
}

.catch-area::before {
    content: "";
    display: block;
    position: absolute;
    top: -30%;
    right: -30%;
    width: 80%;
    height: initial;
    aspect-ratio: 1/1;
    background: url(../img/grad-circle.png) center / cover, no-repeat;
    z-index: -1;
}

.catch-area::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 80%;
    height: initial;
    aspect-ratio: 1/1;
    background: url(../img/grad-circle.png) center / cover, no-repeat;
    z-index: -1;
}

.catch-area .cmn-marquee-wrap {
    top: initial;
    bottom: 75px;
    z-index: 1;
}

.catch-area .inner {
    width: 100%;
}

.catch-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
    grid-template-areas:
        "main copy"
        "main sub";
    gap: clamp(60px, 5vw, 120px);
    align-items: start;
}

.catch-photo {
    margin: 0;
    overflow: hidden;
}

.catch-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catch-photo-main {
    grid-area: main;
    width: min(100%, 760px);
    aspect-ratio: 5 / 7;
    border-radius: 0 20px 20px 0;
}

.catch-copy {
    grid-area: copy;
    padding-top: clamp(60px, 3vw, 100px);
    padding-right: clamp(60px, 5vw, 120px);
    container-type: inline-size;
}

.catch-copy-lead {
    margin-bottom: 24px;
    color: #17457b;
    font-size: clamp(2rem, 3cqw, 3.2rem);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.6;
}

.catch-copy-title {
    margin-bottom: 40px;
    color: #0d3564;
    font-size: clamp(3.4rem, 6cqw, 6rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .04em;
}


.catch-copy-body p {
    color: #333;
    font-size: clamp(1.6rem, 2cqw, 1.8rem);
    line-height: 2.2;
    letter-spacing: .04em;
}

.catch-photo-sub {
    grid-area: sub;
    justify-self: end;
    width: min(100%, 900px);
    aspect-ratio: 16 / 9;
    border-radius: 20px 0 0 20px;
}

.catch-area .cmn-marquee-wrap.sp-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .catch-area {
        padding: 10vw 0 10vw;
    }

    .catch-area::before {
        top: -10%;
        right: -40%;
        width: 130%;
    }

    .catch-area::after {
        bottom: -10%;
        left: -10%;
        width: 150%;
    }

    .catch-area .inner {
        width: 100%;
    }

    .catch-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10vw 6vw;
        position: relative;
    }

    .catch-photo,
    .catch-photo-sub {
        width: 100%;
        order: 1;
    }

    .catch-copy {
        padding: 0 5vw;
        order: 2;
        width: 100%;
    }

    .catch-copy-lead {
        margin-bottom: 2vw;
        font-size: 1.8rem;
        letter-spacing: .05em;
    }

    .catch-copy-title {
        margin-bottom: 4vw;
        font-size: 2.8rem;
        line-height: 1.6;
    }

    .catch-photo-main {
        width: 35%;
        aspect-ratio: 5 / 7;
        border-radius: 0 10px 10px 0;
        margin-top: 10vw;
    }

    .catch-photo-sub {
        width: calc(65% - 6vw);
        border-radius: 10px 0 0 10px;
    }

    .catch-area .cmn-marquee-wrap.pc-only {
        display: none;
    }

    .catch-area .cmn-marquee-wrap.sp-only {
        display: flex;
    }

    .catch-area .cmn-marquee-wrap {
        /* bottom: 7.5vw; */
        top: 49vw;
        bottom: initial;
    }

    .catch-area .cmn-marquee-wrap .cmn-marquee-txt {
        font-size: 6.0rem;
    }
}

/*-------------------------------------
   feature-area
-------------------------------------*/

.feature-area {
    padding: 40px 0 120px;
}

.feature-area .feature-box-wrap {
    display: flex;
    flex-wrap: wrap;
    --gap: clamp(25px, 1.3cqw, 50px);
    gap: 40px var(--gap);
    margin: 80px 0 0;
    container-type: inline-size;
}

.feature-area .feature-box {
    width: 100%;
    background-color: #fff;
    padding: clamp(20px, 2.5cqw, 60px);
    border-radius: 20px;
    position: relative;
    width: calc((100% - var(--gap) * 2) / 3);
    border: 1px solid var(--main);
    container-type: inline-size;
}

.feature-area .feature-box .feature-box-img {
    height: 200px;
    width: auto;
    text-align: center;
}

.feature-area .feature-box .feature-box-img img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

.feature-area .feature-box .feature-box-txt {
    padding-top: 30px;
}

.feature-area .feature-box .feature-box-num {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--main);
    padding: 10px 15px;
    display: inline-block;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    background-color: var(--main);
    color: #fff;
    letter-spacing: .05em;
    margin: 0 0 20px;
}

.feature-area .feature-box .feature-box-sub-catch {
    text-align: center;
    color: var(--main);
    font-size: clamp(1.6rem, 5.2cqw, 2.0rem);
    line-height: 1.6;
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: center;
    font-weight: 600;
}

.feature-area .feature-box .feature-box-sub-catch::before,
.feature-area .feature-box .feature-box-sub-catch::after {
    content: "";
    display: block;
    height: 1px;
    width: auto;
    background-color: var(--main);
    flex-grow: 1;
}

.feature-area .feature-box .feature-box-catch {
    text-align: center;
    font-size: clamp(2.4rem, 7cqw, 4.0rem);
    line-height: 1.6;
    font-weight: bold;
    color: var(--navy);
    margin: 15px 0 20px;
}

.feature-area .feature-box .basic-txt {
    text-align: left;
}

@media screen and (max-width: 768px) {
    .feature-area {
        padding: 0 0 10vw;
    }

    .feature-area .feature-box-wrap {
        border-radius: 15px;
        padding: 0;
        background: transparent;
        margin: 0;
    }

    .feature-area .feature-box {
        width: 100%;
        background-color: var(--pale-blue);
        padding: 10vw 5vw 5vw;
        border-radius: 12px;
    }

    .feature-area .feature-box .feature-box-img {
        height: 35vw;
    }

    .feature-area .feature-box .feature-box-txt {
        padding-top: 20px;
    }

    .feature-area .feature-box .feature-box-num {
        font-size: 1.3rem;
        padding: 10px 15px;
        top: -15px;
    }

    .feature-area .feature-box .feature-box-sub-catch {
        font-size: clamp(1.5rem, 4.1cqw, 2.0rem);
        gap: 10px;
    }

    .feature-area .feature-box .feature-box-catch {
        font-size: clamp(2.0rem, 5.0cqw, 2.8rem);
        margin: 10px 0;
    }
}

/*-------------------------------------
   job-area
-------------------------------------*/
.job-area {
    position: relative;
    padding: 0 0 100px;
}

.job-area::before {
    content: "";
    display: block;
    position: absolute;
    --space: clamp(200px, 15vw, 400px);
    top: var(--space);
    left: 0;
    width: 100%;
    height: calc(100% - var(--space));
    background-color: var(--pale-blue);
    z-index: -1;
}

/*----- job-area 冒頭スライダー -----*/
.job-area .job-slider-wrap {
    display: flex;
    align-items: center;
    min-width: 100%;
    width: min-content;
    animation: 30s linear infinite sliderAnimation;
}

.job-area .job-slide {
    height: initial;
    width: clamp(300px, 26vw, 500px);
    aspect-ratio: 400/500;
    margin-right: 2vw;
    border-radius: 20px;
    overflow: hidden;
}

.job-area .job-slide:nth-child(even) {
    width: clamp(220px, 20vw, 400px);
    aspect-ratio: 300/375;
}

.job-area .job-slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.job-area .inner {
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.job-area .cmn-h2-title {
    margin: 0;
}

.job-area .job-anchor-list {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
    width: 50%;
    min-width: 700px;
}

.job-area .job-anchor-item {
    width: calc((100% - 20px) / 2);
}

.job-area .job-anchor-item a {
    background-color: #fff;
    padding: 25px 20px;
    border-radius: 70px;
    font-size: 1.8rem;
    text-align: center;
    position: relative;
    display: block;
}

.job-area .job-anchor-item .cmn-arrow {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

@keyframes sliderAnimation {
    100% {
        transform: translateX(-50%);
    }
}

.job-area .job-detail-block-wrap {
    margin: 80px 0 0;
    width: 100%;
}

.job-area .job-detail-block+.job-detail-block {
    margin-top: 150px;
}

.job-area .job-detail-block {
    display: flex;
    --gap: clamp(60px, 5vw, 100px);
    gap: 50px var(--gap);
    /* align-items: center; */
    flex-wrap: wrap;
}

.job-area .job-detail-block .job-detail-txt-wrap {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.job-area .job-detail-block .job-detail-img {
    width: calc(50% - var(--gap));
    border-radius: 20px;
    overflow: hidden;
}

.job-area .job-detail-catch {
    font-size: clamp(3.2rem, 3vw, 4.6rem);
    color: var(--navy);
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 30px;
}

.job-area .job-detail-box {
    width: 100%;
    background-color: #fff;
    padding: 60px;
    border-radius: 30px;
}

.job-area .job-detail-box-title {
    color: var(--navy);
    margin-bottom: 40px;
    font-weight: 600;
    font-size: 2.8rem;
}

.job-area .job-detail-box .icon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5vw;
}

.job-area .job-detail-box .icon-item {
    width: calc((100% - 3vw) / 3);
    display: flex;
    gap: 15px;
    align-items: center;
    background-color: var(--pale-blue);
    border-radius: 10px;
    padding: 20px 25px;
}

.job-area .job-detail-box .icon-wrap {
    width: 50px;
    flex-shrink: 0;
}

.job-area .job-detail-box .icon-wrap img {
    max-height: 60px;
    width: 100%;
    object-fit: contain;
}

.job-area .job-detail-box .icon-txt {
    font-size: 1.7rem;
    line-height: 1.6;
}

.job-area .job-detail-box .kome {
    display: inline-block;
    padding-left: 1.2rem;
    text-indent: -1.2rem;
    font-size: 1.2rem;
    line-height: 1.4;
}

.job-area .job-detail-box .schedule-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.job-area .job-detail-box .schedule-item {
    position: relative;
    flex-grow: 1;
}

.job-area .job-detail-box .schedule-item:last-child {
    flex-grow: 0;
}

.job-area .job-detail-box .time-line {
    width: 100%;
    display: flex;
    align-items: center;
}

.job-area .job-detail-box .time-line::after {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--main);
    flex-grow: 1;
}

.job-area .job-detail-box .schedule-item:last-child .time-line::after {
    display: none;
}

.job-area .job-detail-box .time-line .time-circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--main);
    display: inline-block;
}

.job-area .job-detail-box .schedule-time {
    font-size: 2.0rem;
    font-family: var(--en);
    font-weight: 600;
    line-height: 1.5;
    margin: 10px 0;
    color: var(--main);
}

.job-area .job-detail-box .schedule-txt {
    font-size: 1.7rem;
    line-height: 1.5;
}

@media screen and (min-width: 769px) {
    .job-area .job-anchor-item a:hover {
        transform: translateY(5px);
    }
}

@media screen and (max-width: 768px) {
    .job-area {
        padding: 0 0 10vw;
    }

    .job-area::before {
        --space: 30vw;
    }

    .job-area .job-slide {
        width: clamp(150px, 45vw, 260px);
        border-radius: 12px;
        margin-right: 12px;
    }

    .job-area .job-slide:nth-child(even) {
        width: clamp(100px, 35vw, 220px);
    }

    .job-area .inner {
        margin-top: 10vw;
    }

    .job-area .job-anchor-list {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 3vw;
        margin: 5vw 0 0;
    }

    .job-area .job-anchor-item {
        width: calc((100% - 3vw) / 2)
    }

    .job-area .job-anchor-item a {
        padding: 15px;
        font-size: 1.5rem;
    }

    .job-area .job-anchor-item .cmn-arrow {
        right: 10px;
    }

    .job-area .job-detail-block-wrap {
        margin-top: 36px;
    }

    .job-area .job-detail-block+.job-detail-block {
        margin-top: 64px;
    }

    .job-area .job-detail-block {
        gap: 24px;
    }

    .job-area .job-detail-block .job-detail-img,
    .job-area .job-detail-block .job-detail-txt-wrap {
        width: 100%;
    }

    .job-area .job-detail-block .job-detail-img {
        border-radius: 14px;
    }

    .job-area .job-detail-catch {
        font-size: clamp(2.6rem, 7.5vw, 3.4rem);
        margin-bottom: 16px;
    }

    .job-area .job-detail-box {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .job-area .job-detail-box-title {
        font-size: 2.1rem;
        margin-bottom: 22px;
    }

    .job-area .job-detail-box .icon-list {
        gap: 6vw;
    }

    .job-area .job-detail-box .icon-item {
        width: 100%;
        gap: 3vw;
        padding: 5vw;
    }

    .job-area .job-detail-box .icon-wrap {
        width: 10vw;
        flex-shrink: 0;
    }

    .job-area .job-detail-box .icon-txt {
        font-size: 1.5rem;
    }

    .job-area .job-detail-box .schedule-list {
        flex-direction: column;
    }

    .job-area .job-detail-box .schedule-item {
        width: 100%;
        flex-grow: 0;
        padding-left: 24px;
        padding-bottom: 8vw;
    }

    .job-area .job-detail-box .schedule-item:last-child {
        padding-bottom: 0;
    }

    .job-area .job-detail-box .time-line {
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 100%;
        align-items: center;
        /* justify-content: center; */
        flex-direction: column;
        flex-shrink: 0;
    }

    .job-area .job-detail-box .time-line::after {
        width: 1px;
        height: calc(100% - 11px);
        flex-grow: 0;
    }

    .job-area .job-detail-box .schedule-item:last-child .time-line::after {
        display: none;
    }

    .job-area .job-detail-box .time-line .time-circle {
        width: 11px;
        height: 11px;
    }

    .job-area .job-detail-box .schedule-time {
        font-size: 1.8rem;
        margin: 0 0 10px;
        line-height: .7;
    }

    .job-area .job-detail-box .schedule-txt {
        font-size: 1.5rem;
    }
}



/*-------------------------------------
   interview-area
-------------------------------------*/
.interview-area {
    padding: 120px 0 100px;
    position: relative;
}

.interview-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    background: url(../img/bg-circle-blue.jpg) center / cover, no-repeat var(--main);
    background-blend-mode: soft-light;
    z-index: -1;
}

.interview-area .interview-title {
    color: #fff;
    font-size: clamp(2.6rem, 3vw, 5rem);
    font-weight: 600;
}


.interview-area .interview-block-wrap {
    display: flex;
    --gap: clamp(40px, 2vw, 60px);
    gap: 60px var(--gap);
    flex-wrap: wrap;
    margin-top: 60px;
}

.interview-area .interview-container {
    width: calc((100% - var(--gap) * 2) / 3);
}

.interview-area .interview-block {
    transition: all .3s;
}

.interview-area .interview-block .interview-img img {
    border-radius: 20px;
}

.interview-area .interview-block .interview-txt-wrap {
    padding: 30px 0 0;
    container-type: inline-size;
}

.interview-area .interview-block .interview-catch {
    font-size: clamp(2.6rem, 6.8cqw, 4.8rem);
    line-height: 1.6;
    color: var(--main);
    font-weight: 600;
}

.interview-area .interview-block .interview-name {
    font-size: clamp(2.0rem, 5.5cqw, 3.8rem);
    color: var(--navy);
}

.interview-area .interview-block .interview-division {
    font-size: clamp(1.2rem, 3cqw, 1.8rem);
    color: #9F9F9F;
}

.interview-area .interview-block .copy-wework::after {
    right: initial;
    left: 3%;
}

.interview-area .interview-block .icon-plus {
    position: absolute;
    bottom: -30px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

.interview-area .interview-block .icon-plus img {
    width: 25px;
    height: 25px;
}


/*モーダルを開くボタン*/
.interview-area .interview-modal-open {
    cursor: pointer;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.interview-area .interview-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 80%);
    padding: 5vw 2vw;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index: 250;
}

/*モーダル本体の擬似要素の指定*/
.interview-area .interview-modal-container:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

/*モーダル本体に「active」クラス付与した時のスタイル*/
.interview-area .interview-modal-container.active {
    opacity: 1;
    visibility: visible;
}

/*モーダル枠の指定*/
.interview-area .interview-modal-body {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: clamp(700px, 80%, 1600px);
}

/*モーダルを閉じるボタンの指定*/
.interview-area .interview-modal-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -40px;
    right: -40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}

/*モーダル内のコンテンツの指定*/
.interview-area .interview-modal-content {
    background: #fff;
    text-align: left;
    padding: clamp(30px, 4vw, 120px);
    border-radius: 40px;
}

.interview-area .interview-box+.interview-box {
    margin-top: 60px;
}

.interview-area .interview-box:has(.interview-detail-img) {
    display: flex;
    gap: clamp(30px, 3vw, 60px);
}

.interview-area .interview-box .interview-detail-img {
    border-radius: 20px;
    overflow: hidden;
    width: 40%;
}

.interview-area .interview-box:has(.interview-detail-img) .interview-qa-wrap {
    width: calc(60% - clamp(30px, 3vw, 60px));
}

.interview-area .interview-question {
    font-size: 2.6rem;
    color: var(--main);
    line-height: 1.5;
    border-bottom: 2px dotted var(--main);
    font-weight: bold;
    position: relative;
    padding: 0 0 10px 4.0rem;
    margin: 0 0 20px;
}

.interview-area .interview-question::before {
    content: "Q.";
    display: inline-block;
    font-size: 2.6rem;
    color: var(--main);
    font-weight: 600;
    position: absolute;
    left: 0;
    top: 0;
}

.interview-area .disc-item {
    line-height: 1.6;
}

.interview-area .disc-item::before {
    top: 10px;
}

.interview-area .interview-answer-wrap *+* {
    margin-top: 10px;
}

@media screen and (min-width: 769px) {
    .interview-area .interview-block:hover {
        transform: translateY(-15px);
    }
}

@media screen and (max-width: 768px) {
    .interview-area {
        padding: 10vw 0;
    }

    .interview-area::before {
        height: 50vw;
    }

    .interview-area .interview-title {
        font-size: clamp(2.4rem, 6.5cqw, 3.2rem);
    }

    .interview-area .interview-block-wrap {
        --gap: 3vw;
        gap: 10vw var(--gap);
        margin-top: 30px;
    }

    .interview-area .interview-container {
        width: calc((100% - var(--gap)) / 2)
    }

    .interview-area .interview-block .interview-img img {
        border-radius: 10px;
    }

    .interview-area .interview-block .interview-txt-wrap {
        padding-top: 16px;
    }

    .interview-area .interview-block .interview-catch {
        font-size: clamp(1.7rem, 10cqw, 3.0rem);
    }

    .interview-area .interview-block .interview-name {
        font-size: clamp(1.4rem, 10cqw, 2.0rem);
    }

    .interview-area .interview-block .interview-division {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    .interview-area .interview-block .icon-plus {
        width: 8vw;
        height: 8vw;
        bottom: 4vw;
        right: 2vw;
        z-index: 1;
    }

    .interview-area .interview-block .icon-plus img {
        width: 3.5vw;
        height: 3.5vw;
    }

    .interview-area .interview-modal-container {
        padding: 10vw 3vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .interview-area .interview-modal-container::before {
        display: none;
    }

    .interview-area .interview-modal-body {
        width: 100%;
        max-width: 100%;
        display: block;
        vertical-align: initial;
    }

    .interview-area .interview-modal-close {
        top: -34px;
        right: 0;
        width: 34px;
        height: 34px;
        font-size: 3.0rem;
    }

    .interview-area .interview-modal-content {
        padding: 8vw 5vw;
        border-radius: 18px;
    }

    .interview-area .interview-box+.interview-box {
        margin-top: 5vw
    }

    .interview-area .interview-box:has(.interview-detail-img) {
        flex-direction: column;
        gap: 5vw;
    }

    .interview-area .interview-box .interview-detail-img,
    .interview-area .interview-box:has(.interview-detail-img) .interview-qa-wrap {
        width: 100%;
        border-radius: 10px;
    }

    .interview-area .interview-question,
    .interview-area .interview-question::before {
        font-size: 2.0rem;
    }

    .interview-area .interview-question {
        padding-left: 3.1rem;
    }

    .interview-area .disc-item::before {
        top: 8px;
    }
}


/*-------------------------------------
   environment-area
-------------------------------------*/
.environment-area {
    padding: 120px 0;
    position: relative;
}

.environment-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background-color: var(--pale-blue);
    z-index: -1;
}

.environment-area .environment-block-wrap {
    margin: 60px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.environment-area .environment-block {
    width: calc((100% - 60px) / 2);
    container-type: inline-size;
}

.environment-area .environment-img {
    border-radius: 20px;
    overflow: hidden;
}

.environment-area .environment-txt-wrap {
    padding: 30px 0 0;
}

.environment-area .environment-name {
    font-size: clamp(2.0rem, 4cqw, 2.6rem);
    color: var(--main);
    margin: 0 0 10px;
    font-weight: 600;
}

.environment-area .environment-catch {
    font-size: clamp(2.4rem, 5cqw, 4.0rem);
    line-height: 1.6;
    font-weight: 600;
    margin: 0 0 20px;
}

@media screen and (max-width: 768px) {
    .environment-area {
        padding: 10vw 0;
    }

    .environment-area::before {
        height: 50vw
    }

    .environment-area .environment-block-wrap {
        margin-top: 5vw;
        gap: 10vw;
    }

    .environment-area .environment-block {
        width: 100%;
    }

    .environment-area .environment-img {
        border-radius: 14px;
    }

    .environment-area .environment-txt-wrap {
        padding-top: 16px;
    }

    .environment-area .environment-catch {
        margin-bottom: 10px;
        font-size: clamp(2.2rem, 7cqw, 4.0rem)
    }

    .environment-area .environment-name {
        font-size: clamp(1.8rem, 3cqw, 2.2rem);
        margin: 0;
    }
}

/*-------------------------------------
   benefit-area
-------------------------------------*/
.benefit-area {
    padding: 120px 0;
    background: var(--pale-blue);
}

.benefit-area .icon-list {
    margin: 60px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.benefit-area .icon-item {
    width: calc((100% - 90px) / 4);
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px 20px;
}

.benefit-area .icon-item .icon-wrap {
    width: auto;
    height: 60px;
    margin: 0 auto 20px;
}

.benefit-area .icon-item .icon-wrap img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.benefit-area .icon-item .icon-txt {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .benefit-area {
        padding: 10vw 0;
    }

    .benefit-area .icon-list {
        margin-top: 32px;
        gap: 12px;
    }

    .benefit-area .icon-item {
        width: calc((100% - 12px) / 2);
        padding: 20px 12px;
        border-radius: 10px;
    }

    .benefit-area .icon-item .icon-wrap {
        height: 10vw;
        margin-bottom: 12px;
    }

    .benefit-area .icon-item .icon-txt {
        font-size: 1.4rem;
    }
}

/*-------------------------------------
   flow-area
-------------------------------------*/
.flow-area {
    padding: 100px 0;
}

.flow-area .flow-block-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 60px;
}

.flow-area .flow-block {
    width: calc((100% - 120px) / 4);
    background-color: #f5f5f5;
    padding: 40px 20px 30px;
    position: relative;
    text-align: center;
    border-radius: 15px;
    position: relative;
}

.flow-area .flow-block:not(:last-child)::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: -30px;
    width: 30px;
    height: 1px;
    background-color: var(--main);
}

.flow-area .flow-block .icon-wrap {
    width: 80px;
    height: auto;
    margin: 0 auto 20px;
}

.flow-area .flow-block .icon-wrap img {
    object-fit: contain;
    max-height: 60px;
}

.flow-area .flow-block .flow-num {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--main);
    font-size: 2.0rem;
    line-height: 1.5;
    font-weight: 600;
    font-family: var(--en);
}

.flow-area .flow-block .flow-name {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.6;
}

.flow-area .flow-block .btn-more {
    margin: 20px 0 10px;
}

.flow-area .flow-block .btn-more a {
    font-size: 1.7rem;
}

@media screen and (max-width: 768px) {
    .flow-area {
        padding: 10vw 0;
    }

    .flow-area .flow-block-wrap {
        margin-top: 32px;
        gap: 8vw;
    }

    .flow-area .flow-block {
        width: 100%;
        padding: 10vw 5vw 5vw;
        border-radius: 10px;
    }

    .flow-area .flow-block:not(:last-child)::after {
        top: initial;
        right: 50%;
        bottom: -8vw;
        width: 1px;
        height: 8vw;
        transform: translateX(50%);
        background: #eee;
    }

    .flow-area .flow-block .icon-wrap {
        height: 12vw;
        margin-bottom: 5vw;
    }

    .flow-area .flow-block .flow-name {
        font-size: 2.0rem;
    }

    .flow-area .flow-block .flow-num {
        font-size: 1.7rem;
        top: -10px;
    }
}

/*-------------------------------------
   footer-cv-recruit
-------------------------------------*/
.footer-cv-recruit {
    /* background: url(../img/footer-contact-bg.png) top/cover, no-repeat var(--main); */
    background: var(--pale-blue);
    display: flex;
    min-width: 1200px;
}

.footer-cv-recruit .footer-cv-txt-wrap {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(60px, 5vw, 120px) clamp(30px, 3.5vw, 80px);
    /* color: #fff; */
    color: var(--navy);
    container-type: inline-size;
}

.footer-cv-recruit .footer-cv-catch {
    font-size: clamp(3.0rem, 5.5cqw, 5.2rem);
    line-height: 1.6;
    font-weight: bold;
    margin: 0 0 30px;
    color: var(--main);
    letter-spacing: .02em;
}

.footer-cv-recruit .footer-cv-txt-wrap .btn-more {
    margin: 30px 0 0;
}

.footer-cv-recruit .footer-cv-txt-wrap .btn-more a {
    font-size: 2.0rem;
    font-weight: bold;
    width: 320px;
    padding: 25px;
    border-radius: 60px;
}

.footer-cv-recruit .footer-cv-bg-wrap {
    background: url(../img/webp/recruit-footer.webp) center / cover, no-repeat;
    width: 45%;
    /* aspect-ratio: 9/6; */
}

@media screen and (max-width: 768px) {
    .footer-cv-recruit {
        min-width: 0;
        flex-direction: column-reverse;
    }

    .footer-cv-recruit .footer-cv-txt-wrap,
    .footer-cv-recruit .footer-cv-bg-wrap {
        width: 100%;
    }

    .footer-cv-recruit .footer-cv-txt-wrap {
        padding: 10vw 5vw;
    }

    .footer-cv-recruit .footer-cv-catch {
        margin-bottom: 5vw;
        font-size: clamp(2.2rem, 7.2cqw, 3.3rem);
    }

    .footer-cv-recruit .footer-cv-txt-wrap .btn-more a {
        width: 100%;
        max-width: 320px;
        font-size: 1.7rem;
        padding: 20px;
    }

    .footer-cv-recruit .footer-cv-bg-wrap {
        aspect-ratio: 16 / 10;
    }
}

/*-------------------------------------
   スクロールオフセット（固定ヘッダー対応）
-------------------------------------*/
#feature,
#sales,
#system,
#accounting,
#interview,
#environment,
#benefit,
#flow {
    scroll-margin-top: 100px;
}

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

    #feature,
    #sales,
    #system,
    #accounting,
    #interview,
    #environment,
    #benefit,
    #flow {
        scroll-margin-top: 100px;
    }
} */

/*-------------------------------------
   #footer_fixed_recruit
-------------------------------------*/
@media screen and (max-width: 768px) {
    #footer_fixed_recruit {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #f3f3f3;
        padding: 2vw;
    }

    #footer_fixed_recruit .btn-more {
        margin: 0;
        width: 100%;

    }

    #footer_fixed_recruit a {
        width: 100%;
        display: block;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        font-weight: bold;
        font-size: 1.5rem;
    }

    #footer_fixed {
        display: none !important;
    }
}

/*-------------------------------------
   
-------------------------------------*/
@media screen and (max-width: 768px) {}