@charset "utf-8";

/**
 * スマホ用設定
 */
@media ( width < 768px ) {

    #page-main {
        padding-bottom: 0;
    }
    #page-main.page-recruit-interview {
        padding-top: 0;
    }
    #page-main.page-recruit-numbers {
        padding-top: 0;
    }

    #recruit-main {
        margin: 0 auto;
        padding: 0 0 16.0vw;
    }
    #recruit-main .recruit-first-h2 {
        margin: 0;
        font-size: 6.0vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 72 / 48 );
        letter-spacing: 0.06em;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #recruit-main .recruit-main-flex {
        margin: 8.0vw auto 0;
        padding: 0;
        width: var(--content-width-sp);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4.0vw 0;
    }
    #recruit-main .recruit-main-flex .info {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #recruit-main .recruit-main-flex .pic {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 540 / 712;
    }
    #recruit-main .recruit-main-flex .pic .pic-front {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1.0;
        transition: opacity 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-main .recruit-main-flex .pic:hover .pic-front {
            opacity: 0.0;
        }
    }
    #recruit-main .recruit-main-flex .pic .pic-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    #recruit-main .recruit-main-flex .pic .pic-back {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 540 / 712;
    }
    #recruit-main .recruit-main-flex .pic .pic-back img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }

    #page-main .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-sp);
        color: #eaf3fc;
        font-size: 20.0vw;
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #page-main .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: 6.0vw;
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }

    #page-main .recruit-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 8.0vw auto 0;
        padding: 0;
        width: var(--content-width-sp);
        height: auto;
        aspect-ratio: 440 / 77;
        color: #fff;
        font-size: 4.0vw;
        font-weight: 700;
        line-height: 1.0;
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: 2.0vw;
    }
    #page-main .recruit-btn::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        right: 1.5em;
        display: block;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    #recruit-news {
        margin: 0 auto;
        padding: 12.0vw 0 16.0vw;
        background: #f5faff;
    }
    #recruit-news .recruit-news-box {
        margin: 4.0vw auto 0;
        padding: 4.0vw 4.0vw;
        width: var(--content-width-sp);
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        border-radius: 2.0vw 0 0 2.0vw;
        overflow-y: auto;
    }
    #recruit-news .recruit-news-box .recruit-news-item {
        margin: 0;
        padding: 4.0vw 0;
        width: 100%;
        border-bottom: 1px solid #d2dbea;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    #recruit-news .recruit-news-box .recruit-news-item .date {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 2.8vw;
        font-weight: 400;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 2.0;
    }
    #recruit-news .recruit-news-box .recruit-news-item .title {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 3.75vw;
        font-weight: 500;
        text-align: left;
        line-height: 2.0;
        a {
            text-decoration: underline;
        }
    }

    #recruit-interview {
        margin: 0 auto;
        padding: 12.0vw 0 16.0vw;
    }
    #recruit-interview > .interview-slider-wrap {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: var(--content-width-sp);
    }
    #recruit-interview > .interview-slider-wrap #interview-slider {
        position: relative;
        margin: 0;
        padding: 8.0vw 0 14.0vw;
        width: 100%;
        overflow: hidden;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide {
        position: relative;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .pic-front {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        opacity: 1.0;
        transition: opacity 0.3s ease-out;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide ,pic-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .pic-back {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 960;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide ,pic-back img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .info {
        position: absolute;
        bottom: 4.0vw;
        left: 4.0vw;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .info span {
        display: block;
        color: #fff;
        font-size: 3.75vw;
        text-align: left;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .info span.name {
        font-size: 8.0vw;
        font-weight: 700;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .btn {
        position: absolute;
        display: block;
        bottom: 4.0vw;
        right: 4.0vw;
        width: 10.0vw;
        height: 10.0vw;
        background: var(--color-accent);
        border-radius: 2.0vw;
        transition: background 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .btn:hover {
            background: var(--color-theme);
        }
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 2.0vw );
        right: calc( 50% - 2.0vw );
        width: 4.0vw;
        height: 4.0vw;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    #recruit-interview > .interview-slider-wrap .swiper-pagination-bullet {
        margin: 0 1.0vw;
        width: 3.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #recruit-interview > .interview-slider-wrap .swiper-pagination-bullet-active {
        background: var(--color-theme);
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-prev,
    #recruit-interview > .interview-slider-wrap .swiper-button-next {
        position: absolute;
        margin: 0;
        padding: 0;
        top: auto;
        bottom: 0;
        left: 0;
        right: auto;
        width: 10.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: 2.0vw;
        transition: all 0.2s ease-out;
        overflow: hidden;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-next {
        left: auto;
        right: 0;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-prev::before {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        scale: -1.0 1.0;
        transition: all 0.3s ease-out;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-prev::after {
        content: none;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-next::before {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: all 0.3s ease-out;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-next::after {
        content: none;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-disabled {
        background: #999;
        border: 1px solid #999;
    }
    #recruit-interview > .interview-slider-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: var(--color-accent);
    }
    @media ( hover: hover ) {
        #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide:hover .pic-front {
            opacity: 0.0;
        }
        #recruit-interview > .interview-slider-wrap .swiper-button-prev:hover {
            background: #fff;
        }
        #recruit-interview > .interview-slider-wrap .swiper-button-prev:hover::before {
            background: var(--color-theme);
        }
        #recruit-interview > .interview-slider-wrap .swiper-button-next:hover {
            background: #fff;
        }
        #recruit-interview > .interview-slider-wrap .swiper-button-next:hover::before {
            background: var(--color-theme);
        }
    }

    #recruit-work {
        margin: 0 auto;
        padding: 12.0vw 0 16.0vw;
        background: #f5faff;
    }
    #recruit-work .recruit-work-grid {
        margin: 0 auto;
        width: var(--content-width-sp);
        display: grid;
        grid-template-columns: repeat( 1, 1fr );
        gap: 4.0vw 4.0vw;
    }
    #recruit-work .recruit-work-grid .recruit-work-item {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        border-radius: 2.0vw;
        overflow: hidden;
        z-index: 1;
    }
    #recruit-work .recruit-work-grid .recruit-work-item::after {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        width: 100%;
        height: 50%;
        background: linear-gradient( to bottom, #00112f00, #00112fcd );
        z-index: 1;
    }
    #recruit-work .recruit-work-grid .recruit-work-item figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 343 / 212;
    }
    #recruit-work .recruit-work-grid .recruit-work-item:nth-child(4) figure {
        aspect-ratio: 1 / 1;
    }
    #recruit-work .recruit-work-grid .recruit-work-item figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-work .recruit-work-grid .recruit-work-item:hover figure img {
            scale: 1.1 1.1;
        }
    }
    #recruit-work .recruit-work-grid .recruit-work-item .info {
        position: absolute;
        bottom: 4.0vw;
        left: 4.0vw;
        z-index: 2;
    }
    #recruit-work .recruit-work-grid .recruit-work-item .info span {
        display: block;
        color: #fff;
        font-size: 3.75vw;
        font-weight: 700;
        text-align: left;
    }
    #recruit-work .recruit-work-grid .recruit-work-item .info h3 {
        color: #fff;
        font-size: 6.5vw;
        font-weight: 700;
        line-height:1.3;
    }
    #recruit-work .recruit-work-grid .recruit-work-item .btn {
        position: absolute;
        display: block;
        bottom: 4.0vw;
        right: 4.0vw;
        width: 10.0vw;
        height: 10.0vw;
        background: var(--color-accent);
        border-radius: 2.0vw;
        z-index: 2;
        transition: background 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-work .recruit-work-grid .recruit-work-item .btn:hover {
            background: var(--color-theme);
        }
    }
    #recruit-work .recruit-work-grid .recruit-work-item .btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 2.0vw );
        right: calc( 50% - 2.0vw );
        width: 4.0vw;
        height: 4.0vw;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    #recruit-recruit {
        margin: 0 auto;
        padding: 12.0vw 0 16.0vw;
    }
    #recruit-recruit .recruit-recruit-grid {
        margin: 0 auto;
        width: var(--content-width-sp);
        display: grid;
        grid-template-columns: repeat( 1, 1fr );
        gap: 4.0vw 0;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        border-radius: 2.0vw;
        overflow: hidden;
        z-index: 1;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item::after {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        width: 100%;
        height: 50%;
        background: linear-gradient( to bottom, #00112f00, #00112fcd );
        z-index: 1;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 560 / 346;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-recruit .recruit-recruit-grid .recruit-recruit-item:hover figure img {
            scale: 1.1 1.1;
        }
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .info {
        position: absolute;
        bottom: 4.0vw;
        left: 4.0vw;
        z-index: 2;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .info span {
        display: block;
        color: #fff;
        font-size: 3.75vw;
        font-weight: 700;
        text-align: left;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .info h3 {
        color: #fff;
        font-size: 6.5vw;
        font-weight: 700;
        line-height:1.3;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .btn {
        position: absolute;
        display: block;
        bottom: 4.0vw;
        right: 4.0vw;
        width: 10.0vw;
        height: 10.0vw;
        background: var(--color-accent);
        border: 1px solid var(--color-accent) !important;
        border-radius: 2.0vw;
        z-index: 2;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 2.0vw );
        right: calc( 50% - 2.0vw );
        width: 4.0vw;
        height: 4.0vw;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    #recruit-blog {
        margin: 0 auto;
        padding: 12.0vw 0 16.0vw;
        background: #f5faff;
    }
    #recruit-blog > .blog-slider-wrap {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: var(--content-width-sp);
    }
    #recruit-blog > .blog-slider-wrap #blog-slider {
        position: relative;
        margin: 0;
        padding: 8.0vw 0 14.0vw;
        width: 100%;
        overflow: hidden;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide {
        position: relative;
        transition: opacity 0.2s ease-out;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        overflow: hidden;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 2.0vw;
        transition: scale 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide figure img:hover {
            scale: 1.1 1.1;
        }
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide .date {
        margin: 1.0em 0 0;
        font-size: 2.8vw;
        font-family: var(--font-alphabet);
        text-align: left;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide .title {
        margin: 0.2em 0 0;
        font-size: 3.75vw;
        font-weight: 700;
        text-align: left;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide .cat {
        margin: 0.4em 0 0;
        padding: 0.2em 0.4em;
        width: max-content;
        font-size: 3.75vw;
        font-weight: 700;
        line-height: 1.0;
        border: 1px solid #073f8f;
        border-radius: 1.0vw;
    }
    #recruit-blog > .blog-slider-wrap .swiper-pagination-bullet {
        margin: 0 1.0vw;
        width: 3.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #recruit-blog > .blog-slider-wrap .swiper-pagination-bullet-active {
        background: var(--color-theme);
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-prev,
    #recruit-blog > .blog-slider-wrap .swiper-button-next {
        position: absolute;
        margin: 0;
        padding: 0;
        top: auto;
        bottom: 0;
        left: 0;
        right: auto;
        width: 10.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: 2.0vw;
        transition: all 0.2s ease-out;
        overflow: hidden;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-next {
        left: auto;
        right: 0;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-prev::before {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        scale: -1.0 1.0;
        transition: all 0.3s ease-out;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-prev::after {
        content: none;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-next::before {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: all 0.3s ease-out;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-next::after {
        content: none;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-disabled {
        background: #999;
        border: 1px solid #999;
    }
    @media ( hover: hover ) {
        #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide:hover {
            opacity: 0.6;
        }
        #recruit-blog > .blog-slider-wrap .swiper-button-prev:hover {
            background: #fff;
        }
        #recruit-blog > .blog-slider-wrap .swiper-button-prev:hover::before {
            background: var(--color-theme);
        }
        #recruit-blog > .blog-slider-wrap .swiper-button-next:hover {
            background: #fff;
        }
        #recruit-blog > .blog-slider-wrap .swiper-button-next:hover::before {
            background: var(--color-theme);
        }
    }

    #recruit-entry  {
        margin: 0 auto;
        padding: 0;
    }
    #recruit-entry .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 120;
    }
    #recruit-entry .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #recruit-entry .entry-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0 5%;
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 120;
        color: #fff;
        font-size: 10.0vw;
        font-weight: 500;
        font-family: var(--font-alphabet);
        font-style: italic;
        background: var(--color-theme);
        transition: background 0.3s ease-out;
    }
    #recruit-entry .entry-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.4em );
        right: 5%;
        width: 0.8em;
        height: 0.8em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-entry .entry-btn:hover {
            background: var(--color-accent);
        }
    }

    #recruit-data {
        margin: 0 auto;
        padding: 12.0vw 0 16.0vw;
    }

    #recruit-10ratio {
        margin: 0 auto;
        padding: 12.0vw 0 16.0vw;
        background: #f5faff;
    }

    #recruit-gotop {
        margin: 0 auto;
        padding: 12.0vw 0;
    }
    #recruit-gotop .recruit-gotop-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        padding: 0 16px;
        width: 240px;
        height: auto;
        aspect-ratio: 240 / 64;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.0;
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: 8px;
    }
    #recruit-gotop .recruit-gotop-btn::after {
        content: "";
        display: block;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    .recruit-zebra {
        margin: 0 auto;
        width: 100%;
        background: #fff;
    }
    .recruit-zebra:nth-child(odd) {
        background: #f5faff;
    }
    .page-recruit-numbers .recruit-zebra:nth-child(odd) {
        padding: 16.0vw 0;
        background: #fff;
    }
    .page-recruit-numbers .recruit-zebra:nth-child(even) {
        padding: 16.0vw 0;
        background: #f5faff;
    }
