@charset "utf-8";


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

    #mv {
        margin: 0 auto;
        width: 100%;
    }
    #mv .mv-bg {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        overflow: hidden;
    }
    #mv .mv-bg img {
        position: absolute;
        left: 50%;
        bottom: 0;
        translate: -50% 0;
        margin: 0;
        padding: 0;
        width: 250%;
        max-width: 250%;
        height: auto;
    }
    #mv .mv-box {
        position: absolute;
        bottom: 5%;
        left: 5%;
        margin: 0;
        padding: 0;
        width: 90%;
        height: auto;
        color: #fff;
    }
    #mv .mv-box .txt1 {
        margin: 0.3em auto;
        padding: 0 0.2em;
        width: max-content;
        color: #ff9d00;
        font-size: 6.0vw;
        font-weight: 700;
        text-align: center;
        line-height: 1.6;
        background: #fff;
    }
    #mv .mv-box .txt2 {
        margin: 2.0em 0 0;
        padding: 0;
        color: #ff9d00;
        font-size: 3.6vw;
        font-weight: 700;
        text-align: left;
        line-height: 1.7;
    }

    main {
        margin: 0 auto;
        width: 100%;
    }

    #news {
        margin: 0 auto;
        padding: 8.0vw 0;
        width: 100%;
    }
    #news .news-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4.0vw 0;
    }
    #news .news-left {
        margin: 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 40% 60%;
        grid-template-rows: 8vw 1fr;
        gap: 1.0vw;
    }
    #news .news-right {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #news .news-left .en-title {
        position: relative;
        margin: 0;
        padding: 48px 0 0;
        font-size: 8.0vw;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        text-align: left;
        gird-row: 1;
        grid-column: 1;
    }
    #news .news-left .en-title::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 35px;
        height: 38px;
        background: url(../images/icon-cube.svg) no-repeat center / contain;
        /*
        bottom: calc( 100% + 20px );
        left: 0;
        width: 26px;
        height: 11px;
        background: linear-gradient( to right, #91c1e9 11px, transparent 11px, transparent 15px, #ff9d00 15px );
        */
    }
    #news .news-left .ja-title {
        margin: 0;
        font-size: 2.8vw;
        font-weight: 700;
        line-height: 1.0;
        text-align: left;
        gird-row: 2;
        grid-column: 1;
    }
    #news .news-left .news-sels {
        margin: 0;
        padding: 0;
        width: max-content;
        grid-row: 1 / 3;
        grid-column: 2;
    }
    #news .news-left .news-sels label {
        display: block;
        margin: 0;
        padding: 4.0vw 0 2.0vw;
        color: #a1a1a1;
        font-size: 2.8vw;
        font-weight: 700;
        line-height: calc( 20 / 13 );
        border-bottom: 1px solid #a1a1a1;
        transition: color 0.3s ease-out, border 0.3s ease-out;
    }
    #news .news-left .news-sels label:has(input[type="radio"]:checked) {
        color: #000;
        border-bottom: 1px solid #000;
    }
    #news .news-right .news-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        padding: 4.0vw 0; 
        border-bottom: 1px solid #d4d4d4;
        gap: 2.0vw 2.0vw;
    }
    #news .news-right .news-item:first-child {
        border-top: 1px solid #d4d4d4;
    }
    #news .news-right .news-item .date {
        margin: 0;
        padding: 0;
        width: 20.0vw;
        color: #878787;
        font-size: 3.6vw;
        font-weight: 400;
        font-family: 'Helvetica';
        line-height: calc( 20 / 18 );
        flex: 0 0 20.0vw;
    }
    #news .news-right .news-item .cat {
        margin: 0;
        padding: 0.3em 1.0em;
        width: max-content;
        color: #fda95a;
        font-size: 2.8vw;
        font-weight: 400;
        line-height: 1.0;
        white-space: nowrap;
        border: 1px solid #fda95a;
        flex: 0 0 auto;
    }
    #news .news-right .news-item .title {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 18 );
    }
    #news .news-left .btn-common {
        grid-column: span 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 4.0vw auto 0;
        padding: 0 1.5em;
        width: 70%;
        height: auto;
        aspect-ratio: 290 / 62;
        color: #ff9d00;
        font-size: 4.0vw;
        font-weight: 500;
        background: #fff;
        border: 1px solid #ff9d00;
        border-radius: 1.0vw;
    }
    #news .news-left .btn-common::after {
        content: "→";
    }

    #future {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
        overflow: hidden;
        background: linear-gradient( to bottom, transparent 80%, #f8f4f2 100% );
    }
    #future::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/top-future-bg.png) no-repeat top center / cover;
        opacity: 0.2;
        z-index: -1;
    }
    #future .future-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
    }
    #future .future-wrap h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0 2.0vw;
    }
    #future .future-wrap h2 span:nth-of-type(1) {
        font-size: 8.0vw;
        font-weight: 500;
    }
    #future .future-wrap h2 span:nth-of-type(2) {
        font-size: 4.0vw;
        font-weight: 700;
    }
    #future .future-flex {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4.0vw 0;
    }
    #future .future-flex .future-l {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #future .future-flex .future-l h3 {
        font-size: 4.8vw;
        font-weight: 700;
        line-height: 1.8;
    }
    #future .future-flex .future-r {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #future .future-flex .future-r p {
        margin: 0;
        font-size: 3.6vw;
        font-weight: 500;
        line-height: 1.7;
    }
    #future .future-flex .future-r p + p {
        margin-top: 1.0em;
    }
    #future .pic {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1210 / 439;
    }
    #future .pic img {
        margin: 0;
        width: 100%;
        height: 100%;
        object-position: 50% 30%;
        object-fit: cover;
        border-radius: 1.0vw;
    }

    #job {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
    }
    #job::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 64%;
        height: 64%;
        background: #f8f4f2;
        z-index: -1;
    }
    #job .job-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
    }
    #job .en-title {
        position: relative;
        margin: 0;
        padding: 48px 0 0;
        font-size: 8.0vw;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        text-align: left;
    }
    #job .en-title::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 35px;
        height: 38px;
        background: url(../images/icon-cube.svg) no-repeat center / contain;
        /*
        bottom: calc( 100% + 20px );
        left: 0;
        width: 26px;
        height: 11px;
        background: linear-gradient( to right, #91c1e9 11px, transparent 11px, transparent 15px, #ff9d00 15px );
        */
    }
    #job .ja-title {
        margin: 0;
        font-size: 2.8vw;
        font-weight: 700;
        line-height: 1.0;
        text-align: left;
    }
    #job .job-grid {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8.0vw 0;
    }
    #job .job-grid .job-item {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #job .job-grid .job-item .pic {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 913 / 823;
        border-radius: 1.0vw;
        overflow: hidden;
    }
    #job .job-grid .job-item .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(80%);
        transition: filter 0.3s ease-out, transform 0.3s ease-out;
    }
    #job .job-grid .job-item .pic figcaption {
        position: absolute;
        left: 5%;
        bottom: 5%;
        width: 90%;
        color: #fff;
        font-size: 4.0vw;
        font-weight: 500;
    }
    #job .job-grid .job-item .pic figcaption::after {
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        width: 1.2em;
        height: auto;
        aspect-ratio: 1 / 1;
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0;
        background: url(../images/icon-arrow.svg) no-repeat center / contain;
    }
    #job .job-grid .job-item h3 {
        margin: 0.8em 0 0;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
    }
    #job .job-grid .job-item p {
        margin: 1.0em 0 0;
        font-size: 3.2vw;
        font-weight: 400;
        text-align: left;
    }
    @media ( hover: hover ) {
        #job .job-grid .job-item:hover {
            opacity: 1.0;
        }
        #job .job-grid .job-item:hover .pic img {
            filter: brightness(100%);
            transform: scale( 1.1, 1.1 );
        }
    }

    #interview {
        margin: 0 auto;
        padding: 8.0vw 0;
        width: 100%;
        background: #fff;
    }
    #interview .interview-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
    }
    #interview .interview-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
    }
    #interview .interview-wrap .en-title {
        position: relative;
        margin: 0;
        padding: 48px 0 0;
        font-size: 8.0vw;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        text-align: left;
        gird-row: 1;
        grid-column: 1;
    }
    #interview .interview-wrap .en-title::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 35px;
        height: 38px;
        background: url(../images/icon-cube.svg) no-repeat center / contain;
        /*
        bottom: calc( 100% + 4.0vw );
        left: 0;
        width: 26px;
        height: 11px;
        background: linear-gradient( to right, #91c1e9 11px, transparent 11px, transparent 15px, #ff9d00 15px );
        */
    }
    #interview .interview-wrap .ja-title {
        margin: 0;
        font-size: 2.8vw;
        font-weight: 700;
        line-height: 1.0;
        text-align: left;
        gird-row: 2;
        grid-column: 1;
    }

    #interview-slider {
        position: relative;
        margin: 4.0vw auto 0;
        padding: 0;
        width: 100%;
        background: #fff;
        overflow: hidden;
    }
    #interview-slider > .swiper-wrapper {
    }
    #interview-slider > .swiper-wrapper > .swiper-slide {
        display: block;
        padding: 0 2.0vw;
        height: auto;
    }
    #interview-slider > .swiper-wrapper > .swiper-slide figure {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #interview-slider > .swiper-wrapper > .swiper-slide figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4.0vw;
    }
    #interview-slider > .swiper-wrapper > .swiper-slide .attrs {
        margin: 0.8em 0 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        color: #4e4e4e;
        font-size: 3.2vw;
        font-weight: 500;
    }
    #interview-slider .swiper-button-prev svg,
    #interview-slider .swiper-button-next svg {
        display: none;
    }
    #interview-slider .swiper-button-prev {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 100%;
        transition: background 0.5s ease-out;
    }
    #interview-slider .swiper-button-prev::before {
        position: absolute;
        content: "";
        top: calc( 30% - 2px );
        left: 35%;
        width: 40%;
        height: 40%;
        border-left: 4px solid #009;
        border-bottom: 4px solid #009;
        rotate: 45deg;
        transition: border 0.5s ease-out;
    }
    #interview-slider .swiper-button-prev::after {
        content: none;
    }
    #interview-slider .swiper-button-next {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 100%;
        transition: background 0.5s ease-out;
    }
    #interview-slider .swiper-button-next::before {
        position: absolute;
        content: "";
        top: calc( 30% - 2px );
        right: 35%;
        width: 40%;
        height: 40%;
        border-right: 4px solid #009;
        border-bottom: 4px solid #009;
        rotate: -45deg;
        transition: border 0.5s ease-out;
    }
    #interview-slider .swiper-button-next::after {
        content: none;
    }
    @media ( hover: hover ) {
        #interview-slider .swiper-button-prev:hover {
            background: #009;
        }
        #interview-slider .swiper-button-prev:hover::before {
            border-left: 4px solid #fff;
            border-bottom: 4px solid #fff;
        }
        #interview-slider .swiper-button-next:hover {
            background: #009;
        }
        #interview-slider .swiper-button-next:hover::before {
            border-right: 4px solid #fff;
            border-bottom: 4px solid #fff;
        }
    }

    #faq {
        margin: 0 auto;
        padding: 16.0vw 0 12.0vw;
        width: 100%;
    }
    #faq::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 64%;
        height: 64%;
        background: #f8f4f2;
        z-index: -1;
    }
    #faq .faq-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8.0vw 0;
    }
    #faq .faq-wrap .faq-l {
        display: none;
        margin: 0;
        padding: 0;
        width: 100%;
        order: 2;
    }
    #faq .faq-wrap .faq-r {
        margin: 0;
        padding: 0;
        width: 100%;
        order: 1;
    }
    #faq .en-title {
        position: relative;
        margin: 0;
        padding: 48px 0 0;
        font-size: 8.0vw;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        text-align: left;
    }
    #faq .en-title::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 35px;
        height: 38px;
        background: url(../images/icon-cube.svg) no-repeat center / contain;
        /*
        bottom: calc( 100% + 20px );
        left: 0;
        width: 26px;
        height: 11px;
        background: linear-gradient( to right, #91c1e9 11px, transparent 11px, transparent 15px, #ff9d00 15px );
        */
    }
    #faq .ja-title {
        margin: 0;
        font-size: 2.8vw;
        font-weight: 700;
        line-height: 1.0;
        text-align: left;
    }
    #faq .faq-wrap .faq-r .pic {
        margin: 4.0vw auto 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 606 / 404;
    }
    #faq .faq-wrap .faq-r .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1.0vw;
    }
    #faq .faq-r p {
        margin: 2.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
    }
    #faq .faq-r ul {
        margin: 8.0vw auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.0vw 0;
        list-style: none;
    }
    #faq .faq-r ul li {
        margin: 0;
        padding: 0;
        font-size: 3.6vw;
        font-weight: 700;
        text-align: left;
        list-style: none;
    }
    #faq .faq-r ul li::before {
        display: inline-block;
        content: "●";
        margin: 0 2.0em 0 0;
        padding: 0;
        color: #0a4685;
        font-size: 3.2vw;
    }
    #faq .faq-r .btn-common {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 8.0vw auto 0;
        padding: 0 1.5em;
        width: 80%;
        height: auto;
        aspect-ratio: 290 / 62;
        color: #fff;
        font-size: 4.0vw;
        font-weight: 500;
        background: #ff9d00;
        border-radius: 1.0vw;
    }
    #faq .faq-r .btn-common::after {
        content: "→";
    }

}


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

    #mv {
        margin: 0 auto;
        width: 100%;
    }
    #mv .mv-bg {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 2268 / 1200;
    }
    #mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-position: 50% 100%;
        object-fit: cover;
    }
    #mv .mv-box {
        position: absolute;
        bottom: 5vw;
        left: 5vw;
        margin: 0;
        padding: 0;
        width: 84%;
        height: auto;
    }
    #mv .mv-box .txt1 {
        margin: 0.3em 0;
        padding: 0 0.2em;
        width: max-content;
        color: #ff9d00;
        font-size: min(64px , 3.75vw);
        font-weight: 700;
        text-align: left;
        line-height: 1.6;
        background: #fff;
    }
    #mv .mv-box .txt2 {
        margin: 2.0em 0 0;
        padding: 0;
        max-width: 628px;
        color: #ff9d00;
        font-size: 18px;
        font-weight: 700;
        text-align: left;
        line-height: 1.7;
    }

    main {
        margin: 0 auto;
        width: 100%;
    }

    #news {
        margin: 0 auto;
        padding: 100px 0;
        width: 100%;
    }
    #news .news-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 1212px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    #news .news-left {
        margin: 0;
        padding: 0 20px 0 0;
        width: 30%;
        min-width: 300px;
    }
    #news .news-right {
        margin: 0;
        padding: 85px 0 0 0;
        width: 70%;
        max-width: cacl( 100% - 300px );
    }
    #news .news-left .en-title {
        position: relative;
        margin: 0;
        padding: 48px 0 0;
        font-size: 55px;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        text-align: left;
    }
    #news .news-left .en-title::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 35px;
        height: 38px;
        background: url(../images/icon-cube.svg) no-repeat center / contain;
        /*
        bottom: calc( 100% + 20px );
        left: 0;
        width: 26px;
        height: 11px;
        background: linear-gradient( to right, #91c1e9 11px, transparent 11px, transparent 15px, #ff9d00 15px );
        */
    }
    #news .news-left .ja-title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.0;
        text-align: left;
    }
    #news .news-left .news-sels {
        margin: 40px 0 0;
        padding: 0;
        width: max-content;
    }
    #news .news-left .news-sels label {
        display: block;
        margin: 0;
        padding: 20px 0 10px;
        color: #a1a1a1;
        font-size: 13px;
        font-weight: 700;
        line-height: calc( 20 / 13 );
        border-bottom: 1px solid #a1a1a1;
        transition: color 0.3s ease-out, border 0.3s ease-out;
    }
    #news .news-left .news-sels label:has(input[type="radio"]:checked) {
        color: #000;
        border-bottom: 1px solid #000;
    }
    #news .news-right .news-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 33px 0; 
        border-bottom: 1px solid #d4d4d4;
        gap: 0 10px;
    }
    #news .news-right .news-item:first-child {
        border-top: 1px solid #d4d4d4;
    }
    #news .news-right .news-item .date {
        margin: 0;
        padding: 0;
        width: 100px;
        color: #878787;
        font-size: 18px;
        font-weight: 400;
        font-family: 'Helvetica';
        line-height: calc( 20 / 18 );
        flex: 0 0 100px;
    }
    #news .news-right .news-item .cat {
        margin: 0 20px 0 0;
        padding: 0.3em 1.0em;
        width: max-content;
        color: #fda95a;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.0;
        white-space: nowrap;
        border: 1px solid #fda95a;
        flex: 0 0 auto;
    }
    #news .news-right .news-item .title {
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 30 / 18 );
        flex: 1 1 auto;
    }
    #news .news-left .btn-common {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 44px auto 0 0;
        padding: 0 1.5em;
        width: 290px;
        height: auto;
        aspect-ratio: 290 / 62;
        color: #ff9d00;
        font-size: 16px;
        font-weight: 500;
        background: #fff;
        border: 1px solid #ff9d00;
        border-radius: 5px;
        transition: color 0.3s ease-out, background 0.3s ease-out;
    }
    #news .news-left .btn-common::after {
        content: "→";
    }
    @media ( hover: hover ) {
        #news .news-left .btn-common:hover {
            opacity: 1.0;
            color: #fff;
            background: #ff9d00;
        }
    }

    #future {
        margin: 0 auto;
        padding: 70px 0;
        width: 100%;
        overflow: hidden;
        background: linear-gradient( to bottom, transparent 80%, #f8f4f2 100% );
    }
    #future::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/top-future-bg.png) no-repeat top center / cover;
        opacity: 0.2;
        z-index: -1;
    }
    #future .future-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 1212px;
    }
    #future .future-wrap h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0 20px;
    }
    #future .future-wrap h2 span:nth-of-type(1) {
        font-size: 64px;
        font-weight: 500;
    }
    #future .future-wrap h2 span:nth-of-type(2) {
        font-size: 36px;
        font-weight: 700;
    }
    #future .future-flex {
        margin: 70px auto 0;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    #future .future-flex .future-l {
        margin: 0;
        padding: 0;
        width: 38%;
    }
    #future .future-flex .future-l h3 {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.8;
    }
    #future .future-flex .future-r {
        margin: 0;
        padding: 0;
        width: 57%;
    }
    #future .future-flex .future-r p {
        margin: 0;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.7;
    }
    #future .future-flex .future-r p + p {
        margin-top: 1.0em;
    }
    #future .pic {
        margin: 58px auto 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1210 / 439;
    }
    #future .pic img {
        margin: 0;
        width: 100%;
        height: 100%;
        object-position: 50% 30%;
        object-fit: cover;
        border-radius: 8px;
    }

    #job {
        margin: 0 auto;
        padding: 100px 0 70px;
        width: 100%;
    }
    #job::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 64%;
        height: 64%;
        background: #f8f4f2;
        z-index: -1;
    }
    #job .job-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 1212px;
    }
    #job .en-title {
        position: relative;
        margin: 0;
        padding: 48px 0 0;
        font-size: 55px;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        text-align: left;
    }
    #job .en-title::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 35px;
        height: 38px;
        background: url(../images/icon-cube.svg) no-repeat center / contain;
        /*
        bottom: calc( 100% + 20px );
        left: 0;
        width: 26px;
        height: 11px;
        background: linear-gradient( to right, #91c1e9 11px, transparent 11px, transparent 15px, #ff9d00 15px );
        */
    }
    #job .ja-title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.0;
        text-align: left;
    }
    #job .job-grid {
        margin: 58px auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat( 3, 1fr );
        gap: 0 58px;
    }
    #job .job-grid .job-item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #job .job-grid .job-item .pic {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 913 / 823;
        border-radius: 8px;
        overflow: hidden;
    }
    #job .job-grid .job-item .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(80%);
        transition: filter 0.3s ease-out, transform 0.3s ease-out;
    }
    #job .job-grid .job-item .pic figcaption {
        position: absolute;
        left: 5%;
        bottom: 5%;
        width: 90%;
        color: #fff;
        font-size: 22px;
        font-weight: 500;
    }
    #job .job-grid .job-item .pic figcaption::after {
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        width: 1.2em;
        height: auto;
        aspect-ratio: 1 / 1;
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0;
        background: url(../images/icon-arrow.svg) no-repeat center / contain;
    }
    #job .job-grid .job-item h3 {
        margin: 0.8em 0 0;
        font-size: 17px;
        font-weight: 500;
        text-align: left;
    }
    #job .job-grid .job-item p {
        margin: 1.0em 0 0;
        font-size: 15px;
        font-weight: 400;
        text-align: left;
    }
    @media ( hover: hover ) {
        #job .job-grid .job-item:hover {
            opacity: 1.0;
        }
        #job .job-grid .job-item:hover .pic img {
            filter: brightness(100%);
            transform: scale( 1.1, 1.1 );
        }
    }

    #interview {
        margin: 0 auto;
        padding: 100px 0;
        width: 100%;
        background: #fff;
    }
    #interview .interview-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 1212px;
    }
    #interview .en-title {
        position: relative;
        margin: 0;
        padding: 48px 0 0;
        font-size: 55px;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        text-align: left;
    }
    #interview .en-title::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 35px;
        height: 38px;
        background: url(../images/icon-cube.svg) no-repeat center / contain;
        /*
        bottom: calc( 100% + 20px );
        left: 0;
        width: 26px;
        height: 11px;
        background: linear-gradient( to right, #91c1e9 11px, transparent 11px, transparent 15px, #ff9d00 15px );
        */
    }
    #interview .ja-title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.0;
        text-align: left;
    }

    #interview-slider {
        position: relative;
        margin: 40px auto 0;
        padding: 0;
        width: 100%;
        background: #fff;
        overflow: hidden;
    }
    #interview-slider > .swiper-wrapper {
    }
    #interview-slider > .swiper-wrapper > .swiper-slide {
        display: block;
        padding: 0 15px;
        height: auto;
    }
    #interview-slider > .swiper-wrapper > .swiper-slide figure {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 20px;
        overflow: hidden;
    }
    #interview-slider > .swiper-wrapper > .swiper-slide figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease-out;
    }
    #interview-slider > .swiper-wrapper > .swiper-slide .attrs {
        margin: 0.8em 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #4e4e4e;
        font-size: 16px;
        font-weight: 500;
    }

    @media ( hover: hover ) {
        #interview-slider > .swiper-wrapper > .swiper-slide:hover {
            opacity: 1.0;
        }
        #interview-slider > .swiper-wrapper > .swiper-slide:hover img {
            transform: scale( 1.1, 1.1 );
        }
    }
    #interview-slider .swiper-button-prev svg,
    #interview-slider .swiper-button-next svg {
        display: none;
    }
    #interview-slider .swiper-button-prev {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 100%;
        transition: background 0.5s ease-out;
    }
    #interview-slider .swiper-button-prev::before {
        position: absolute;
        content: "";
        top: calc( 30% - 2px );
        left: 35%;
        width: 40%;
        height: 40%;
        border-left: 4px solid #009;
        border-bottom: 4px solid #009;
        rotate: 45deg;
        transition: border 0.5s ease-out;
    }
    #interview-slider .swiper-button-prev::after {
        content: none;
    }
    #interview-slider .swiper-button-next {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 100%;
        transition: background 0.5s ease-out;
    }
    #interview-slider .swiper-button-next::before {
        position: absolute;
        content: "";
        top: calc( 30% - 2px );
        right: 35%;
        width: 40%;
        height: 40%;
        border-right: 4px solid #009;
        border-bottom: 4px solid #009;
        rotate: -45deg;
        transition: border 0.5s ease-out;
    }
    #interview-slider .swiper-button-next::after {
        content: none;
    }
    @media ( hover: hover ) {
        #interview-slider .swiper-button-prev:hover {
            background: #009;
        }
        #interview-slider .swiper-button-prev:hover::before {
            border-left: 4px solid #fff;
            border-bottom: 4px solid #fff;
        }
        #interview-slider .swiper-button-next:hover {
            background: #009;
        }
        #interview-slider .swiper-button-next:hover::before {
            border-right: 4px solid #fff;
            border-bottom: 4px solid #fff;
        }
    }

    #faq {
        margin: 0 auto;
        padding: 100px 0 70px;
        width: 100%;
    }
    #faq::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 64%;
        height: 64%;
        background: #f8f4f2;
        z-index: -1;
    }
    #faq .faq-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 1212px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    #faq .faq-wrap .faq-l {
        margin: 0;
        padding: 0;
        width: 50%;
    }
    #faq .faq-wrap .faq-l .pic {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 606 / 404;
    }
    #faq .faq-wrap .faq-l .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    #faq .faq-wrap .faq-r {
        margin: 0;
        padding: 0;
        width: 45%;
    }
    #faq .en-title {
        position: relative;
        margin: 0;
        padding: 48px 0 0;
        font-size: 55px;
        font-weight: 600;
        font-family: var(--font-alphabet);
        line-height: 1.0;
        text-align: left;
    }
    #faq .en-title::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 35px;
        height: 38px;
        background: url(../images/icon-cube.svg) no-repeat center / contain;
        /*
        bottom: calc( 100% + 20px );
        left: 0;
        width: 26px;
        height: 11px;
        background: linear-gradient( to right, #91c1e9 11px, transparent 11px, transparent 15px, #ff9d00 15px );
        */
    }
    #faq .ja-title {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.0;
        text-align: left;
    }
    #faq .faq-r p {
        margin: 2.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
    }
    #faq .faq-r ul {
        margin: 72px auto 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 0;
        list-style: none;
    }
    #faq .faq-r ul li {
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: 700;
        text-align: left;
        list-style: none;
    }
    #faq .faq-r ul li::before {
        display: inline-block;
        content: "●";
        margin: 0 2.0em 0 0;
        padding: 0;
        color: #0a4685;
        font-size: 15px;
    }
    #faq .faq-r .btn-common {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 44px auto 0 0;
        padding: 0 1.5em;
        width: 290px;
        height: auto;
        aspect-ratio: 290 / 62;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        background: #ff9d00;
        border: 1px solid #ff9d00;
        border-radius: 5px;
        transition: color 0.3s ease-out, background 0.3s ease-out;
    }
    #faq .faq-r .btn-common::after {
        content: "→";
    }
    @media ( hover: hover ) {
        #faq .faq-r .btn-common:hover {
            opacity: 1.0;
            color: #ff9d00;
            background: #fff;
        }
    }

}