@charset "utf-8";


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

    #mv > .mv-bg {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        /* aspect-ratio: 1651 / 937; */
    }
    #mv > .mv-bg iframe {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #mv > .mv-bg video {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv > .mv-box {
        position: absolute;
        bottom: calc( 25% + 1.0rem );
        left: 10%;
        margin: 0;
        padding: 0;
        width: 80%;
        color: #fff;
        font-weight: 700;
        line-height: 1.2;
        text-shadow:
            0 0 4px #000,
            0 0 4px #000,
            0 0 4px #000,
            0 0 4px #000;
    }
    #mv > .mv-box span:nth-of-type(1) {
        display: block;
        font-size: 6.4vw;
        font-family: var(--font-alphabet);
    }
    #mv > .mv-box span:nth-of-type(2) {
        display: block;
        font-size: 6.4vw;
        font-family: Helvetica, sans-serif;
    }
    #mv > .mv-box span:nth-of-type(3) {
        margin-top: 0.5em;
        display: block;
        font-size: 3.2vw;
    }

    #ws-slider {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        overflow: hidden;
    }
    #ws-slider .ws-slider-wrap {
        margin: 0;
        padding: 0;
        width: 4320px;
        height: 40px;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0 10px;
        animation: ws-slider 40000ms linear 0s infinite;
    }
    #ws-slider .ws-slider-wrap .ws-slide {
        margin: 0;
        padding: 0;
        width: auto;
        height: 40px;
        flex: 0 0 auto;
    }
    #ws-slider .ws-slider-wrap .ws-slide figure {
        width: auto;
        height: 40px;
    }
    #ws-slider .ws-slider-wrap .ws-slide img {
        width: auto;
        height: 100%;
        object-fit: contain;
    }
    @keyframes ws-slider {
        0%   { transform: translateX( 0 ); }
        100% { transform: translateX( -2084px ); }
    }

    .mv-slider-wrap {
        margin: 0 auto;
        padding: 1% 0;
        width: 100%;
        height: auto;
        background: #fff;
    }
    .mv-slider-wrap #mv-slider {
        padding: 1% 0;
        overflow: hidden;
    }
    .mv-slider-wrap #mv-slider .swiper-wrapper {
        display: flex;
        transition-timing-function: linear;
    }
    .mv-slider-wrap #mv-slider .swiper-wrapper .swiper-slide {
        flex-shrink: 0;
        width: auto;
        height: 5.0vw;
    }
    .mv-slider-wrap #mv-slider .swiper-wrapper .swiper-slide figure {
        width: auto;
        height: 5.0vw;
    }
    .mv-slider-wrap #mv-slider .swiper-wrapper .swiper-slide figure img {
        width: auto;
        height: 5.0vw;
        object-fit: contain;
    }

    #mvbtm {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 960 / 309;
        background: url(../images/top-mvbtm-bg.webp) repeat left top / 50% auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #mvbtm > .mvbtm-logo {
        margin: 0 auto;
        padding: 0;
        width: 25%;
        height: auto;
        aspect-ratio: 344 / 58;
    }
    #mvbtm > .mvbtm-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #mvbtm > h2 {
        position: relative;
        margin: 0.5em auto 0;
        padding: 0;
        width: 100%;
        font-size: 4.8vw;
        font-weight: 700;
        text-align: center;
    }
    #mvbtm > h2::after {
        position: absolute;
        content: "";
        left: calc( 50% - 6.0vw );
        top: calc( 100% + 0.5em );
        width: 12.0vw;
        height: 3px;
        background: #2e3b82;
    }

    #about {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    #about > .pic {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
    }
    #about > .pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #about > .pic::after {
        position: absolute;
        content: "";
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba( 0, 0, 0, 0.2 );
    }
    #about > .txt {
        position: absolute;
        left: 7%;
        top: 50%;
        width: 80%;
        color: #fff;
        translate: 0 -50%;
    }
    #about > .txt h2 {
        position: absolute;
        left: -0.7em;
        top: -0.4em;
        color: rgba( 255, 255, 255, 0.2 );
        font-size: 10.0vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
    }
    #about > .txt h3 {
        margin: 0;
        font-size: 6.0vw;
        font-weight: 700;
        text-align: left;
        line-height: calc( 70 / 48 );
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
    }
    #about > .txt p {
        margin: 1.5em 0 0;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
        line-height: calc( 28 / 16 );
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
    }
    #about > .txt a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 0.5em;
        margin: 1.5em 0 0;
        padding: 0.5em 1.5em;
        width: max-content;
        color: var(--color-theme);
        font-size: 3.2vw;
        font-weight: 500;
        text-align: center;
        line-height: 1.0;
        background: #fff;
        border: 1px solid var(--color-theme);
    }
    #about > .txt a::after {
        display: block;
        content: "";
        width: 2.2em;
        height: auto;
        aspect-ratio: 30 / 4;
        background: url(../images/arrow-r.svg) no-repeat center / contain;
    }

    #service {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    #service > .service-head {
        margin: 0 auto;
        padding: 5.0vw 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 277;
        background: url(../images/top-section-bg.webp) no-repeat 50% 10% / 100% auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px 0;
    }
    .service-head > h2 {
        color: var(--color-theme);
        font-size: 10.0vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        line-height: 1.0;
    }
    .service-head > h2 span {
        color: #1cb6f1;
    }
    .service-head > h3 {
        color: var(--color-theme);
        font-size: 3.6vw;
        font-weight: 700;
        line-height: 1.0;
    }
    #service > .service-items {
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
    }
    .service-items > .service-item {
        position: relative;
        display: block;
        margin: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 712 / 445;
        cursor: pointer;
    }
    .service-items > .service-item figure {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .service-items > .service-item figure::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba( 0, 0, 0, 0.4 );
        transition: background 0.25s ease-out;
    }
    .service-items > .service-item figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.25s ease-out;
    }
    .service-items > .service-item:nth-child(1) figure img {
        transform: scale( 1.5, 1.5 ) translate( 15%, -15% );
    }
    @media ( hover: hover ) {
        .service-items > .service-item:hover figure::after {
            background: rgba( 0, 0, 0, 0.1 );
        }
        .service-items > .service-item:hover figure img {
            transform: scale( 1.1, 1.1 );
        }
        .service-items > .service-item:nth-child(1):hover figure img {
            transform: scale( 1.65, 1.65 ) translate( 15%, -15% );
        }
    }
    .service-items > .service-item h4 {
        position: absolute;
        bottom: calc( 10% + 6.0vw );
        left: 8%;
        color: #fff;
        font-size: 4.8vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-shadow:
            0 0 3px #000,
            0 0 3px #000,
            0 0 3px #000,
            0 0 3px #000;
    }
    .service-items > .service-item p {
        position: absolute;
        bottom: 10%;
        left: 8%;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 500;
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
    }
    .service-items > .service-item div {
        position: absolute;
        display: block;
        padding: 0.5em 1.5em;
        width: max-content;
        bottom: 10%;
        right: 8%;
        color: #fff;
        font-size: 3.2vw;
        font-weight: 500;
        line-height: 1.0;
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
        border: 1px solid #fff;
        box-shadow: 0 0 3px #000;
    }

    #solution {
        margin: 0 auto;
        padding: 16.0vw 0 8.0vw 25.0vw;
        width: 100%;
        height: auto;
    }
    #solution::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/top-section-bg.webp) no-repeat center / cover;
        opacity: 0.3;
        z-index: -1;
    }
    #solution > h2 {
        position: absolute;
        top: 0;
        left: 0;
        color: var(--color-theme);
        font-size: 16.0vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        line-height: 1.0;
        transform-origin: left bottom;
        transform: rotate( 90deg ) translate( -0.8em, 0 );
    }
    #solution > h2 span {
        color: #1cb6f1;
    }
    #solution > h3 {
        margin: 0.5em 0 0;
        font-size: 3.6vw;
        font-weight: 700;
        text-align: left;
    }
    #solution > .solution-grid {
        margin: 1.0vw 0 0;
        width: 100%;;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.0vw;
    }
    .solution-grid > .solution-item {
        position: relative;
        display: block;
        margin: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 603 / 378;
        cursor: pointer;
    }
    .solution-grid > .solution-item figure {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .solution-grid > .solution-item figure::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba( 0, 0, 0, 0.4 );
        transition: background 0.25s ease-out;
    }
    .solution-grid > .solution-item figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.25s ease-out;
    }
    @media ( hover: hover ) {
        .solution-grid > .solution-item:hover figure::after {
            background: rgba( 0, 0, 0, 0.1 );
        }
        .solution-grid > .solution-item:hover figure img {
            transform: scale( 1.1, 1.1 );
        }
    }
    .solution-grid > .solution-item h4 {
        position: absolute;
        bottom: 52%;
        left: 0%;
        width: 100%;
        color: #fff;
        font-size: 4.8vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: center;
        text-shadow:
            0 0 3px #000,
            0 0 3px #000,
            0 0 3px #000,
            0 0 3px #000;
    }
    .solution-grid > .solution-item p {
        position: absolute;
        top: 52%;
        left: 0%;
        width: 100%;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
    }
    .solution-grid > .solution-item div {
        position: absolute;
        display: block;
        padding: 0.5em 1.5em;
        width: max-content;
        top: calc( 52% + 10.0vw );
        left: 50%;
        color: #fff;
        font-size: 3.2vw;
        font-weight: 500;
        line-height: 1.0;
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
        border: 1px solid #fff;
        box-shadow: 0 0 3px #000;
        translate: -50% 0;
    }

    #recruit {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
    #recruit::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/top-section-bg.webp) no-repeat center / cover;
        opacity: 0.3;
        z-index: -1;
    }
    #recruit > .pic1 {
        position: absolute;
        left: -40%;
        bottom: 1%;
        width: auto;
        height: 85%;
        aspect-ratio: 3840 / 2160;
        clip-path: polygon( 20% 0, 60% 0, 80% 100%, 40% 100% );
        overflow: hidden;
        z-index: 2;
    }
    #recruit > .pic1::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        background: linear-gradient( to bottom, #00bff9, #e30000 );
    }
    #recruit > .pic1 img {
        width: auto;
        height: 100%;
    }
    #recruit > .pic2 {
        position: absolute;
        left: -12%;
        bottom: 0;
        width: auto;
        height: 100%;
        aspect-ratio: 4096 / 2731;
        z-index: 1;
        clip-path: polygon( 17% 0, 60% 0, 80% 100%, 37% 100% );
        overflow: hidden;
    }
    #recruit > .pic2 img {
        width: auto;
        height: 100%;
        filter: grayscale(100%);
        opacity: 0.3;
    }
    #recruit > .recruit-box {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        translate: 0 -50%;
        z-index: 3;
    }
    .recruit-box h2 {
        color: var(--color-theme);
        font-size: 10.0vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        line-height: 1.0;
        text-align: center;
        text-shadow:
            0 0 0.5vw #fff,
            0 0 0.5vw #fff,
            0 0 0.5vw #fff,
            0 0 0.5vw #fff;
    }
    .recruit-box h2 span {
        color: #1cb6f1;
    }
    .recruit-box h3 {
        font-size: 3.6vw;
        font-weight: 700;
        text-align: center;
        text-shadow:
            0 0 0.2vw #fff,
            0 0 0.2vw #fff,
            0 0 0.2vw #fff,
            0 0 0.2vw #fff;
    }
    .recruit-box .txt1 {
        margin: 4.0vw auto 0;
        padding: 0;
        width: 90%;
        font-size: 4.8vw;
        font-weight: 700;
        text-align: center;
        line-height: 1.0;
        text-shadow:
            0 0 0.3vw #fff,
            0 0 0.3vw #fff,
            0 0 0.3vw #fff,
            0 0 0.3vw #fff;
    }
    .recruit-box .txt2 {
        margin: 4.0vw auto 0;
        padding: 0;
        width: 80%;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
        line-height: calc( 40 / 18 );
        text-shadow:
            0 0 0.2vw #fff,
            0 0 0.2vw #fff,
            0 0 0.2vw #fff,
            0 0 0.2vw #fff;
    }
    .recruit-box a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 0.5em;

        margin: 4.0vw auto 0;
        padding: 0.5em 1.5em;
        width: max-content;

        color: var(--color-theme);
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
        line-height: 1.0;
        background: #fff;
        border: 1px solid var(--color-theme);
    }
    .recruit-box a::after {
        display: block;
        content: "";
        width: 2.2em;
        height: auto;
        aspect-ratio: 30 / 4;
        background: url(../images/arrow-r.svg) no-repeat center / contain;
    }

    #news {
        margin: 0 auto;
        padding: 10.0vw 5.0vw;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4.0vw 0;
    }
    #news::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/top-section-bg.webp) no-repeat center / cover;
        opacity: 0.3;
        z-index: -1;
    }
    #news > .news-head {
        width: 100%;
    }
    .news-head h2 {
        color: var(--color-theme);
        font-size: 10.0vw;
        font-family: var(--font-alphabet);
        font-weight: 700;
        line-height: 1.0;
        text-align: center;
    }
    .news-head h2 span {
        color: #1cb6f1;
    }
    .news-head h3 {
        margin: 0.5em 0 0;
        font-size: 3.6vw;
        font-weight: 700;
        text-align: center;
    }
    .news-head p {
        margin: 2.0em auto 0;
        width: 72%;
        font-size: 3.2vw;
        font-weight: 500;
        text-align: center;
        line-height: 1.0;
    }
    #news > .news-list {
        width: 100%;
    }
    .news-list .news-item {
        width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }
    .news-list .news-item + .news-item {
        margin-top: 26px;
    }
    .news-list .news-item .news-pic {
        width: 30%;
        height: auto;
        aspect-ratio: 198 / 120;
    }
    .news-list .news-item .news-pic:empty {
        background: #f8f8f8;
    }
    .news-list .news-item .news-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .news-list .news-item .news-info {
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2.0vw 0;
    }
    .news-list .news-item .news-info .news-date {
        font-size: 2.8vw;
        font-weight: 300;
        line-height: 1.0;
    }
    .news-list .news-item .news-info .news-title {
        display: block;
        font-size: 3.2vw;
        font-weight: 600;
        line-height: 1.3;
    }
    .news-list .news-item .news-info .news-cat {
        margin: 0;
        padding: 0.5em 1.5em;
        color: #fff;
        font-size: 2.8vw;
        font-weight: 400;
        line-height: 1.0;
        background: var(--color-theme);
    }

}


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

    #mv > .mv-bg {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        /* aspect-ratio: 1651 / 937; */
    }
    #mv > .mv-bg iframe {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #mv > .mv-bg video {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv > .mv-box {
        position: absolute;
        bottom: calc( 25% + 1.0rem );
        left: 8%;
        margin: 0;
        padding: 0;
        width: 80%;
        color: #fff;
        font-weight: 700;
        line-height: 1.2;
        text-shadow:
            0 0 4px #000,
            0 0 4px #000,
            0 0 4px #000,
            0 0 4px #000;
    }
    #mv > .mv-box span:nth-of-type(1) {
        display: block;
        font-size: 4.8vw;
        font-family: Helvetica, sans-serif;
    }
    #mv > .mv-box span:nth-of-type(2) {
        display: block;
        font-size: 4.8vw;
        font-family: Helvetica, sans-serif;
    }
    #mv > .mv-box span:nth-of-type(3) {
        margin-top: 0.5em;
        display: block;
        font-size: 2.4vw;
    }

    #ws-slider {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        overflow: hidden;
    }
    #ws-slider .ws-slider-wrap {
        margin: 0;
        padding: 0;
        width: 6440px;
        height: 60px;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0 20px;
        animation: ws-slider 50000ms linear 0s infinite;
    }
    #ws-slider .ws-slider-wrap .ws-slide {
        margin: 0;
        padding: 0;
        width: auto;
        height: 60px;
        flex: 0 0 auto;
    }
    #ws-slider .ws-slider-wrap .ws-slide figure {
        width: auto;
        height: 60px;
    }
    #ws-slider .ws-slider-wrap .ws-slide img {
        width: auto;
        height: 100%;
        object-fit: contain;
    }
    @keyframes ws-slider {
        0%   { transform: translateX( 0 ); }
        100% { transform: translateX( -3186px ); }
    }

    .mv-slider-wrap {
        margin: 0 auto;
        padding: 1% 0;
        width: 100%;
        height: auto;
        background: #fff;
    }
    .mv-slider-wrap #mv-slider {
        padding: 1% 0;
        overflow: hidden;
    }
    .mv-slider-wrap #mv-slider .swiper-wrapper {
        display: flex;
        transition-timing-function: linear;
    }
    .mv-slider-wrap #mv-slider .swiper-wrapper .swiper-slide {
        flex-shrink: 0;
        width: auto;
        height: 60px;
    }
    .mv-slider-wrap #mv-slider .swiper-wrapper .swiper-slide figure {
        width: auto;
        height: 60px;
    }
    .mv-slider-wrap #mv-slider .swiper-wrapper .swiper-slide figure img {
        width: auto;
        height: 60px;
        object-fit: contain;
    }

    #mvbtm {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 309;
        background: url(../images/top-mvbtm-bg.webp) repeat left top / 33.3% auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #mvbtm > .mvbtm-logo {
        margin: 0 auto;
        padding: 0;
        width: 25%;
        height: auto;
        aspect-ratio: 344 / 58;
    }
    #mvbtm > .mvbtm-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #mvbtm > h2 {
        position: relative;
        margin: 0.5em auto 0;
        padding: 0;
        width: 100%;
        font-size: 3.0vw;
        font-weight: 700;
        text-align: center;
    }
    #mvbtm > h2::after {
        position: absolute;
        content: "";
        left: calc( 50% - 60px );
        top: calc( 100% + 0.5em );
        width: 120px;
        height: 3px;
        background: #2e3b82;
    }

    #about {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    #about > .pic {
        position: relative;
    }
    #about > .pic::after {
        position: absolute;
        content: "";
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba( 0, 0, 0, 0.2 );
    }
    #about > .txt {
        position: absolute;
        left: 7%;
        top: 50%;
        width: 80%;
        color: #fff;
        translate: 0 -50%;
    }
    #about > .txt h2 {
        position: absolute;
        left: -0.7em;
        top: -0.4em;
        color: rgba( 255, 255, 255, 0.2 );
        font-size: 100px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
    }
    #about > .txt h3 {
        margin: 0;
        font-size: min( 48px, 4.8vw );
        font-weight: 700;
        text-align: left;
        line-height: calc( 70 / 48 );
    }
    #about > .txt p {
        margin: 1.5em 0 0;
        width: 50%;
        font-size: min( 16px, 1.6vw );
        font-weight: 500;
        text-align: left;
        line-height: calc( 28 / 16 );
    }
    #about > .txt a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 0.5em;
        margin: 1.5em 0 0;
        padding: 0.5em 1.5em;
        width: max-content;
        color: var(--color-theme);
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 1.0;
        background: #fff;
        border: 1px solid var(--color-theme);
    }
    #about > .txt a::after {
        display: block;
        content: "";
        width: 2.2em;
        height: auto;
        aspect-ratio: 30 / 4;
        background: url(../images/arrow-r.svg) no-repeat center / contain;
    }

    #service {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }
    #service > .service-head {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 277;
        background: url(../images/top-section-bg.webp) no-repeat 50% 10% / 100% auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px 0;
    }
    .service-head > h2 {
        color: var(--color-theme);
        font-size: 128px;
        font-family: var(--font-alphabet);
        font-weight: 700;
        line-height: 1.0;
    }
    .service-head > h2 span {
        color: #1cb6f1;
    }
    .service-head > h3 {
        color: var(--color-theme);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.0;
    }
    #service > .service-items {
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
    }
    .service-items > .service-item {
        position: relative;
        display: block;
        margin: 0;
        cursor: pointer;
    }
    .service-items > .service-item:nth-child(1),
    .service-items > .service-item:nth-child(2) {
        width: 50%;
        height: auto;
        aspect-ratio: 712 / 445;
    }
    .service-items > .service-item:nth-child(3),
    .service-items > .service-item:nth-child(4),
    .service-items > .service-item:nth-child(5) {
        width: calc( 100% / 3 );
        height: auto;
        aspect-ratio: 480 / 445;
    }
    .service-items > .service-item figure {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .service-items > .service-item figure::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba( 0, 0, 0, 0.4 );
        transition: background 0.25s ease-out;
    }
    .service-items > .service-item figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.25s ease-out;
    }
    .service-items > .service-item:nth-child(1) figure img {
        transform: scale( 1.5, 1.5 ) translate( 15%, -15% );
    }
    @media ( hover: hover ) {
        .service-items > .service-item:hover figure::after {
            background: rgba( 0, 0, 0, 0.1 );
        }
        .service-items > .service-item:hover figure img {
            transform: scale( 1.1, 1.1 );
        }
        .service-items > .service-item:nth-child(1):hover figure img {
            transform: scale( 1.65, 1.65 ) translate( 15%, -15% );
        }
    }
    .service-items > .service-item h4 {
        position: absolute;
        bottom: calc( 10% + 40px );
        left: 8%;
        color: #fff;
        font-size: 32px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-shadow:
            0 0 3px #000,
            0 0 3px #000,
            0 0 3px #000,
            0 0 3px #000;
    }
    .service-items > .service-item p {
        position: absolute;
        bottom: 10%;
        left: 8%;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
    }
    .service-items > .service-item div {
        position: absolute;
        display: block;
        padding: 0.5em 1.5em;
        width: max-content;
        bottom: 10%;
        right: 8%;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.0;
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
        border: 1px solid #fff;
        box-shadow: 0 0 3px #000;
    }

    #solution {
        margin: 0 auto;
        padding: 120px 0 80px 240px;
        width: 100%;
        height: auto;
        min-height: 700px;
    }
    #solution::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/top-section-bg.webp) no-repeat center / cover;
        opacity: 0.3;
        z-index: -1;
    }
    #solution > h2 {
        position: absolute;
        top: 0;
        left: 0;
        color: var(--color-theme);
        font-size: 128px;
        font-family: var(--font-alphabet);
        font-weight: 700;
        line-height: 1.0;
        transform-origin: left bottom;
        transform: rotate( 90deg ) translate( -0.8em, 0 );
    }
    #solution > h2 span {
        color: #1cb6f1;
    }
    #solution > h3 {
        margin: 0.5em 0 0;
        font-size: 20px;
        font-weight: 700;
        text-align: left;
    }
    #solution > .solution-grid {
        margin: 10px 0 0;
        width: 100%;;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .solution-grid > .solution-item {
        position: relative;
        display: block;
        margin: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 603 / 378;
        cursor: pointer;
    }
    .solution-grid > .solution-item figure {
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .solution-grid > .solution-item figure::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba( 0, 0, 0, 0.4 );
        transition: background 0.25s ease-out;
    }
    .solution-grid > .solution-item figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.25s ease-out;
    }
    @media ( hover: hover ) {
        .solution-grid > .solution-item:hover figure::after {
            background: rgba( 0, 0, 0, 0.1 );
        }
        .solution-grid > .solution-item:hover figure img {
            transform: scale( 1.1, 1.1 );
        }
    }
    .solution-grid > .solution-item h4 {
        position: absolute;
        bottom: 52%;
        left: 0%;
        width: 100%;
        color: #fff;
        font-size: 32px;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: center;
        text-shadow:
            0 0 3px #000,
            0 0 3px #000,
            0 0 3px #000,
            0 0 3px #000;
    }
    .solution-grid > .solution-item p {
        position: absolute;
        top: 52%;
        left: 0%;
        width: 100%;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
    }
    .solution-grid > .solution-item div {
        position: absolute;
        display: block;
        padding: 0.5em 1.5em;
        width: max-content;
        top: calc( 52% + 60px );
        left: 50%;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.0;
        text-shadow:
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000,
            0 0 2px #000;
        border: 1px solid #fff;
        box-shadow: 0 0 3px #000;
        translate: -50% 0;
    }

    #recruit {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 850;
        overflow: hidden;
    }
    #recruit::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/top-section-bg.webp) no-repeat center / cover;
        opacity: 0.3;
        z-index: -1;
    }
    #recruit > .pic1 {
        position: absolute;
        left: -18%;
        bottom: 1%;
        width: auto;
        height: 85%;
        clip-path: polygon( 20% 0, 60% 0, 80% 100%, 40% 100% );
        overflow: hidden;
        z-index: 2;
    }
    #recruit > .pic1::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        background: linear-gradient( to bottom, #00bff9, #e30000 );
    }
    #recruit > .pic1 img {
        width: auto;
        height: 100%;
    }
    #recruit > .pic2 {
        position: absolute;
        left: 0;
        bottom: 0;
        width: auto;
        height: 100%;
        z-index: 1;
        clip-path: polygon( 17% 0, 60% 0, 80% 100%, 37% 100% );
        overflow: hidden;
    }
    #recruit > .pic2 img {
        width: auto;
        height: 100%;
        filter: grayscale(100%);
        opacity: 0.3;
    }
    #recruit > .recruit-box {
        position: absolute;
        top: 50%;
        right: 1%;
        width: 100%;
        translate: 0 -50%;
        z-index: 3;
    }
    .recruit-box h2 {
        color: var(--color-theme);
        font-size: 128px;
        font-family: var(--font-alphabet);
        font-weight: 700;
        line-height: 1.0;
        text-align: right;
    }
    .recruit-box h2 span {
        color: #1cb6f1;
    }
    .recruit-box h3 {
        margin-right: 436px;
        font-size: 20px;
        font-weight: 700;
        text-align: right;
    }
    .recruit-box .txt1 {
        margin: 80px 0 0 auto;
        padding: 0;
        width: 50%;
        font-size: 36px;
        font-weight: 700;
        text-align: left;
        line-height: 1.0;
    }
    .recruit-box .txt2 {
        margin: 80px 0 0 auto;
        padding: 0 100px 0 0;
        width: 50%;
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        line-height: calc( 40 / 18 );
    }
    .recruit-box a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 0.5em;

        margin: 40px 100px 0 auto;
        padding: 0.5em 1.5em;
        width: max-content;

        color: var(--color-theme);
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 1.0;
        background: #fff;
        border: 1px solid var(--color-theme);
    }
    .recruit-box a::after {
        display: block;
        content: "";
        width: 2.2em;
        height: auto;
        aspect-ratio: 30 / 4;
        background: url(../images/arrow-r.svg) no-repeat center / contain;
    }

    #news {
        margin: 0 auto;
        padding: 100px 5%;
        width: 100%;
        height: auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    #news::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/top-section-bg.webp) no-repeat center / cover;
        opacity: 0.3;
        z-index: -1;
    }
    #news > .news-head {
        width: 400px;
    }
    .news-head h2 {
        color: var(--color-theme);
        font-size: 80px;
        font-family: var(--font-alphabet);
        font-weight: 700;
        line-height: 1.0;
        text-align: left;
    }
    .news-head h2 span {
        color: #1cb6f1;
    }
    .news-head h3 {
        margin: 0.5em 0 0;
        font-size: 20px;
        font-weight: 700;
        text-align: left;
    }
    .news-head p {
        margin: 2.0em 0 0;
        width: 70%;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
        line-height: 1.0;
    }
    #news > .news-list {
        width: calc( 100% - 400px );
    }
    .news-list .news-item {
        width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }
    .news-list .news-item + .news-item {
        margin-top: 26px;
    }
    .news-list .news-item .news-pic {
        width: 30%;
        height: auto;
        aspect-ratio: 198 / 120;
    }
    .news-list .news-item .news-pic:empty {
        background: #f8f8f8;
    }
    .news-list .news-item .news-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .news-list .news-item .news-info {
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
    }
    .news-list .news-item .news-info .news-date {
        font-size: 14px;
        font-weight: 300;
        line-height: 1.0;
    }
    .news-list .news-item .news-info .news-title {
        display: block;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
    }
    .news-list .news-item .news-info .news-cat {
        margin: 0;
        padding: 0.5em 1.5em;
        color: #fff;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.0;
        background: var(--color-theme);
    }

}


/**
 * 最大設定
 */
@media ( width >= 1200px ) {
}