@charset "utf-8";

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

    #mv {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: calc( 100dvh - 72px );
        height: calc( 100vh - 72px );
        background: var(--color-theme);
    }

    #mv .ws-slide {
        position: absolute;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #mv .ws-slide .ws-pic-l {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0 auto;
        padding: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }
    #mv .ws-slide .ws-pic-r {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 auto;
        padding: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }
    #mv .ws-slide img {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        transition: transform 1.0s ease-in-out;
    }
    #mv .ws-slide .ws-pic-l img {
        transform: translateX( -100% );
    }
    #mv .ws-slide .ws-pic-r img {
        transform: translateX( +100% );
    }
    #mv .ws-slide.active .ws-pic-l img {
        z-index: 3;
        transform: translateX( 0 );
    }
    #mv .ws-slide.active .ws-pic-r img {
        z-index: 3;
        transform: translateX( 0 );
    }
    #mv .ws-slide.stay .ws-pic-l img {
        z-index: 2;
        transform: translateX( 0 );
    }
    #mv .ws-slide.stay .ws-pic-r img {
        z-index: 2;
        transform: translateX( 0 );
    }

    #mv #mv-main-txt {
        position: absolute;
        bottom: 15%;
        left: 50%;
        translate: -50% 0;
        width: 80.0%;
        height: auto;
        overflow: hidden;
        z-index: 10;
    }
    #mv #mv-main-txt img {
        width: 100%;
        height: auto;
        transform: translateY( -100% );
        transition: transform 0.5s ease-out;
    }
    #mv #mv-main-txt.active img {
        transform: translateY( 0 );
    }

    #mv-txt-box-wrap {
        position: absolute;
        bottom: 5%;
        left: 50%;
        translate: -50% 0;
        margin: 0;
        padding: 0;
        width: calc( 10.0em + 10.0em + 3.0em );
        height: 2.4em;
        color: #fff;
        font-size: 3.2vw;
        opacity: 0.0;
        z-index: 20;
        transition: opacity 1.0s ease-out 1.0s;
    }
    #mv-txt-box-wrap.active {
        opacity: 1.0;
    }

    .mv-txt-box {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 10.0em;
        height: 2.4em;
        color: #fff;
        font-size: 3.2vw;
        background: rgba( 255, 255, 255, 0.05 );
        box-shadow: 0 0 1.0em rgba( 0, 0, 0, 0.2 );
        -webkit-backdrop-filter: blur(0.2em);
        backdrop-filter: blur(0.2em);
        border: 0.2vw solid #fff;
        overflow: hidden;
        z-index: 10;
    }
    .mv-txt-box.left {
        top: 0;
        left: 0;
    }
    .mv-txt-box.right {
        top: 0;
        right: 0;
    }
    .mv-txt-box.left .ws-text {
        height: calc( 2.4em * 1 - 0.4vw * 1 );
    }
    .mv-txt-box .ws-text-wrap {
        position: absolute;
        top: 0.9vw;
        left: 0;
        width: 100%;
        height: calc( 100% - 1.8vw );
        overflow: hidden;
    }
    .mv-txt-box .ws-text {
        position: absolute;
        bottom: -0.9vw;
        left: 0;
        margin: 0;
        padding: 0;
        width: calc( 10.0em - 0.4vw );
        height: calc( 2.4em * 5 - 0.4vw * 5 );
        color: #fff;
        font-size: 3.2vw;
        text-align: center;
        line-height: 1.0;
        /* transition: transform 1.0s ease-in-out; */
    }
    .mv-txt-box.left .ws-text {
        bottom: 0;
    }
    .mv-txt-box .ws-text span {
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0;
        width: calc( 10.0em - 0.4vw );
        height: calc( 2.4em - 0.4vw );
        color: #fff;
        font-size: 3.2vw;
        text-align: center;
    }
    .ws-cross {
        position: absolute;
        top: calc( 50% - 0.7em );
        left: calc( 50% - 0.7em );
        width: 1.4em;
        height: auto;
        aspect-ratio: 1 / 1;
        font-size: 3.2vw;
        background: #fff;
        clip-path: polygon( 5% 0, 50% 45%, 95% 0, 100% 5%, 55% 50%, 100% 95%, 95% 100%, 50% 55%, 5% 100%, 0 95%, 45% 50%, 0 5% );
        z-index: 10;
    }

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

    #about {
        margin: 12.8vw auto 0;
        padding: 12.8vw 0 calc( 12.8vw + 8.5vw );
        width: 100%;
        background: #eff5ff;
        border-radius: 8.5vw 8.5vw 0 0;
    }
    #about .txt1 {
        margin: 0 auto;
        width: 90%;
        font-size: 4.0vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 60 / 30 );
        letter-spacing: 0.06em;
    }
    #about .txt1 em {
        font-size: 6.0vw;
    }
    #about .pic {
        position: relative;
        margin: 6.0vw auto 0;
        width: 90%;
    }
    #about .pic > figure {
        margin: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 327 / 196;
    }
    #about .pic > figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    #about .pic > .common-btn {
        position: absolute;
        width: 70%;
        font-size: 3.6vw;
    }
    #about .pic > .btn-about {
        top: auto;
        bottom: 52%;
        left: 15%;
    }
    #about .pic > .btn-contact {
        top: 52%;
        bottom: auto;
        left: 15%;
    }

    #reason {
        margin: -8.5vw auto 0;
        padding: 12.8vw 0 calc( 12.8vw + 8.5vw );
        width: 100%;
        background: #fff;
        border-radius: 8.5vw 8.5vw 0 0;
    }
    #reason > h2 {
        margin: 0 auto;
        width: 90%;
        font-size: 5.2vw;
        font-weight: 700;
        text-align: left;
    }
    #reason > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #reason > p {
        margin: 2.5em auto 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
    }
    #reason > .reason-grid {
        margin: 8.0vw auto 0;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6.0vw;
    }
    #reason > .reason-grid .reason-item {
        margin: 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.1));
    }
    #reason > .reason-grid .reason-item .reason-no {
        position: relative;
        margin: 0;
        width: 15%;
        height: auto;
        aspect-ratio: 1 / 1;
        color: var(--color-theme);
        font-size: 4.8vw;
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: center;
        display: grid;
        place-items: center;
        background: #fff;
        border-radius: 2.0vw 0 0 2.0vw;
        transition: all 0.5s ease-out;
    }
    #reason > .reason-grid .reason-item .reason-no::after {
        position: absolute;
        content: "";
        top: 100%;
        right: 0;
        width: 4.0vw;
        height: 4.0vw;
        background: transparent;
        border-top-right-radius: 4.0vw;
        box-shadow: 1.0vw -1.0vw 0 1.0vw #fff; 
        transition: all 0.5s ease-out;
    }
    #reason > .reason-grid .reason-item .reason-body {
        position: relative;
        margin: 0;
        padding: 4.0vw;
        width: 85%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        background: #fff;
        border-radius: 0 2.0vw 2.0vw 2.0vw;
        transition: all 0.5s ease-out;
    }
    #reason > .reason-grid .reason-item .reason-body > .icon {
        display: grid;
        place-items: center;
        margin: 0;
        width: 30%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #eff5ff;
        border-radius: 1.5vw;
        overflow: hidden;
    }
    #reason > .reason-grid .reason-item .reason-body > .icon img {
        margin: 0;
        padding: 0;
        width: 65%;
        height: 65%;
        object-fit: contain;
    }
    #reason > .reason-grid .reason-item .reason-body > .txt {
        position: relative;
        margin: 0;
        padding: 0 1.0em 0 0;
        width: calc( 70% - 2.0vw );
        font-size: 4.0vw;
        font-weight: 700;
        text-align: left;
        display: flex;
        align-items: center;
        transition: all 0.5s ease-out;
    }
    #reason > .reason-grid .reason-item .reason-body > span {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        right: 4.0vw;
        translate: 0 -50%;
        width: 1.5em;
        height: 1.5em;
        overflow: hidden;
        transform: translateZ(0); /* Safariバグ対策 */
    }
    #reason > .reason-grid .reason-item .reason-body > span::before {
        position: absolute;
        content: "";
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.25s;
    }
    #reason > .reason-grid .reason-item .reason-body > span::after {
        position: absolute;
        content: "";
        top: 10%;
        left: -100%;
        width: 80%;
        height: 80%;
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.0s;
    }
    @media ( hover: hover ) {
        #reason > .reason-grid .reason-item:hover .reason-no {
            color: #fff;
            background: var(--color-theme);
        }
        #reason > .reason-grid .reason-item:hover .reason-no::after {
            box-shadow: 5px -5px 0 5px var(--color-theme) 
        }
        #reason > .reason-grid .reason-item:hover .reason-body {
            background: var(--color-theme);
        }
        #reason > .reason-grid .reason-item:hover .reason-body > .txt {
            color: #fff;
        }
        #reason > .reason-grid .reason-item:hover .reason-body > span::before {
            left: 110%;
            transition: all 0.5s ease-out 0.0s;
        }
        #reason > .reason-grid .reason-item:hover .reason-body > span::after {
            left: 10%;
            transition: all 0.5s ease-out 0.25s;
        }
    }

    #service {
        margin: -8.5vw auto 0;
        padding: 12.8vw 0 calc( 12.8vw + 8.5vw );
        width: 100%;
        height: auto;
        border-radius: 8.5vw 8.5vw 0 0;
        overflow: hidden;
        z-index: 0;
    }
    #service .service-bg {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*filter: blur( 2px ) brightness( 80% );*/
        background: url(../images/top-service-bg.jpg) no-repeat 34% 0% / 300% auto;
        z-index: 0;
    }
    #service .service-bg::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0a1b38cc;
        z-index: 0;
        -webkit-backdrop-filter: blur(0.1em);
        backdrop-filter: blur(0.1em);
    }
    #service > h2 {
        position: relative;
        margin: 0 auto;
        width: 90%;
        color: #fff;
        font-size: 5.2vw;
        font-weight: 700;
        text-align: left;
        z-index: 1;
    }
    #service > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-white.svg) no-repeat center / contain;
    }
    #service > p {
        position: relative;
        margin: 2.5em auto 0;
        width: 90%;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
        z-index: 1;
    }
    #service > .service-grid {
        position: relative;
        margin: 8.0vw auto 0;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6.0vw;
        z-index: 1;
    }
    #service > .service-grid .service-item {
        margin: 0;
        padding: 4.0vw;
        width: 100%;
        background: #fff;
        border-radius: 2.0vw;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #service > .service-grid .service-item .icon {
        display: grid;
        place-items: center;
        margin: 0 auto;
        width: 25%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #eff5ff;
        border-radius: 1.5vw;
    }
    #service > .service-grid .service-item .icon img {
        margin: 0;
        padding: 0;
        width: 60%;
        height: 60%;
        object-fit: contain;
    }
    #service > .service-grid .service-item h3 {
        margin: 0;
        width: calc( 75% - 4.0vw );
        font-size: 4.0vw;
        font-weight: 700;
        text-align: left;
    }
    #service > .common-btn {
        position: relative;
        margin: 8.0vw 5.0vw 0 auto;
        color: var(--color-theme);
        background: #fff;
        border: 1px solid #fff;
        z-index: 1;
    }
    #service > .common-btn::before {
        background: var(--color-theme);
    }
    #service > .common-btn span::before {
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
    }
    #service > .common-btn span::after {
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
    }
    @media ( hover: hover ) {
        #service > .common-btn:hover {
            color: #fff;
            background: var(--color-theme);
        }
        #service > .common-btn:hover::before {
            background: #fff9;
        }
    }

    #hint {
        margin: -8.5vw auto 0;
        padding: 12.8vw 0 calc( 12.8vw + 8.5vw );
        width: 100%;
        background: #fff;
        border-radius: 8.5vw 8.5vw 0 0;
    }
    #hint > h2 {
        margin: 0 auto;
        width: 90%;
        font-size: 5.2vw;
        font-weight: 700;
        text-align: left;
    }
    #hint > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #hint > p {
        margin: 2.5em auto 0;
        width: 90%;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
    }
    #hint > .hint-grid {
        display: none;
    }
    #hint > #hint-slider {
        position: relative;
        margin: 0 auto;
        padding: 8.0vw 0 14.0vw;
        width: 90%;
        overflow: hidden;
    }
    #hint > #hint-slider .swiper-slide {
        transition: opacity 0.5s ease-out;
    }
    #hint > #hint-slider .swiper-slide figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 444;
    }
    #hint > #hint-slider .swiper-slide figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    #hint > #hint-slider .swiper-slide h3 {
        margin: 0.5em 0 0;
        font-size: 4.0vw;
        font-weight: 700;
        text-align: left;
    }
    #hint > #hint-slider .swiper-pagination-bullet {
        margin: 0 1.0vw;
        width: 3.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #hint > #hint-slider .swiper-pagination-bullet-active {
        background: var(--color-theme);
    }
    #hint > #hint-slider .swiper-button-prev,
    #hint > #hint-slider .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.5s ease-out;
        overflow: hidden;
    }
    #hint > #hint-slider .swiper-button-next {
        left: auto;
        right: 0;
    }
    #hint > #hint-slider .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: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        scale: -1.0 1.0;
        transition: all 0.5s ease-out 0.25s;
    }
    #hint > #hint-slider .swiper-button-prev::after {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 150%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        scale: -1.0 1.0;
        transition: all 0.5s ease-out 0.0s;
    }
    #hint > #hint-slider .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: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.25s;
    }
    #hint > #hint-slider .swiper-button-next::after {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: -50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.0s;
    }
    #hint > #hint-slider .swiper-button-disabled {
        background: #999;
        border: 1px solid #999;
    }
    @media ( hover: hover ) {
        #hint > #hint-slider .swiper-slide:hover {
            opacity: 0.6;
        }
        #hint > #hint-slider .swiper-button-prev:hover {
            background: #fff;
        }
        #hint > #hint-slider .swiper-button-prev:hover::before {
            left: -50%;
            transition: all 0.5s ease-out 0.0s;
        }
        #hint > #hint-slider .swiper-button-prev:hover::after {
            left: 50%;
            transition: all 0.5s ease-out 0.0s;
        }
        #hint > #hint-slider .swiper-button-next:hover {
            background: #fff;
        }
        #hint > #hint-slider .swiper-button-next:hover::before {
            left: 150%;
            transition: all 0.5s ease-out 0.0s;
        }
        #hint > #hint-slider .swiper-button-next:hover::after {
            left: 50%;
            transition: all 0.5s ease-out 0.25s;
        }
    }
    #hint > .common-btn {
        margin: 8.0vw 5.0vw 0 auto;
        border: 
    }
    @media ( hover: hover ) {
        #hint > .hint-grid .hint-item:hover {
            opacity: 0.6;
        }
    }

    #news {
        margin: -8.5vw auto 0;
        padding: 12.8vw 0 calc( 12.8vw + 8.5vw );
        width: 100%;
        background: #eff5ff;
        border-radius: 8.5vw 8.5vw 0 0;
    }
    #news > h2 {
        margin: 0 auto;
        width: 90%;
        font-size: 5.2vw;
        font-weight: 700;
        text-align: left;
    }
    #news > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #news > .news-items {
        margin: 8.0vw auto 0;
        width: 90%;
    }
    #news > .news-items .news-item {
        display: block;
        margin: 0;
        padding: 4.0vw 0;
        width: 100%;
        border-bottom: 1px solid #d2dbea;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1.0vw 0;
    }
    #news > .news-items .news-item .date {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 2.8vw;
        font-weight: 500;
        font-family: var(--font-alphabet);
        text-align: left;
    }
    #news > .news-items .news-item .title {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
    }
    #news > .news-items .news-item:first-child {
        border-top: 1px solid #d2dbea;
    }
    #news > .common-btn {
        margin: 8.0vw 5.0vw 0 auto;
    }

    #recruit {
        margin: -8.5vw auto 0;
        padding: 12.8vw 0 calc( 12.8vw + 8.5vw );
        width: 100%;
        background: #fff;
        border-radius: 8.5vw 8.5vw 0 0;
    }
    #recruit > h2 {
        margin: 0 auto;
        width: 90%;
        font-size: 5.2vw;
        font-weight: 700;
        text-align: left;
    }
    #recruit > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #recruit > .recruit-box {
        position: relative;
        margin: 60px auto 0;
        width: 90%;
        height: auto;
        aspect-ratio: 327 / 268;
        border-radius: 2.0vw;
        overflow: hidden;
        background: linear-gradient( #001b4899, #001b4899 ),
                    url(../images/top-recruit-bg.jpg) no-repeat 82% 0% / 350% auto;
    }
    #recruit > .recruit-box h2 {
        position: absolute;
        bottom: 45%;
        left: 5%;
        margin: 0;
        width: 90%;
        color: #fff;
        font-size: 6.8vw;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.06em;
    }
    #recruit > .recruit-box .common-btn {
        position: absolute;
        top: 65%;
        left: 50%;
        translate: -50% 0;
        margin: 0;
        color: var(--color-theme);
        background: #fff;
        border: 1px solid #fff;
        z-index: 1;
    }
    #recruit > .recruit-box .common-btn::before {
        background: var(--color-theme);
    }
    #recruit > .recruit-box .common-btn span::before {
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
    }
    #recruit > .recruit-box .common-btn span::after {
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
    }
    @media ( hover: hover ) {
        #recruit > .recruit-box .common-btn:hover {
            color: #fff;
            background: var(--color-theme);
        }
        #recruit > .recruit-box .common-btn:hover::before {
            background: #fff9;
        }
    }

    #other {
        margin: -8.5vw auto 0;
        padding: 12.8vw 0 calc( 12.8vw + 8.5vw );
        width: 100%;
        background: #eff5ff;
        border-radius: 8.5vw 8.5vw 0 0;
    }
    #other > h2 {
        margin: 0 auto;
        width: 90%;
        font-size: 5.2vw;
        font-weight: 700;
        text-align: left;
    }
    #other > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #other > .other-slider-wrap {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 90%;
    }
    #other > .other-slider-wrap #other-slider {
        position: relative;
        margin: 0;
        padding: 8.0vw 0 14.0vw;
        width: 100%;
        overflow: hidden;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide {
        transition: opacity 0.5s ease-out;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 444;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 2.0vw;
    }
    #other > .other-slider-wrap .swiper-pagination-bullet {
        margin: 0 1.0vw;
        width: 3.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #other > .other-slider-wrap .swiper-pagination-bullet-active {
        background: var(--color-theme);
    }
    #other > .other-slider-wrap .swiper-button-prev,
    #other > .other-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.5s ease-out;
        overflow: hidden;
    }
    #other > .other-slider-wrap .swiper-button-next {
        left: auto;
        right: 0;
    }
    #other > .other-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: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        scale: -1.0 1.0;
        transition: all 0.5s ease-out 0.25s;
    }
    #other > .other-slider-wrap .swiper-button-prev::after {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 150%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        scale: -1.0 1.0;
        transition: all 0.5s ease-out 0.0s;
    }
    #other > .other-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: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.25s;
    }
    #other > .other-slider-wrap .swiper-button-next::after {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: -50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.0s;
    }
    #other > .other-slider-wrap .swiper-button-disabled {
        background: #999;
        border: 1px solid #999;
    }
    @media ( hover: hover ) {
        #other > .other-slider-wrap #other-slider .swiper-slide:hover {
            opacity: 0.6;
        }
        #other > .other-slider-wrap .swiper-button-prev:hover {
            background: #fff;
        }
        #other > .other-slider-wrap .swiper-button-prev:hover::before {
            left: -50%;
            transition: all 0.5s ease-out 0.0s;
        }
        #other > .other-slider-wrap .swiper-button-prev:hover::after {
            left: 50%;
            transition: all 0.5s ease-out 0.25s;
        }
        #other > .other-slider-wrap .swiper-button-next:hover {
            background: #fff;
        }
        #other > .other-slider-wrap .swiper-button-next:hover::before {
            left: 150%;
            transition: all 0.5s ease-out 0.0s;
        }
        #other > .other-slider-wrap .swiper-button-next:hover::after {
            left: 50%;
            transition: all 0.5s ease-out 0.25s;
        }
    }

    #contact {
        margin: -8.5vw auto 0;
        padding: 12.8vw 0 calc( 12.8vw + 8.5vw );
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 273;
        border-radius: 8.5vw 8.5vw 0 0;
        overflow: hidden;
        z-index: 0;
    }
    #contact .contact-bg {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*filter: blur( 2px ) brightness( 80% );*/
        background: url(../images/top-contact-bg.jpg) no-repeat 15% 0% / 180% auto;
        z-index: 0;
    }
    #contact .contact-bg::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0a1b3899;
        z-index: 0;
        -webkit-backdrop-filter: blur(0.1em);
        backdrop-filter: blur(0.1em);
    }
    #contact > .contact-wrap {
        position: absolute;
        margin: 0;
        top: 50%;
        left: 50%;
        width: 90%;
        height: auto;
        translate: -50% -50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    #contact > .contact-wrap .contact-head {
    }
    #contact > .contact-wrap .contact-head h2 {
        margin: 0;
        width: 100%;
        color: #fff;
        font-size: 6.0vw;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.06em;
    }
    #contact > .contact-wrap .contact-head p {
        margin: 1.0em 0 0;
        width: 100%;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 400;
        text-align: center;
    }
    #contact > .contact-wrap .common-btn {
        position: relative;
        margin: 4.0vw 0 0;
        width: 75%;
        color: var(--color-theme);
        background: #fff;
        border: 1px solid #fff;
        z-index: 1;
    }
    #contact > .contact-wrap .common-btn::before {
        background: var(--color-theme);
    }
    #contact > .contact-wrap .common-btn span::before {
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
    }
    #contact > .contact-wrap .common-btn span::after {
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
    }
    @media ( hover: hover ) {
        #contact > .contact-wrap .common-btn:hover {
            color: #fff;
            background: var(--color-theme);
        }
        #contact > .contact-wrap .common-btn:hover::before {
            background: #fff9;
        }
    }

    .common-btn {
        position: relative;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 3.0em;
        width: 60%;
        height: auto;
        aspect-ratio: 280 / 64;
        padding: 0 1.2em;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 700;
        white-space: nowrap;
        border-radius: 2.0vw;
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        transition: all 0.5s ease-out;
    }
    .common-btn::before {
        position: absolute;
        content: "";
        top: 20%;
        right: 3.5em;
        width: 1px;
        height: 60%;
        background: #fff;
        opacity: 0.5;
    }
    .common-btn > span {
        position: relative;
        display: block;
        width: 1.5em;
        height: 1.5em;
        overflow: hidden;
    }
    .common-btn > span::before {
        position: absolute;
        content: "";
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.25s;
    }
    .common-btn > span::after {
        position: absolute;
        content: "";
        top: 10%;
        left: -100%;
        width: 80%;
        height: 80%;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.0s;
    }
    @media ( hover: hover ) {
        .common-btn:hover {
            color: var(--color-theme);
            background: #fff;
        }
        .common-btn:hover::before {
            background: #01328399;
        }
        .common-btn:hover span::before {
            left: 110%;
            transition: all 0.5s ease-out 0.0s;
        }
        .common-btn:hover span::after {
            left: 10%;
            transition: all 0.5s ease-out 0.25s;
        }
    }

}


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

    #mv {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: calc( 100dvh - 88px );
        height: calc( 100vh - 88px );
        background: var(--color-theme);
    }

    #mv .ws-slide {
        position: absolute;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #mv .ws-slide .ws-pic-l {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0 auto;
        padding: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }
    #mv .ws-slide .ws-pic-r {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 auto;
        padding: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }
    #mv .ws-slide img {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        transition: transform 1.0s ease-in-out;
    }
    #mv .ws-slide .ws-pic-l img {
        transform: translateX( -100% );
    }
    #mv .ws-slide .ws-pic-r img {
        transform: translateX( +100% );
    }
    #mv .ws-slide.active .ws-pic-l img {
        z-index: 3;
        transform: translateX( 0 );
    }
    #mv .ws-slide.active .ws-pic-r img {
        z-index: 3;
        transform: translateX( 0 );
    }
    #mv .ws-slide.stay .ws-pic-l img {
        z-index: 2;
        transform: translateX( 0 );
    }
    #mv .ws-slide.stay .ws-pic-r img {
        z-index: 2;
        transform: translateX( 0 );
    }

    #mv #mv-main-txt {
        position: absolute;
        bottom: 40%;
        left: 50%;
        translate: -50% 0;
        width: 37.2%;
        height: auto;
        overflow: hidden;
        z-index: 10;
    }
    #mv #mv-main-txt img {
        width: 100%;
        height: auto;
        transform: translateX( -100% );
        transition: transform 0.5s ease-out;
    }
    #mv #mv-main-txt.active img {
        transform: translateX( 0 );
    }

    #mv-txt-box-wrap {
        position: absolute;
        top: 65%;
        left: 50%;
        translate: -50% 0;
        margin: 0;
        padding: 0;
        width: calc( 10.0em + 10.0em + 3.0em );
        height: 2.4em;
        color: #fff;
        font-size: 1.6vw;
        opacity: 0.0;
        z-index: 20;
        transition: opacity 1.0s ease-out 1.0s;
    }
    #mv-txt-box-wrap.active {
        opacity: 1.0;
    }

    .mv-txt-box {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 10.0em;
        height: 2.4em;
        color: #fff;
        font-size: 1.6vw;
        background: rgba( 255, 255, 255, 0.05 );
        box-shadow: 0 0 1.0em rgba( 0, 0, 0, 0.2 );
        -webkit-backdrop-filter: blur(0.2em);
        backdrop-filter: blur(0.2em);
        border: 0.2vw solid #fff;
        overflow: hidden;
        z-index: 10;
    }
    .mv-txt-box.left {
        top: 0;
        left: 0;
    }
    .mv-txt-box.right {
        top: 0;
        right: 0;
    }
    .mv-txt-box.left .ws-text {
        height: calc( 2.4em * 1 - 0.4vw * 1 );
    }
    .mv-txt-box .ws-text-wrap {
        position: absolute;
        top: 0.9vw;
        left: 0;
        width: 100%;
        height: calc( 100% - 1.8vw );
        overflow: hidden;
    }
    .mv-txt-box .ws-text {
        position: absolute;
        bottom: -0.9vw;
        left: 0;
        margin: 0;
        padding: 0;
        width: calc( 10.0em - 0.4vw );
        height: calc( 2.4em * 5 - 0.4vw * 5 );
        color: #fff;
        font-size: 1.6vw;
        text-align: center;
        line-height: 1.0;
        /* transition: transform 1.0s ease-in-out; */
    }
    .mv-txt-box.left .ws-text {
        bottom: 0;
    }
    .mv-txt-box .ws-text span {
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0;
        width: calc( 10.0em - 0.4vw );
        height: calc( 2.4em - 0.4vw );
        color: #fff;
        font-size: 1.6vw;
        text-align: center;
    }
    .ws-cross {
        position: absolute;
        top: calc( 50% - 0.7em );
        left: calc( 50% - 0.7em );
        width: 1.4em;
        height: auto;
        aspect-ratio: 1 / 1;
        font-size: 1.6vw;
        background: #fff;
        clip-path: polygon( 5% 0, 50% 45%, 95% 0, 100% 5%, 55% 50%, 100% 95%, 95% 100%, 50% 55%, 5% 100%, 0 95%, 45% 50%, 0 5% );
        z-index: 10;
    }

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

    #about {
        margin: 96px auto 0;
        padding: 96px 0 calc( 96px + 64px );
        width: 100%;
        background: #eff5ff;
        border-radius: 64px 64px 0 0;
    }
    #about .txt1 {
        margin: 0 auto;
        width: 90%;
        max-width: 1160px;
        font-size: calc( 30 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: center;
        line-height: calc( 60 / 30 );
        letter-spacing: 0.06em;
    }
    #about .txt1 em {
        font-size: calc( 44 * min( 90vw, 1160px ) / 1160 );
    }
    #about .pic {
        position: relative;
        margin: 80px auto 0;
        width: 90%;
        max-width: 1160px;
    }
    #about .pic > figure {
        margin: 0;
        width: 100%;
        height: auto;
    }
    #about .pic > figure img {
        width: 100%;
        height: auto;
    }
    #about .pic > .common-btn {
        position: absolute;
        width: calc( 280 * min( 90vw, 1160px ) / 1160 );
        font-size: calc( 16 * min( 90vw, 1160px ) / 1160 );
    }
    #about .pic > .btn-about {
        top: 0;
        right: 51%;
    }
    #about .pic > .btn-contact {
        top: 0;
        left: 51%;
    }

    #reason {
        margin: -64px auto 0;
        padding: 96px 0 calc( 96px + 64px );
        width: 100%;
        background: #fff;
        border-radius: 64px 64px 0 0;
    }
    #reason > h2 {
        margin: 0 auto;
        width: 90%;
        max-width: 1160px;
        font-size: calc( 24 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
    }
    #reason > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #reason > p {
        margin: 2.5em auto 0;
        width: 90%;
        max-width: 1160px;
        font-size: calc( 16 * min( 90vw, 1160px ) / 1160 );
        font-weight: 500;
        text-align: left;
    }
    #reason > .reason-grid {
        margin: 40px auto 0;
        width: 90%;
        max-width: 1160px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc( 30 * min( 90vw, 1160px ) / 1160 );
    }
    #reason > .reason-grid .reason-item {
        margin: 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.1));
    }
    #reason > .reason-grid .reason-item .reason-no {
        position: relative;
        margin: 0;
        width: calc( 80 * min( 90vw, 1160px ) / 1160 );
        height: auto;
        aspect-ratio: 1 / 1;
        color: var(--color-theme);
        font-size: calc( 32 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        font-family: var(--font-alphabet);
        text-align: center;
        display: grid;
        place-items: center;
        background: #fff;
        border-radius: 10px 0 0 10px;
        transition: all 0.5s ease-out;
    }
    #reason > .reason-grid .reason-item .reason-no::after {
        position: absolute;
        content: "";
        top: 100%;
        right: 0;
        width: 20px;
        height: 20px;
        background: transparent;
        border-top-right-radius: 20px;
        box-shadow: 5px -5px 0 5px #fff; 
        transition: all 0.5s ease-out;
    }
    #reason > .reason-grid .reason-item .reason-body {
        position: relative;
        margin: 0;
        padding: calc( 24 * min( 90vw, 1160px ) / 1160 );
        width: calc( 100% - 80 * min( 90vw, 1160px ) / 1160 );
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        background: #fff;
        border-radius: 0 10px 10px 10px;
        transition: all 0.5s ease-out;
    }
    #reason > .reason-grid .reason-item .reason-body > .icon {
        display: grid;
        place-items: center;
        margin: 0;
        width: 30%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #eff5ff;
        border-radius: 8px;
        overflow: hidden;
    }
    #reason > .reason-grid .reason-item .reason-body > .icon img {
        margin: 0;
        padding: 0;
        width: 65%;
        height: 65%;
        object-fit: contain;
    }
    #reason > .reason-grid .reason-item .reason-body > .txt {
        position: relative;
        margin: 0;
        padding: 0 1.0em 0 0;
        width: calc( 70% - 20 * min( 90vw, 1160px ) / 1160 );
        font-size: calc( 24 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
        display: flex;
        align-items: center;
        transition: all 0.5s ease-out;
    }
    #reason > .reason-grid .reason-item .reason-body > span {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        right: calc( 24 * min( 90vw, 1160px ) / 1160 );
        translate: 0 -50%;
        width: 1.5em;
        height: 1.5em;
        overflow: hidden;
        transform: translateZ(0); /* Safariバグ対策 */
    }
    #reason > .reason-grid .reason-item .reason-body > span::before {
        position: absolute;
        content: "";
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.25s;
    }
    #reason > .reason-grid .reason-item .reason-body > span::after {
        position: absolute;
        content: "";
        top: 10%;
        left: -100%;
        width: 80%;
        height: 80%;
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.0s;
    }
    @media ( hover: hover ) {
        #reason > .reason-grid .reason-item:hover .reason-no {
            color: #fff;
            background: var(--color-theme);
        }
        #reason > .reason-grid .reason-item:hover .reason-no::after {
            box-shadow: 5px -5px 0 5px var(--color-theme) 
        }
        #reason > .reason-grid .reason-item:hover .reason-body {
            background: var(--color-theme);
        }
        #reason > .reason-grid .reason-item:hover .reason-body > .txt {
            color: #fff;
        }
        #reason > .reason-grid .reason-item:hover .reason-body > span::before {
            left: 110%;
            transition: all 0.5s ease-out 0.0s;
        }
        #reason > .reason-grid .reason-item:hover .reason-body > span::after {
            left: 10%;
            transition: all 0.5s ease-out 0.25s;
        }
    }

    #service {
        margin: -64px auto 0;
        padding: 96px 0 calc( 96px + 64px );
        width: 100%;
        height: auto;
        max-height: 880px;
        border-radius: 64px 64px 0 0;
        overflow: hidden;
        z-index: 0;
    }
    #service .service-bg {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*filter: blur( 2px ) brightness( 80% );*/
        background: url(../images/top-service-bg.jpg) no-repeat center top / cover;
        z-index: 0;
    }
    #service .service-bg::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0a1b38cc;
        z-index: 0;
        -webkit-backdrop-filter: blur(0.1em);
        backdrop-filter: blur(0.1em);
    }
    #service > h2 {
        position: relative;
        margin: 0 auto;
        width: 90%;
        max-width: 1160px;
        color: #fff;
        font-size: calc( 24 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
        z-index: 1;
    }
    #service > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-white.svg) no-repeat center / contain;
    }
    #service > p {
        position: relative;
        margin: 2.5em auto 0;
        width: 90%;
        max-width: 1160px;
        color: #fff;
        font-size: calc( 16 * min( 90vw, 1160px ) / 1160 );
        font-weight: 500;
        text-align: left;
        z-index: 1;
    }
    #service > .service-grid {
        position: relative;
        margin: 40px auto 0;
        width: 90%;
        max-width: 1160px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0 20px;
        z-index: 1;
    }
    #service > .service-grid .service-item {
        margin: 0;
        padding: calc( 32 * min( 90vw, 1160px ) / 1160 ) 0;
        width: 100%;
        background: #fff;
        border-radius: 8px;
    }
    #service > .service-grid .service-item .icon {
        display: grid;
        place-items: center;
        margin: 0 auto;
        width: 80%;
        height: auto;
        aspect-ratio: 3 / 2;
        background: #eff5ff;
        border-radius: 8px;
    }
    #service > .service-grid .service-item .icon img {
        margin: 0;
        padding: 0;
        width: 50%;
        height: 60%;
        object-fit: contain;
    }
    #service > .service-grid .service-item h3 {
        margin: 0.8em 0 0;
        font-size: calc( 20 * min( 90vw, 1160px ) / 1160 );
        font-weight: 900;
        text-align: center;
    }
    #service > .common-btn {
        position: relative;
        margin: calc( 40 * min( 90vw, 1160px ) / 1160 ) calc( 50.0vw - min( 90.0vw, 1160px ) * 0.5 ) 0 auto;
        color: var(--color-theme);
        background: #fff;
        border: 1px solid #fff;
        z-index: 1;
    }
    #service > .common-btn::before {
        background: var(--color-theme);
    }
    #service > .common-btn span::before {
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
    }
    #service > .common-btn span::after {
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
    }
    @media ( hover: hover ) {
        #service > .common-btn:hover {
            color: #fff;
            background: var(--color-theme);
        }
        #service > .common-btn:hover::before {
            background: #fff9;
        }
    }

    #hint {
        margin: -64px auto 0;
        padding: 96px 0 calc( 96px + 64px );
        width: 100%;
        background: #fff;
        border-radius: 64px 64px 0 0;
    }
    #hint > h2 {
        margin: 0 auto;
        width: 90%;
        max-width: 1160px;
        font-size: calc( 24 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
    }
    #hint > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #hint > p {
        margin: 2.5em auto 0;
        width: 90%;
        max-width: 1160px;
        font-size: calc( 16 * min( 90vw, 1160px ) / 1160 );
        font-weight: 500;
        text-align: left;
    }
    #hint > .hint-grid {
        margin: 40px auto 0;
        width: 90%;
        max-width: 1160px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0 20px;
    }
    #hint > .hint-grid .hint-item {
        margin: 0;
        padding: 0;
        width: 100%;
        transition: opacity 0.5s ease-out;
    }
    #hint > .hint-grid .hint-item .pic {
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 444;
    }
    #hint > .hint-grid .hint-item .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    #hint > .hint-grid .hint-item h3 {
        margin: 0.8em 0 0;
        font-size: calc( 20 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
    }
    #hint > .hint-grid .hint-item h3::after {
        content: "";
        display: inline-block;
        width: 1.5em;
        height: 0.8em;
        background: url(../images/icon-window.svg) no-repeat center / contain;
    }
    #hint > #hint-slider {
        display: none;
    }
    #hint > .common-btn {
        margin: calc( 40 * min( 90vw, 1160px ) / 1160 ) calc( 50.0vw - min( 90.0vw, 1160px ) * 0.5 ) 0 auto;
        border: 
    }

    #news {
        margin: -64px auto 0;
        padding: 96px 0 calc( 96px + 64px );
        width: 100%;
        background: #eff5ff;
        border-radius: 64px 64px 0 0;
    }
    #news > h2 {
        margin: 0 auto;
        width: 90%;
        max-width: 1160px;
        font-size: calc( 24 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
    }
    #news > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #news > .news-items {
        margin: 60px auto 0;
        width: 90%;
        max-width: 1160px;
    }
    #news > .news-items .news-item {
        display: block;
        margin: 0;
        padding: 30px 0;
        width: 100%;
        border-bottom: 1px solid #d2dbea;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #news > .news-items .news-item .date {
        margin: 0;
        padding: 0;
        width: 80px;
        font-size: 16px;
        font-weight: 500;
        font-family: var(--font-alphabet);
        text-align: left;
    }
    #news > .news-items .news-item .title {
        margin: 0;
        padding: 0;
        width: calc( 100% - 80px );
        font-size: 16px;
        font-weight: 500;
        text-align: left;
    }
    #news > .news-items .news-item:first-child {
        border-top: 1px solid #d2dbea;
    }
    #news > .common-btn {
        margin: calc( 40 * min( 90vw, 1160px ) / 1160 ) calc( 50.0vw - min( 90.0vw, 1160px ) * 0.5 ) 0 auto;
    }

    #recruit {
        margin: -64px auto 0;
        padding: 96px 0 calc( 96px + 64px );
        width: 100%;
        background: #fff;
        border-radius: 64px 64px 0 0;
    }
    #recruit > h2 {
        margin: 0 auto;
        width: 90%;
        max-width: 1160px;
        font-size: calc( 24 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
    }
    #recruit > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #recruit > .recruit-box {
        position: relative;
        margin: 60px auto 0;
        width: 90%;
        max-width: 1160px;
        height: auto;
        aspect-ratio: 1160 / 358;
        border-radius: 8px;
        overflow: hidden;
        background: linear-gradient( #001b4899, #001b4899 ),
                    url(../images/top-recruit-bg.jpg) no-repeat center / cover;
    }
    #recruit > .recruit-box h2 {
        position: absolute;
        top: 50%;
        left: 6%;
        translate: 0 -50%;
        margin: 0;
        width: 90%;
        color: #fff;
        font-size: calc( 40 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
        letter-spacing: 0.06em;
    }
    #recruit > .recruit-box .common-btn {
        position: absolute;
        top: 50%;
        right: 6%;
        translate: 0 -50%;
        margin: 0;
        color: var(--color-theme);
        background: #fff;
        border: 1px solid #fff;
        z-index: 1;
    }
    #recruit > .recruit-box .common-btn::before {
        background: var(--color-theme);
    }
    #recruit > .recruit-box .common-btn span::before {
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
    }
    #recruit > .recruit-box .common-btn span::after {
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
    }
    @media ( hover: hover ) {
        #recruit > .recruit-box .common-btn:hover {
            color: #fff;
            background: var(--color-theme);
        }
        #recruit > .recruit-box .common-btn:hover::before {
            background: #fff9;
        }
    }

    #other {
        margin: -64px auto 0;
        padding: 96px 0 calc( 96px + 64px );
        width: 100%;
        background: #eff5ff;
        border-radius: 64px 64px 0 0;
    }
    #other > h2 {
        margin: 0 auto;
        width: 90%;
        max-width: 1160px;
        font-size: calc( 24 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
    }
    #other > h2::before {
        content: "";
        display: inline-block;
        width: 1.4em;
        height: 0.8em;
        background: url(../images/icon-logo-navy.svg) no-repeat center / contain;
    }
    #other > .other-slider-wrap {
        position: relative;
        margin: 0 auto;
        padding: 0 100px;
        width: 100%;
        max-width: 1160px;
    }
    #other > .other-slider-wrap #other-slider {
        position: relative;
        margin: 0;
        padding: 60px 0;
        width: 100%;
        overflow: hidden;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide {
        transition: opacity 0.5s ease-out;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 444;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    #other > .other-slider-wrap .swiper-pagination-bullet {
        width: 12px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    #other > .other-slider-wrap .swiper-pagination-bullet-active {
        background: var(--color-theme);
    }
    #other > .other-slider-wrap .swiper-button-prev,
    #other > .other-slider-wrap .swiper-button-next {
        position: absolute;
        margin: 0;
        padding: 0;
        top: calc( 50% - 26px );
        left: 0;
        bottom: auto;
        right: auto;
        width: 52px;
        height: auto;
        aspect-ratio: 1 / 1;
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: 8px;
        transition: all 0.5s ease-out;
        overflow: hidden;
    }
    #other > .other-slider-wrap .swiper-button-next {
        left: auto;
        right: 0;
    }
    #other > .other-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: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        scale: -1.0 1.0;
        transition: all 0.5s ease-out 0.25s;
    }
    #other > .other-slider-wrap .swiper-button-prev::after {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: 150%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        scale: -1.0 1.0;
        transition: all 0.5s ease-out 0.0s;
    }
    #other > .other-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: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.25s;
    }
    #other > .other-slider-wrap .swiper-button-next::after {
        position: absolute;
        display: block;
        content: "";
        top: 50%;
        left: -50%;
        translate: -50% -50%;
        width: 40%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.0s;
    }
    #other > .other-slider-wrap .swiper-button-disabled {
        background: #999;
        border: 1px solid #999;
    }
    @media ( hover: hover ) {
        #other > .other-slider-wrap #other-slider .swiper-slide:hover {
            opacity: 0.6;
        }
        #other > .other-slider-wrap .swiper-button-prev:hover {
            background: #fff;
        }
        #other > .other-slider-wrap .swiper-button-prev:hover::before {
            left: -50%;
            transition: all 0.5s ease-out 0.0s;
        }
        #other > .other-slider-wrap .swiper-button-prev:hover::after {
            left: 50%;
            transition: all 0.5s ease-out 0.25s;
        }
        #other > .other-slider-wrap .swiper-button-next:hover {
            background: #fff;
        }
        #other > .other-slider-wrap .swiper-button-next:hover::before {
            left: 150%;
            transition: all 0.5s ease-out 0.0s;
        }
        #other > .other-slider-wrap .swiper-button-next:hover::after {
            left: 50%;
            transition: all 0.5s ease-out 0.25s;
        }
    }

    #contact {
        margin: -64px auto 0;
        padding: 96px 0 calc( 96px + 64px );
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 400;
        max-height: 400px;
        border-radius: 64px 64px 0 0;
        overflow: hidden;
        z-index: 0;
    }
    #contact .contact-bg {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*filter: blur( 2px ) brightness( 80% );*/
        background: url(../images/top-contact-bg.jpg) no-repeat center top / cover;
        z-index: 0;
    }
    #contact .contact-bg::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0a1b3899;
        z-index: 0;
        -webkit-backdrop-filter: blur(0.1em);
        backdrop-filter: blur(0.1em);
    }
    #contact > .contact-wrap {
        position: absolute;
        margin: 0;
        top: 0;
        left: 50%;
        width: 90%;
        max-width: 1160px;
        height: 100%;
        translate: -50% 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
    }
    #contact > .contact-wrap .contact-head {
    }
    #contact > .contact-wrap .contact-head h2 {
        margin: 0;
        width: 100%;
        color: #fff;
        font-size: calc( 40 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        text-align: left;
        letter-spacing: 0.06em;
    }
    #contact > .contact-wrap .contact-head p {
        margin: 0;
        width: 100%;
        color: #fff;
        font-size: calc( 16 * min( 90vw, 1160px ) / 1160 );
        font-weight: 400;
        text-align: left;
    }
    #contact > .contact-wrap .common-btn {
        position: relative;
        margin: 0;
        color: var(--color-theme);
        background: #fff;
        border: 1px solid #fff;
        z-index: 1;
    }
    #contact > .contact-wrap .common-btn::before {
        background: var(--color-theme);
    }
    #contact > .contact-wrap .common-btn span::before {
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
    }
    #contact > .contact-wrap .common-btn span::after {
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
    }
    @media ( hover: hover ) {
        #contact > .contact-wrap .common-btn:hover {
            color: #fff;
            background: var(--color-theme);
        }
        #contact > .contact-wrap .common-btn:hover::before {
            background: #fff9;
        }
    }

    .common-btn {
        position: relative;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 3.0em;
        width: calc( 280 * min( 90vw, 1160px ) / 1160 );
        height: auto;
        aspect-ratio: 280 / 64;
        padding: 0 1.2em;
        color: #fff;
        font-size: calc( 16 * min( 90vw, 1160px ) / 1160 );
        font-weight: 700;
        border-radius: 8px;
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        transition: all 0.5s ease-out;
    }
    .common-btn::before {
        position: absolute;
        content: "";
        top: 20%;
        right: 3.5em;
        width: 1px;
        height: 60%;
        background: #fff;
        opacity: 0.5;
    }
    .common-btn > span {
        position: relative;
        display: block;
        width: 1.5em;
        height: 1.5em;
        overflow: hidden;
    }
    .common-btn > span::before {
        position: absolute;
        content: "";
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        background: url(../images/icon-arrow-white.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.25s;
    }
    .common-btn > span::after {
        position: absolute;
        content: "";
        top: 10%;
        left: -100%;
        width: 80%;
        height: 80%;
        background: url(../images/icon-arrow-navy.svg) no-repeat center / contain;
        transition: all 0.5s ease-out 0.0s;
    }
    @media ( hover: hover ) {
        .common-btn:hover {
            color: var(--color-theme);
            background: #fff;
        }
        .common-btn:hover::before {
            background: #01328399;
        }
        .common-btn:hover span::before {
            left: 110%;
            transition: all 0.5s ease-out 0.0s;
        }
        .common-btn:hover span::after {
            left: 10%;
            transition: all 0.5s ease-out 0.25s;
        }
    }

}