/*
    #interview-top {
        padding: 12.0vw 0;
    }
*/
    #interview-top .interview-top-grid {
        display: none;
    }

    #interview-top .interview-top-slider-wrap {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    #interview-top .interview-top-slider-wrap #interview-top-slider {
        position: relative;
        margin: 0;
        padding: 10.0vw 4.0vw;
        width: 100%;
        overflow: hidden;
    }
    #interview-top .interview-top-slider-wrap #interview-top-slider .swiper-slide {
        position: relative;
    }
    #interview-top-slider .swiper-slide .interview-top-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 4.0vw;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 376 / 128;
        background: #fff;
        border-radius: 2.0vw;
        overflow: hidden;
        transition: opacity 0.3s ease-out;
    }
    #interview-top-slider .swiper-slide .interview-top-box::after {
        position: absolute;
        content: "";
        top: calc( 50% - 8px );
        right: 12px;
        width: 10px;
        height: auto;
        aspect-ratio: 1 / 1;
        border-right: 2px solid var(--color-theme);
        border-bottom: 2px solid var(--color-theme);
        rotate: 45deg;
    }
    @media ( hover: hover ) {
        #interview-top-slider .swiper-slide .interview-top-box:hover {
            opacity: 0.5;
        }
    }
    #interview-top-slider .swiper-slide .interview-top-box .pic {
        width: auto;
        height: 100%;
        aspect-ratio: 96 / 128;
        flex: 0 0 auto;
    }
    #interview-top-slider .swiper-slide .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #interview-top-slider .swiper-slide .info {
        width: auto;
        height: auto;
        flex: 1 1 auto;
    }
    #interview-top-slider .swiper-slide .info span {
        margin: 0 0 0.5em;
        display: block;
        font-size: 3.75vw;
        text-align: left;
        line-height: 1.0;
    }
    #interview-top-slider .swiper-slide .info span.name {
        margin: 0.2em 0 0;
        color: var(--color-theme);
        font-size: 5vw;
        font-weight: 700;
    }

    .recruit-wrap {
        margin: 0 auto;
        padding: 16.0vw 4.0vw;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8.0vw 0;
    }
    .recruit-wrap .recruit-sidebar {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    .recruit-wrap .recruit-contents {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .recruit-sidebar .pic-front {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        opacity: 1.0;
        transition: opacity 0.3s ease-out;
    }
    .recruit-sidebar .pic-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    .recruit-sidebar .pic-back {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 960;
    }
    .recruit-sidebar .pic-back img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    .recruit-sidebar .info {
        position: absolute;
        bottom: 4.0vw;
        left: 4.0vw;
    }
    .recruit-sidebar .info span {
        display: block;
        color: #fff;
        font-size: 3.8vw;
        font-weight: 400;
        text-align: left;
        line-height:1.6
    }
    .recruit-sidebar .info span.name {
        color: #fff;
        font-size: 11vw;
        font-weight: 700;
        line-height: 1.3;
    }
    @media ( hover: hover ) {
        .recruit-sidebar .pic-front:hover {
            opacity: 0.0;
        }
    }

    .recruit-contents .recruit-h2 {
        margin: 0 auto;
        padding: 0 0 1.0em;
        width: 100%;
        color: var(--color-theme);
        font-size: 6.0vw;
        font-weight: 700;
        line-height: calc( 60 / 40 );
        border-bottom: 2px solid var(--color-theme);
    }
    .recruit-contents .recruit-h2::first-letter {
        color: var(--color-accent);
    }
    #page-main .recruit-contents p {
        margin: 1.5em 0;
        font-size: 3.75vw;
        font-weight: 400;
        line-height: 2.0;
    }
    #page-main .recruit-contents p:first-child {
        margin-top: 0;
    }

    .recruit-contents .common-flex {
        margin: 4.0vw auto 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4.0vw 0;
    }
    #page-main .recruit-contents .common-flex .pic {
        margin: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 384 / 256;
    }
    #page-main .recruit-contents .common-flex .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    #page-main .recruit-contents .common-flex .info {
        width: 100%;
    }

    .numbers-grid {
        margin: 4.0vw auto 0;
        padding: 0;
        width: var(--content-width-sp);
        display: grid;
        grid-template-columns: repeat( 1, 1fr );
        gap: 4.0vw 0;
    }
    .numbers-grid .numbers-box {
        position: relative;
        margin: 0;
        padding: 6.0vw 0;
        width: 100%;
        background: #f5faff;
        border-radius: 2.0vw;
    }
    .numbers-grid .numbers-box.padding-btm {
        padding: 4.0vw 0 12.0vw;
    }
    .recruit-zebra:nth-child(even) .numbers-grid .numbers-box {
        background: #fff;
    }
    .numbers-grid .numbers-box h3 {
        margin: 0;
        padding: 0 0 0 4.0vw;
        width: 100%;
        color: var(--color-theme);
        font-size: 6.0vw;
        font-weight: 900;
        text-align: left;
        line-height: calc( 36 / 24 );
        border-left: 1.0vw solid var(--color-accent);
    }

    .numbers-grid .numbers-box .graph {
        position: relative;
        margin: 4.0vw auto 0;
        padding: 0;
        width: var(--content-width-sp);
        height: auto;
    }
    .numbers-grid .numbers-box .graph figure {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }

    .numbers-grid .numbers-box .graph .count-up {
        position: absolute;
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 0;
        margin: 0;
        padding: 0;
        width: max-content;
        color: var(--color-theme);
        font-size: calc( 52 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 8.0vw;
        font-weight: 500;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        letter-spacing: 0;
        white-space: nowrap;
        opacity: 1.0;
    }
    .numbers-grid .numbers-box .graph .count-up::after {
        content: attr(data-unit);
        font-size: 45%;
        font-weight: 500;
        letter-spacing: 0.04em;
    }

    .numbers-grid .numbers-box #countup01,
    .numbers-grid .numbers-box #countup04,
    .numbers-grid .numbers-box #countup09,
    .numbers-grid .numbers-box #countup10,
    .numbers-grid .numbers-box #countup11 {
        width: 50%;
        /*justify-content: flex-end;*/
    }
    .numbers-grid .numbers-box #countup07 {
        width: 50%;
        /*justify-content: flex-end;*/
    }
    .numbers-grid .numbers-box #countup08 {
        width: 40%;
        justify-content: flex-end;
    }
    .numbers-grid .numbers-box #countup02,
    .numbers-grid .numbers-box #countup03,
    .numbers-grid .numbers-box #countup05,
    .numbers-grid .numbers-box #countup06 {
        width: 28%;
        justify-content: center;
    }
    .numbers-grid .numbers-box #countup12 {
        top: 13.0%;
        right: 64.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup13 {
        top: 13.0%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup14 {
        top: 49.0%;
        right: 0.5%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup15 {
        top: 85.0%;
        right: 15.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup16 {
        top: 85.0%;
        right: 69.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup17 {
        top: 49.0%;
        right: 73.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup18 {
        top: 8.5%;
        right: 73.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup19 {
        top: 40.5%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup20 {
        top: 84.5%;
        right: 27.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup21 {
        top: 63.0%;
        right: 79.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup22 {
        top: 8.0%;
        right: 65.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup23 {
        top: 30.5%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup24 {
        top: 84.0%;
        right: 18.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup25 {
        top: 84.0%;
        right: 71.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup26 {
        top: 46.0%;
        right: 79.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup27 {
        top: 1.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup28 {
        top: 22.0%;
        right: 52.5%;
        min-width: 20.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup29 {
        top: 43.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup30 {
        top: 64.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup31 {
        top: 85.0%;
        right: 52.5%;
        min-width: 20.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup32 {
        top: 1.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup33 {
        top: 22.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup34 {
        top: 43.0%;
        right: 0.0%;
        min-width: 20.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup35 {
        top: 64.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup36 {
        top: 8.0%;
        right: 69.5%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup37 {
        top: 15.0%;
        right: 5.5%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup38 {
        top: 51.0%;
        right: 6.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup39 {
        top: 84.0%;
        right: 25.5%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup40 {
        top: 84.0%;
        right: 80.5%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup41 {
        top: 39.0%;
        right: 82.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup42 {
        top: 15.0%;
        right: 71.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup43 {
        top: 8.0%;
        right: 33.0%;
        min-width: 20.0%;
    }
    .numbers-grid .numbers-box #countup44 {
        top: 15.0%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup45 {
        top: 52.0%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup46 {
        top: 84.0%;
        right: 18.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup47 {
        top: 84.0%;
        right: 79.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup48 {
        top: 52.0%;
        right: 81.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup49 {
        top: 8.0%;
        right: 69.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup50 {
        top: 23.0%;
        right: 7.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup51 {
        top: 84.0%;
        right: 23.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup52 {
        top: 84.0%;
        right: 74.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup53 {
        top: 43.0%;
        right: 78.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup54 {
        top: 1.0%;
        right: 52.5%;
        min-width: 15.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup55 {
        top: 22.0%;
        right: 52.5%;
        min-width: 15.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup56 {
        top: 43.0%;
        right: 52.5%;
        min-width: 15.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup57 {
        top: 64.0%;
        right: 52.5%;
        min-width: 10.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup58 {
        top: 85.0%;
        right: 52.5%;
        min-width: 10.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup59 {
        top: 1.0%;
        right: 0.0%;
        min-width: 15.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup60 {
        top: 22.0%;
        right: 0.0%;
        min-width: 15.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup61 {
        top: 43.0%;
        right: 0.0%;
        min-width: 10.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup62 {
        top: 64.0%;
        right: 0.0%;
        min-width: 10.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup63 {
        top: 1.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup64 {
        top: 22.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup65 {
        top: 43.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup66 {
        top: 64.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup67 {
        top: 85.0%;
        right: 52.5%;
        min-width: 20.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup68 {
        top: 1.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup69 {
        top: 22.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup70 {
        top: 43.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup71 {
        top: 64.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup72 {
        top: 1.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup73 {
        top: 22.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup74 {
        top: 43.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup75 {
        top: 64.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup76 {
        top: 85.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup77 {
        top: 1.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup78 {
        top: 22.0%;
        right: 0.0%;
        min-width: 20.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup79 {
        top: 43.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }
    .numbers-grid .numbers-box #countup80 {
        top: 64.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 42 * min( 90.0vw, 1160px ) / 1160 );
        font-size: 6.8vw;
    }

    #page-main .numbers-grid .numbers-box .memo {
        position: absolute;
        bottom: 6.0vw;
        left: 6.0vw;
        margin: 0;
        padding: 0;
        width: calc( 100% - 4.0vw );
        color: #333;
        font-size: 2.8vw;
        font-weight: 400;
        line-height: calc( 22.4 / 14 );
    }

    #page-main .numbers-grid .numbers-box .notice {
        padding:3vw 0 0 5vw;
        color: #333;
        font-size: 2.8vw;
        font-weight: 400;
    }

    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .icon {
        margin: -5vw 6.0vw 0 auto;
        padding: 0;
        width: 30%;
        height: auto;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .icons {
        margin: 2.0vw auto;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .icons .icon {
        margin: 0;
        padding: 0;
        width: 24%;
    }
    .recruit-zebra:nth-child(even) .numbers-grid .numbers-box .icon {
        position: absolute;
        right: 4.0vw;
        top: 4.0vw;
        margin: 0;
        padding: 0;
        width: 15%;
        height: auto;
    }

    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers {
        margin: 4.0vw auto 0;
        width: calc( 100% - 12.0vw );
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers span {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0;
        color: var(--color-theme);
        font-size: 18.0vw;
        font-weight: 500;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
        letter-spacing: 0;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers span::after {
        content: attr(data-unit);
        font-size: 4.0vw;
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers2 {
        margin: 9.0vw auto 0;
        width: calc( 100% - 8.0vw );
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers2 span {
        position: relative;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0;
        color: var(--color-theme);
        font-size: 15.0vw;
        font-weight: 500;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
        letter-spacing: 0;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers2 span::before {
        position: absolute;
        content: attr(data-rubi);
        bottom: 100%;
        left: 0;
        width: 100%;
        color: var(--color-accent);
        font-size: 4.5vw;
        font-weight: 700;
        font-family: var(--font-gothic);
        text-align: center;
        letter-spacing: 0.04em;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers2 span::after {
        content: attr(data-unit);
        font-size: 4.0vw;
        font-weight: 700;
        font-family: var(--font-gothic);
        letter-spacing: 0.04em;
    }

}


/**
 * PC用設定
 */
@media ( width >= 768px ) {

    #page-main {
        padding-bottom: 0;
    }
    #page-main.page-recruit-interview {
        padding-top: 0;
    }
    #page-main.page-recruit-numbers {
        padding-top: 0;
    }

    #recruit-main {
        margin: 0 auto;
        padding: 0 0 calc( 100vw * 152 / 1440 );
    }
    #recruit-main .recruit-first-h2 {
        margin: 0;
        font-size: calc( 100vw * 48 / 1440 );
        font-weight: 700;
        text-align: center;
        line-height: calc( 72 / 48 );
        letter-spacing: 0.06em;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #recruit-main .recruit-main-flex {
        margin: calc( 100vw * 56 / 1440 ) auto 0;
        padding: 0;
        width: var(--content-width-pc);
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    #recruit-main .recruit-main-flex .info {
        margin: 0;
        padding: 0;
        width: calc( 50% - ( 100vw * 40 / 1440 ) );
    }
    #recruit-main .recruit-main-flex .pic {
        position: relative;
        margin: 0;
        padding: 0;
        width: calc( 50% - ( 100vw * 40 / 1440 ) );
        height: auto;
        aspect-ratio: 540 / 712;
    }
    #recruit-main .recruit-main-flex .pic .pic-front {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1.0;
        transition: opacity 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-main .recruit-main-flex .pic:hover .pic-front {
            opacity: 0.0;
        }
    }
    #recruit-main .recruit-main-flex .pic .pic-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #recruit-main .recruit-main-flex .pic .pic-back {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 540 / 712;
    }
    #recruit-main .recruit-main-flex .pic .pic-back img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 100vw * 8 / 1440 );
    }

    #page-main .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
        color: #eaf3fc;
        font-size: calc( 100vw * 200 / 1440 );
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #page-main .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 100vw * 56 / 1440 );
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }

    #page-main .recruit-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: calc( 100vw * 40 / 1440 ) auto 0;
        padding: 0;
        width: calc( 100vw * 440 / 1440 );
        height: auto;
        aspect-ratio: 440 / 77;
        color: #fff;
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        line-height: 1.0;
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #page-main .recruit-btn::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        right: 1.5em;
        display: block;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    #page-main .recruit-btn.small {
        justify-content: flex-start;
        padding: 0 0 0 2em;
        width: calc(100vw * 300 / 1440);
        aspect-ratio: 300 / 64;
        font-size: calc( 100vw * 16 / 1440 );
    }

    #recruit-news {
        margin: 0 auto;
        padding: calc( 100vw * 80 / 1440 ) 0 calc( 100vw * 160 / 1440 );
        background: #f5faff;
    }
    #recruit-news .recruit-news-box {
        margin: 0 auto;
        padding: calc( 100vw * 16 / 1440 ) calc( 100vw * 40 / 1440 );
        width: var(--content-width-pc);
        height: auto;
        aspect-ratio: 1160 / 350;
        background: #fff;
        border-radius: calc( 100vw * 8 / 1440 ) 0 0 calc( 100vw * 8 / 1440 );
        overflow-y: auto;
    }
    #recruit-news .recruit-news-box .recruit-news-item {
        margin: 0;
        padding: calc( 100vw * 24 / 1440 ) 0;
        width: 100%;
        border-bottom: 1px solid #d2dbea;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        a {
            text-decoration: underline;
        }
    }

    #recruit-news .recruit-news-box .recruit-news-item .date {
        margin: 0;
        padding: 0;
        width: calc( 100vw * 100 / 1440 );
        font-size: calc( 100vw * 16 / 1440 );
        font-weight: 400;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 2.0;
    }
    #recruit-news .recruit-news-box .recruit-news-item .title {
        margin: 0;
        padding: 0;
        width: calc( 100% - ( 100vw * 100 / 1440 ) );
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        line-height: 2.0;
    }

    #recruit-interview {
        margin: 0 auto;
        padding: calc( 100vw * 80 / 1440 ) 0 calc( 100vw * 160 / 1440 );
    }
    #recruit-interview > .interview-slider-wrap {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
    }
    #recruit-interview > .interview-slider-wrap #interview-slider {
        position: relative;
        margin: 0;
        padding: calc( 100vw * 60 / 1440 ) 0;
        width: 100%;
        overflow: hidden;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide {
        display:block;
        position: relative;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .pic-front {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        opacity: 1.0;
        transition: opacity 0.3s ease-out;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide ,pic-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .pic-back {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 960;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide ,pic-back img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .info {
        position: absolute;
        bottom: calc( 100vw * 20 / 1440 );
        left: calc( 100vw * 24 / 1440 );
    }
    @media ( hover: hover ) {
      #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide:hover .info {
          display:none;
      }
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .info span {
        display: block;
        color: #fff;
        font-size: calc( 100vw * 14 / 1440 );
        text-align: left;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .info span.name {
        font-size: calc( 100vw * 40 / 1440 );
        font-weight: 700;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .btn {
        position: absolute;
        display: block;
        bottom: calc( 100vw * 24 / 1440 );
        right: calc( 100vw * 24 / 1440 );
        width: calc( 100vw * 48 / 1440 );
        height: calc( 100vw * 48 / 1440 );
        background: var(--color-accent);
        border: 1px solid var(--color-accent) !important;
        border-radius: calc( 100vw * 8 / 1440 );
        transition: background 0.3s ease-out;
    }
    #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide .btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - ( 100vw * 7 / 1440 ) );
        right: calc( 50% - ( 100vw * 8 / 1440 ) );
        width: calc( 100vw * 16 / 1440 );
        height: calc( 100vw * 14 / 1440 );
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide:hover .btn {
            background: #fff;
        }
        #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide:hover .btn::after {
            background: var(--color-accent);
        }
    }

    #recruit-interview > .interview-slider-wrap .swiper-pagination-bullet {
        width: calc( 100vw * 12 / 1440 );
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #recruit-interview > .interview-slider-wrap .swiper-pagination-bullet-active {
        background: var(--color-theme);
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-prev,
    #recruit-interview > .interview-slider-wrap .swiper-button-next {
        position: absolute;
        margin: 0;
        padding: 0;
        top: 50%;
        left: -4.5em;
        bottom: auto;
        right: auto;
        width:clamp(1vw, 4vw, 3em);
        height: auto;
        aspect-ratio: 1 / 1;
        transform: translateY(-50%);
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: calc( 100vw * 8 / 1440 );
        transition: all 0.2s ease-out;
        overflow: hidden;
        @media screen and ( max-width: 1340px ) {
            left: -4.5vw;
        }
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-next {
        left: auto;
        right: -4.5em;
        @media screen and ( max-width: 1340px ) {
            right: -4.5vw;
        }
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-prev::before {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        scale: -1.0 1.0;
        transition: all 0.3s ease-out;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-prev::after {
        content: none;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-next::before {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: all 0.3s ease-out;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-next::after {
        content: none;
    }
    #recruit-interview > .interview-slider-wrap .swiper-button-disabled {
        background: #999;
        border: 1px solid #999;
    }
    #recruit-interview > .interview-slider-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: var(--color-accent);
    }
    @media ( hover: hover ) {
        #recruit-interview > .interview-slider-wrap #interview-slider .swiper-slide:hover .pic-front {
            opacity: 0.0;
        }
        #recruit-interview > .interview-slider-wrap .swiper-button-prev:hover {
            background: #fff;
        }
        #recruit-interview > .interview-slider-wrap .swiper-button-prev:hover::before {
            background: var(--color-theme);
        }
        #recruit-interview > .interview-slider-wrap .swiper-button-next:hover {
            background: #fff;
        }
        #recruit-interview > .interview-slider-wrap .swiper-button-next:hover::before {
            background: var(--color-theme);
        }
    }

    #recruit-work {
        margin: 0 auto;
        padding: calc( 100vw * 80 / 1440 ) 0 calc( 100vw * 160 / 1440 );
        background: #f5faff;
    }
    #recruit-work .recruit-work-grid {
        margin: 0 auto;
        width: var(--content-width-pc);
        display: grid;
        grid-template-columns: repeat( 3, 1fr );
        gap: calc( 100vw * 40 / 1440 ) calc( 100vw * 40 / 1440 );
    }
    #recruit-work .recruit-work-grid .recruit-work-item {
        display:block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        border-radius: calc( 100vw * 8 / 1440 );
        overflow: hidden;
        z-index: 1;
    }
    #recruit-work .recruit-work-grid .recruit-work-item::after {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        width: 100%;
        height: 50%;
        background: linear-gradient( to bottom, #00112f00, #00112fcd );
        z-index: 1;
    }
    #recruit-work .recruit-work-grid .recruit-work-item figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #recruit-work .recruit-work-grid .recruit-work-item figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-work .recruit-work-grid .recruit-work-item:hover figure img {
            scale: 1.1 1.1;
        }
    }
    #recruit-work .recruit-work-grid .recruit-work-item .info {
        position: absolute;
        bottom: calc( 100vw * 20 / 1440 );
        left: calc( 100vw * 24 / 1440 );
        z-index: 2;
    }
    #recruit-work .recruit-work-grid .recruit-work-item .info span {
        display: block;
        color: #fff;
        font-size: calc( 100vw * 18 / 1440 );
        font-weight: 700;
        text-align: left;
    }
    #recruit-work .recruit-work-grid .recruit-work-item .info h3 {
        color: #fff;
        font-size: calc( 100vw * 32 / 1440 );
        font-weight: 700;
    }
    #recruit-work .recruit-work-grid .recruit-work-item .btn {
        position: absolute;
        display: block;
        bottom: calc( 100vw * 24 / 1440 );
        right: calc( 100vw * 24 / 1440 );
        width: calc( 100vw * 48 / 1440 );
        height: calc( 100vw * 48 / 1440 );
        background: var(--color-accent);
        border-radius: calc( 100vw * 8 / 1440 );
        z-index: 2;
        border: 1px solid var(--color-accent) !important;
        transition: background 0.3s ease-out;
    }
    #recruit-work .recruit-work-grid .recruit-work-item .btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - ( 100vw * 7 / 1440 ) );
        right: calc( 50% - ( 100vw * 8 / 1440 ) );
        width: calc( 100vw * 16 / 1440 );
        height: calc( 100vw * 14 / 1440 );
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-work .recruit-work-grid .recruit-work-item:hover .btn {
            background: #fff;
        }
        #recruit-work .recruit-work-grid .recruit-work-item:hover .btn::after {
            background: var(--color-accent);
        }
    }
    #recruit-work .recruit-work-grid .recruit-work-item.wide {
        grid-column: span 3;
    }
    #recruit-work .recruit-work-grid .recruit-work-item.wide figure {
        aspect-ratio: 1160 / 360;
    }
    #recruit-work .recruit-work-grid .recruit-work-item.wide .info span {
        font-size: calc( 100vw * 28 / 1440 );
    }
    #recruit-work .recruit-work-grid .recruit-work-item.wide .info h3 {
        font-size: calc( 100vw * 40 / 1440 );
    }

    #recruit-recruit {
        margin: 0 auto;
        padding: calc( 100vw * 80 / 1440 ) 0 calc( 100vw * 160 / 1440 );
    }
    #recruit-recruit .recruit-recruit-grid {
        margin: 0 auto;
        width: var(--content-width-pc);
        display: grid;
        grid-template-columns: repeat( 2, 1fr );
        gap: calc( 100vw * 40 / 1440 ) calc( 100vw * 40 / 1440 );
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item {
        display:block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        border-radius: calc( 100vw * 8 / 1440 );
        overflow: hidden;
        z-index: 1;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item::after {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        width: 100%;
        height: 50%;
        background: linear-gradient( to bottom, #00112f00, #00112fcd );
        z-index: 1;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 560 / 346;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-recruit .recruit-recruit-grid .recruit-recruit-item:hover figure img {
            scale: 1.1 1.1;
        }
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .info {
        position: absolute;
        bottom: calc( 100vw * 20 / 1440 );
        left: calc( 100vw * 24 / 1440 );
        z-index: 2;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .info span {
        display: block;
        color: #fff;
        font-size: calc( 100vw * 18 / 1440 );
        font-weight: 700;
        text-align: left;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .info h3 {
        color: #fff;
        font-size: calc( 100vw * 32 / 1440 );
        font-weight: 700;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .btn {
        position: absolute;
        display: block;
        bottom: calc( 100vw * 24 / 1440 );
        right: calc( 100vw * 24 / 1440 );
        width: calc( 100vw * 48 / 1440 );
        height: calc( 100vw * 48 / 1440 );
        background: var(--color-accent);
        border: 1px solid var(--color-accent) !important;
        border-radius: calc( 100vw * 8 / 1440 );
        z-index: 2;
        transition: background 0.3s ease-out;
    }
    #recruit-recruit .recruit-recruit-grid .recruit-recruit-item .btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - ( 100vw * 7 / 1440 ) );
        right: calc( 50% - ( 100vw * 8 / 1440 ) );
        width: calc( 100vw * 16 / 1440 );
        height: calc( 100vw * 14 / 1440 );
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-recruit .recruit-recruit-grid .recruit-recruit-item:hover .btn {
            background: #fff;
        }
        #recruit-recruit .recruit-recruit-grid .recruit-recruit-item:hover .btn::after {
            background: var(--color-accent);
        }
    }

    #recruit-blog {
        margin: 0 auto;
        padding: calc( 100vw * 80 / 1440 ) 0 calc( 100vw * 160 / 1440 );
        background: #f5faff;
    }
    #recruit-blog > .blog-slider-wrap {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
    }
    #recruit-blog > .blog-slider-wrap #blog-slider {
        position: relative;
        margin: 0;
        padding: 0 0 calc( 100vw * 60 / 1440 );
        width: 100%;
        overflow: hidden;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide {
        position: relative;
        transition: opacity 0.2s ease-out;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        overflow: hidden;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: calc( 100vw * 8 / 1440 );
        transition: scale 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide figure img:hover {
            scale: 1.1 1.1;
        }
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide .date {
        margin: 0;
        font-size: calc( 100vw * 14 / 1440 );
        font-family: var(--font-alphabet);
        text-align: left;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide .title {
        margin: 0.2em 0 0;
        font-size: calc( 100vw * 16 / 1440 );
        font-weight: 700;
        text-align: left;
    }
    #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide .cat {
        margin: 0.4em 0 0;
        padding: 0.2em 0.4em;
        width: max-content;
        font-size: calc( 100vw * 14 / 1440 );
        font-weight: 700;
        line-height: 1.0;
        border: 1px solid #073f8f;
        border-radius: calc( 100vw * 4 / 1440 );
    }
    #recruit-blog > .blog-slider-wrap .swiper-pagination-bullet {
        width: calc( 100vw * 12 / 1440 );
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #recruit-blog > .blog-slider-wrap .swiper-pagination-bullet-active {
        background: var(--color-theme);
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-prev,
    #recruit-blog > .blog-slider-wrap .swiper-button-next {
        position: absolute;
        margin: 0;
        padding: 0;
        top: 50%;
        left: -4.5em;
        bottom: auto;
        right: auto;
        width:clamp(1vw, 4vw, 3em);
        height: auto;
        aspect-ratio: 1 / 1;
        transform: translateY(-50%);
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: calc( 100vw * 8 / 1440 );
        transition: all 0.2s ease-out;
        overflow: hidden;
        @media screen and ( max-width: 1340px ) {
            left: -4.5vw;
        }
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-next {
        left: auto;
        right: -4.5em;
        @media screen and ( max-width: 1340px ) {
            right: -4.5vw;
        }
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-prev::before {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        scale: -1.0 1.0;
        transition: all 0.3s ease-out;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-prev::after {
        content: none;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-next::before {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: all 0.3s ease-out;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-next::after {
        content: none;
    }
    #recruit-blog > .blog-slider-wrap .swiper-button-disabled {
        background: #999;
        border: 1px solid #999;
    }
    #recruit-blog > .blog-slider-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: var(--color-theme);
    }
    @media ( hover: hover ) {
        #recruit-blog > .blog-slider-wrap #blog-slider .swiper-slide:hover {
            opacity: 0.6;
        }
        #recruit-blog > .blog-slider-wrap .swiper-button-prev:hover {
            background: #fff;
        }
        #recruit-blog > .blog-slider-wrap .swiper-button-prev:hover::before {
            background: var(--color-theme);
        }
        #recruit-blog > .blog-slider-wrap .swiper-button-next:hover {
            background: #fff;
        }
        #recruit-blog > .blog-slider-wrap .swiper-button-next:hover::before {
            background: var(--color-theme);
        }
    }

    #recruit-entry  {
        margin: 0 auto;
        padding: 0;
    }
    #recruit-entry .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 300;
    }
    #recruit-entry .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #recruit-entry .entry-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: 0 calc( 100vw * 40 / 1440 );
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 300;
        color: #fff;
        font-size: calc( 100vw * 120 / 1440 );
        font-weight: 500;
        font-family: var(--font-alphabet);
        font-style: italic;
        background: var(--color-theme);
        transition: background 0.3s ease-out;
    }
    #recruit-entry .entry-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - ( 100vw * 18 / 1440 ) );
        right: calc( 100vw * 40 / 1440 );
        width: calc( 100vw * 40 / 1440 );
        height: calc( 100vw * 36 / 1440 );
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #recruit-entry .entry-btn:hover {
            background: var(--color-accent);
        }
    }

    #recruit-data {
        margin: 0 auto;
        padding: calc( 100vw * 80 / 1440 ) 0 calc( 100vw * 160 / 1440 );
    }

    #recruit-10ratio {
        margin: 0 auto;
        padding: calc( 100vw * 80 / 1440 ) 0 calc( 100vw * 160 / 1440 );
        background: #f5faff;
    }

    #recruit-gotop {
        margin: 0 auto;
        padding: calc( 100vw * 80 / 1440 ) 0;
    }
    #recruit-gotop .recruit-gotop-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        padding: 0 calc( 100vw * 16 / 1440 );
        width: calc( 100vw * 240 / 1440 );
        height: auto;
        aspect-ratio: 240 / 64;
        color: #fff;
        font-size: calc( 100vw * 16 / 1440 );
        font-weight: 700;
        line-height: 1.0;
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #recruit-gotop .recruit-gotop-btn::after {
        content: "";
        display: block;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    .recruit-zebra {
        margin: 0 auto;
        width: 100%;
        background: #fff;
    }
    .recruit-zebra:nth-child(odd) {
        background: #f5faff;
    }
    .page-recruit-numbers .recruit-zebra:nth-child(odd) {
        padding: calc( 100vw * 120 / 1440 ) 0;
        background: #fff;
    }
    .page-recruit-numbers .recruit-zebra:nth-child(even) {
        padding: calc( 100vw * 120 / 1440 ) 0;
        background: #f5faff;
    }

    #interview-top {
        padding: calc( 100vw * 96 / 1440 ) 0;
    }
    #interview-top .interview-top-grid {
        margin: 0 auto;
        padding: 0;
        width: var(--content-width-pc);
        display: grid;
        grid-template-columns: repeat( 3, 1fr );
        gap: calc( 100vw * 16 / 1440 ) calc( 100vw * 16 / 1440 );
    }
    #interview-top .interview-top-grid .interview-top-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 calc( 100vw * 16 / 1440 );
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 376 / 128;
        background: #fff;
        border-radius: calc( 100vw * 8 / 1440 );
        overflow: hidden;
        transition: background 0.3s ease-out;
    }
    #interview-top .interview-top-grid .interview-top-box::after {
        position: absolute;
        content: "";
        top: calc( 50% - ( 100vw * 8 / 1440 ) );
        right: calc( 100vw * 24 / 1440 );
        width: calc( 100vw * 16 / 1440 );
        height: auto;
        aspect-ratio: 1 / 1;
        border-right: 2px solid var(--color-theme);
        border-bottom: 2px solid var(--color-theme);
        rotate: 45deg;
    }
    @media ( hover: hover ) {
        #interview-top .interview-top-grid .interview-top-box:hover {
            background: var(--color-theme);
        }
        #interview-top .interview-top-grid .interview-top-box:hover::after {
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
        }
    }
    #interview-top .interview-top-grid .interview-top-box .pic {
        width: auto;
        height: 100%;
        aspect-ratio: 96 / 128;
        flex: 0 0 auto;
    }
    #interview-top .interview-top-grid .interview-top-box .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #interview-top .interview-top-grid .interview-top-box .info {
        width: auto;
        height: auto;
        flex: 1 1 auto;
    }
    #interview-top .interview-top-grid .interview-top-box .info span {
        margin: 0 0 0.5em;
        display: block;
        font-size: calc( 100vw * 14 / 1440 );
        text-align: left;
        line-height: 1.0;
    }
    #interview-top .interview-top-grid .interview-top-box .info span.name {
        margin: 0.2em 0 0;
        color: var(--color-theme);
        font-size: calc( 100vw * 40 / 1440 );
        font-weight: 700;
    }
    @media ( hover: hover ) {
        #interview-top .interview-top-grid .interview-top-box:hover .info,
        #interview-top .interview-top-grid .interview-top-box:hover .info span.name {
            color: #fff;
        }
    }
    #interview-top .interview-top-slider-wrap {
        display: none;
    }

    .recruit-wrap {
        margin: 0 auto;
        padding: calc( 100vw * 120 / 1440 ) 9.72%;
        /*width: var(--content-width-pc);*/
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .recruit-wrap .recruit-sidebar {
        position: sticky;
        top: calc( 100vw * 128 / 1440 );
        margin: 0;
        padding: 0;
        width: calc( 100vw * 300 / 1440 );
    }
    .recruit-wrap .recruit-contents {
        margin: 0;
        padding: 0;
        width: calc( 100% - ( 100vw * 300 / 1440 ) - ( 100vw * 56 / 1440 ) );
    }

    .recruit-sidebar .pic-front {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        opacity: 1.0;
        transition: opacity 0.3s ease-out;
    }
    .recruit-sidebar .pic-front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    .recruit-sidebar .pic-back {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 960;
    }
    .recruit-sidebar .pic-back img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    .recruit-sidebar .info {
        position: absolute;
        bottom: calc( 100vw * 20 / 1440 );
        left: calc( 100vw * 24 / 1440 );
        transition: opacity 0.3s ease-out;
    }
    .recruit-sidebar .info span {
        display: block;
        color: #fff;
        font-size: calc( 100vw * 14 / 1440 );
        font-weight: 400;
        text-align: left;
    }
    .recruit-sidebar .info span.name {
        color: #fff;
        font-size: calc( 100vw * 48 / 1440 );
        font-weight: 700;
    }
    @media ( hover: hover ) {
        .recruit-sidebar .pic-front:hover {
            opacity: 0.0;
        }
        .recruit-sidebar:hover .info {
            opacity:0;
        }
    }

    .recruit-contents .recruit-h2 {
        margin: 0 auto;
        padding: 0 0 1.0em;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 100vw * 40 / 1440 );
        font-weight: 700;
        line-height: calc( 60 / 40 );
        border-bottom: 2px solid var(--color-theme);
    }
    .recruit-contents .recruit-h2::first-letter {
        color: var(--color-accent);
    }
    #page-main .recruit-contents p {
        margin: 1.5em 0;
        font-size: calc( 100vw * 16 / 1440 );
        font-weight: 400;
        line-height: 2.0;
    }
    #page-main .recruit-contents p:first-child {
        margin-top: 0;
    }

    .recruit-contents .common-flex {
        margin: calc( 100vw * 20 / 1440 ) auto 0;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0 calc( 100vw * 40 / 1440 );
    }
    #page-main .recruit-contents .common-flex .pic {
        margin: 0;
        width: 50%;
        height: auto;
        aspect-ratio: 384 / 256;
    }
    #page-main .recruit-contents .common-flex .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #page-main .recruit-contents .common-flex .info {
        width: 50%;
    }

    .numbers-grid {
        margin: calc( 100vw * 20 / 1440 ) auto 0;
        padding: 0;
        width: var(--content-width-pc);
        display: grid;
        gap: calc( 100vw * 30 / 1440 ) calc( 100vw * 30 / 1440 );
    }
    .numbers-grid.col3 {
        grid-template-columns: repeat( 3, 1fr );
    }
    .numbers-grid.col2 {
        grid-template-columns: repeat( 2, 1fr );
    }
    .numbers-grid .numbers-box {
        position: relative;
        margin: 0;
        padding: calc( 100vw * 32 / 1440 ) 0;
        width: 100%;
        background: #f5faff;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    .numbers-grid .numbers-box.padding-btm {
        padding: calc( 100vw * 32 / 1440 ) 0 calc( 100vw * 64 / 1440 );
    }
    .recruit-zebra:nth-child(even) .numbers-grid .numbers-box {
        background: #fff;
    }
    .numbers-grid .numbers-box h3 {
        margin: 0 0 calc( 100vw * 32 / 1440 );
        padding: 0 0 0 calc( 100vw * 32 / 1440 );
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 100vw * 24 / 1440 );
        font-weight: 900;
        text-align: left;
        line-height: calc( 36 / 24 );
        border-left: calc( 100vw * 6 / 1440 ) solid var(--color-accent);
    }
    .numbers-grid .numbers-box .graph {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: var(--content-width-pc);
        height: auto;
    }
    .numbers-grid .numbers-box .graph figure {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }

    .numbers-grid .numbers-box .graph .count-up {
        position: absolute;
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 0;
        margin: 0;
        padding: 0;
        width: max-content;
        color: var(--color-theme);
        font-size: calc( 100vw * 52 / 1440 );
        font-weight: 500;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        letter-spacing: 0;
        white-space: nowrap;
        opacity: 1.0;
    }
    .numbers-grid .numbers-box .graph .count-up::after {
        content: attr(data-unit);
        font-size: 45%;
        font-weight: 500;
        letter-spacing: 0.04em;
    }

    .numbers-grid .numbers-box #countup01,
    .numbers-grid .numbers-box #countup04,
    .numbers-grid .numbers-box #countup09,
    .numbers-grid .numbers-box #countup10,
    .numbers-grid .numbers-box #countup11 {
        width: 65%;
        /*justify-content: flex-end;*/
    }
    .numbers-grid .numbers-box #countup07 {
        width: 75%;
        /*justify-content: flex-end;*/
    }
    .numbers-grid .numbers-box #countup08 {
        width: 50%;
        /*justify-content: flex-end;*/
    }
    .numbers-grid .numbers-box #countup02,
    .numbers-grid .numbers-box #countup03,
    .numbers-grid .numbers-box #countup05,
    .numbers-grid .numbers-box #countup06 {
        width: 45%;
        justify-content: center;
    }
    .numbers-grid .numbers-box #countup12 {
        top: 13.0%;
        right: 64.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup13 {
        top: 13.0%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup14 {
        top: 49.0%;
        right: 0.5%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup15 {
        top: 85.0%;
        right: 15.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup16 {
        top: 85.0%;
        right: 69.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup17 {
        top: 49.0%;
        right: 73.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup18 {
        top: 8.5%;
        right: 73.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup19 {
        top: 40.5%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup20 {
        top: 84.5%;
        right: 27.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup21 {
        top: 63.0%;
        right: 79.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup22 {
        top: 8.0%;
        right: 65.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup23 {
        top: 30.5%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup24 {
        top: 84.0%;
        right: 18.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup25 {
        top: 84.0%;
        right: 71.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup26 {
        top: 46.0%;
        right: 79.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup27 {
        top: 1.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup28 {
        top: 22.0%;
        right: 52.5%;
        min-width: 20.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup29 {
        top: 43.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup30 {
        top: 64.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup31 {
        top: 85.0%;
        right: 52.5%;
        min-width: 20.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup32 {
        top: 1.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup33 {
        top: 22.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup34 {
        top: 43.0%;
        right: 0.0%;
        min-width: 20.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup35 {
        top: 64.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup36 {
        top: 8.0%;
        right: 69.5%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup37 {
        top: 15.0%;
        right: 5.5%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup38 {
        top: 51.0%;
        right: 6.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup39 {
        top: 84.0%;
        right: 25.5%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup40 {
        top: 84.0%;
        right: 80.5%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup41 {
        top: 39.0%;
        right: 82.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup42 {
        top: 15.0%;
        right: 71.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup43 {
        top: 8.0%;
        right: 33.0%;
        min-width: 20.0%;
    }
    .numbers-grid .numbers-box #countup44 {
        top: 15.0%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup45 {
        top: 52.0%;
        right: 0.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup46 {
        top: 84.0%;
        right: 18.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup47 {
        top: 84.0%;
        right: 79.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup48 {
        top: 52.0%;
        right: 81.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup49 {
        top: 8.0%;
        right: 69.0%;
        min-width: 22.0%;
    }
    .numbers-grid .numbers-box #countup50 {
        top: 23.0%;
        right: 7.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup51 {
        top: 84.0%;
        right: 23.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup52 {
        top: 84.0%;
        right: 74.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup53 {
        top: 43.0%;
        right: 78.0%;
        min-width: 25.0%;
    }
    .numbers-grid .numbers-box #countup54 {
        top: 1.0%;
        right: 52.5%;
        min-width: 15.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup55 {
        top: 22.0%;
        right: 52.5%;
        min-width: 15.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup56 {
        top: 43.0%;
        right: 52.5%;
        min-width: 15.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup57 {
        top: 64.0%;
        right: 52.5%;
        min-width: 10.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup58 {
        top: 85.0%;
        right: 52.5%;
        min-width: 10.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup59 {
        top: 1.0%;
        right: 0.0%;
        min-width: 15.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup60 {
        top: 22.0%;
        right: 0.0%;
        min-width: 15.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup61 {
        top: 43.0%;
        right: 0.0%;
        min-width: 10.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup62 {
        top: 64.0%;
        right: 0.0%;
        min-width: 10.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup63 {
        top: 1.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup64 {
        top: 22.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup65 {
        top: 43.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup66 {
        top: 64.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup67 {
        top: 85.0%;
        right: 52.5%;
        min-width: 20.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup68 {
        top: 1.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup69 {
        top: 22.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup70 {
        top: 43.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup71 {
        top: 64.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup72 {
        top: 1.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup73 {
        top: 22.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup74 {
        top: 43.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup75 {
        top: 64.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup76 {
        top: 85.0%;
        right: 52.5%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup77 {
        top: 1.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup78 {
        top: 22.0%;
        right: 0.0%;
        min-width: 20.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup79 {
        top: 43.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }
    .numbers-grid .numbers-box #countup80 {
        top: 64.0%;
        right: 0.0%;
        min-width: 18.0%;
        font-size: calc( 100vw * 42 / 1440 );
    }

    #page-main .numbers-grid .numbers-box .memo {
        position: absolute;
        bottom: calc( 100vw * 32 / 1440 );
        left: calc( 100vw * 32 / 1440 );
        margin: 0;
        padding: 0;
        width: calc( 100% - ( 100vw * 32 / 1440 ) );
        color: #333;
        font-size: calc( 100vw * 14 / 1440 );
        font-weight: 400;
        line-height: calc( 22.4 / 14 );
    }
    #page-main .numbers-grid .numbers-box .notice {
        padding: calc( 100vw * 30 / 1440 ) 0 0 calc( 100vw * 30 / 1440 );
        color: #333;
        font-size: calc( 100vw * 14 / 1440 );
        font-weight: 400;
    }

    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .icon {
        margin: calc( 100vw * 10 / 1440 ) calc( 100vw * 32 / 1440 ) 0 auto;
        padding: 0;
        width: 30%;
        height: auto;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .icons {
        margin: calc( 100vw * 10 / 1440 ) auto 0;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .icons .icon {
        margin: 0;
        padding: 0;
        width: 24%;
    }
    .recruit-zebra:nth-child(even) .numbers-grid .numbers-box .icon {
        position: absolute;
        right: 2%;
        bottom: 2%;
        margin: 0;
        padding: 0;
        width: 15%;
        height: auto;
    }

    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers {
        margin: calc( 100vw * 10 / 1440 ) auto 0;
        width: calc( 100% - ( 100vw * 64 / 1440 ) );
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers span {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0;
        color: var(--color-theme);
        font-size: calc( 100vw * 88 / 1440 );
        font-weight: 500;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
        letter-spacing: 0;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers span::after {
        content: attr(data-unit);
        font-size: calc( 100vw * 32 / 1440 );
        font-weight: 700;
        letter-spacing: 0.04em;
    }

    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers2 {
        margin: calc( 100vw * 20 / 1440 ) auto 0;
        width: calc( 100% - ( 100vw * 64 / 1440 ) );
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers2 span {
        position: relative;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0;
        color: var(--color-theme);
        font-size: calc( 100vw * 88 / 1440 );
        font-weight: 500;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
        letter-spacing: 0;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers2 span::before {
        position: absolute;
        content: attr(data-rubi);
        bottom: 100%;
        left: 0;
        width: 100%;
        color: var(--color-accent);
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        font-family: var(--font-gothic);
        text-align: center;
        letter-spacing: 0.04em;
    }
    .recruit-zebra:nth-child(odd) .numbers-grid .numbers-box .numbers2 span::after {
        content: attr(data-unit);
        font-size: calc( 100vw * 32 / 1440 );
        font-weight: 700;
        font-family: var(--font-gothic);
        letter-spacing: 0.04em;
    }


}

@media ( width < 1200px ) and ( width >= 768px ) {
    .numbers-grid.col3 {
        grid-template-columns: repeat( 2, 1fr );
    }
}