@charset "utf-8";

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

    #mv {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: calc( 100vh - 72px );
        max-height: 460px;
        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.1%;
        height: 100%;
        overflow: hidden;
    }
    #mv .ws-slide .ws-pic-r {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 auto;
        padding: 0;
        width: 50.1%;
        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;*/
        transition: clip-path 1.0s ease-in-out;
    }
    #mv .ws-slide .ws-pic-l img {
        /* transform: translateX( -100% ); */
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
    #mv .ws-slide .ws-pic-r img {
        /* transform: translateX( +100% ); */
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    #mv .ws-slide.active .ws-pic-l img {
        z-index: 3;
        /* transform: translateX( 0 ); */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    #mv .ws-slide.active .ws-pic-r img {
        z-index: 3;
        /* transform: translateX( 0 ); */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    #mv .ws-slide.stay .ws-pic-l img {
        z-index: 2;
        /* transform: translateX( 0 ); */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    #mv .ws-slide.stay .ws-pic-r img {
        z-index: 2;
        /* transform: translateX( 0 ); */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    #mv #mv-main-txt {
        position: absolute;
        bottom: 20%;
        left: 50%;
        translate: -50% 0;
        width: 90.0%;
        height: auto;
        overflow: hidden;
        z-index: 10;
        -webkit-mask-image: linear-gradient(#000 0 0);
        mask-image: linear-gradient(#000 0 0);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 0%;
        mask-size: 100% 0%;
    }
    #mv #mv-main-txt.active{
        animation: mask-reveal-y 0.8s ease-out forwards;
    }
   @keyframes mask-reveal-y {
     to {
       -webkit-mask-size: 100% 100%;
       mask-size: 100% 100%;
     }
   }
    #mv-txt-box-wrap {
        position: absolute;
        bottom: 7%;
        left: 50%;
        translate: -50% 0;
        margin: 0;
        padding: 0;
        width:90%;
        height: 2.4em;
        color: #fff;
        font-size: 3.8vw;
        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.8em;
        color: #fff;
        font-weight: 800;
        background: var(--color-theme);
        /*
          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;
        background: #ff800f;
    }
    .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: 100%;
        color: #fff;
        text-align: center;
        line-height: 1.0;
    }
    .mv-txt-box.left .ws-text {
        bottom: 0;
    }
    .mv-txt-box .ws-text span {
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 2.8em;
        color: #fff;
        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;
        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: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        max-height: 955px;
        aspect-ratio: 375 / 530;
        background: var(--color-theme);
    }
    #about .about-box {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        margin: 0;
        padding: 0;
        width: var(--content-width-sp);
        color: #fff;
    }
    #about .about-box .txt {
        margin: 0;
        padding: 0;
        font-size: 4.4vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 63 / 36 );
        letter-spacing: 0.04em;
    }
    #about .about-box .txt .big {
        display: inline;
        font-size: 7.2vw;
        line-height: calc( 86 / 64 );
    }
    #about .about-box .txt .middle {
        display: inline;
        font-size: 5.2vw;
        line-height: calc( 84 / 48 );
    }
    #about .about-box .txt + .txt {
        margin-top: 0.5em;
    }
    #about .about-box .txt:nth-child(2) {
        margin-top: 1.0em;
    }
    #about .about-box .txt:nth-child(3) {
        margin-top: 1.0em;
    }
    #about .about-box .txt span {
        opacity: 0.2;
        transition: opacity 0.3s;
    }
    #about .about-box .txt span.appear {
        opacity: 1.0;
    }
    #about .about-box .about-btns {
        margin: 8.0vw auto 0;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4.0vw 0;
    }
    #about .about-box .about-btns .about-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 343 / 56;
        font-size: 4.0vw;
        font-weight: 700;
        border-radius: 1.0vw;
        transition: color 0.3s ease-out, border 0.3s ease-out, background 0.3s ease-out;
    }
    #about .about-box .about-btns .about-btn::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        right: 1.0em;
        display: block;
        width: 1.0em;
        height: auto;
        aspect-ratio: 20 / 18;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        transition: background 0.3s ease-out;
    }

    #reason {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
        background: #fff;
        overflow-x: hidden;
    }
    #reason > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-sp);
        max-width: 1160px;
        color: #edf6ff;
        font-size: 20.0vw;
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #reason > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: 6.4vw;
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.3;
        letter-spacing: 0.04em;
    }
    #reason > p {
        margin: 1.0em auto 0;
        width: var(--content-width-sp);
        font-size: 3.75vw;
        font-weight: 500;
        text-align: left;
        line-height: calc( 36 / 18 );
    }
    #reason-parallax-wrap {
        margin: 8.0vw 0 0;
        overflow: hidden;
    }
    #reason-parallax {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: flex-start;
        width: calc( 224px * 7 + 40px * 6 );
        height: 295px;
        gap: 0;
        will-change: transform;
    }
    #reason-parallax .reason-item {
        position: relative;
        display: block;
        margin: 0 20px;
        padding: 20px;
        width: 224px;
        height: auto;
        aspect-ratio: 224 / 295;
        flex: 0 0 224px;
        background: #fff;
        border: 1px solid #333;
        border-radius: 2.0vw;
        cursor: pointer;
        transition: background 0.3s ease-out;
    }
    #reason-parallax .reason-item::after {
        position: absolute;
        content: "";
        bottom: 20px;
        right: 20px;
        display: block;
        width: 20px;
        height: auto;
        aspect-ratio: 20 / 18;
        background: var(--color-theme);
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    #reason-parallax .reason-item .reason-head {
        position: relative;
        margin: 0;
        padding: 10px;
        width: 100%;
        height: auto;
        aspect-ratio: 184 / 115;
        background: var(--color-theme);
        border-radius: 2.0vw;
        transition: background 0.3s ease-out;
    }
    #reason-parallax .reason-item .reason-head span {
        margin: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
        transition: color 0.3s ease-out;
    }
    #reason-parallax .reason-item .reason-head .icon {
        position: absolute;
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        background: #fff;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    #reason-parallax .reason-item:nth-child(1) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon01.svg);
        mask-image: url(../images/top-reason-icon01.svg);
    }
    #reason-parallax .reason-item:nth-child(2) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon02.svg);
        mask-image: url(../images/top-reason-icon02.svg);
    }
    #reason-parallax .reason-item:nth-child(3) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon03.svg);
        mask-image: url(../images/top-reason-icon03.svg);
    }
    #reason-parallax .reason-item:nth-child(4) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon04.svg);
        mask-image: url(../images/top-reason-icon04.svg);
    }
    #reason-parallax .reason-item:nth-child(5) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon05.svg);
        mask-image: url(../images/top-reason-icon05.svg);
    }
    #reason-parallax .reason-item:nth-child(6) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon06.svg);
        mask-image: url(../images/top-reason-icon06.svg);
    }
    #reason-parallax .reason-item .reason-head figure {
        position: absolute;
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
    }
    #reason-parallax .reason-item .reason-head figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #reason-parallax .reason-item p {
        margin: 0.5em auto 0;
        width: 100%;
        color: var(--color-theme);
        font-size: 18px;
        font-weight: 700;
        line-height: calc( 48 / 32 );
        transition: color 0.3s ease-out;
    }
    #reason-parallax .reason-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 20px;
        padding: 0 1.5em;
        width: 224x;
        height: auto;
        aspect-ratio: 416 / 77;
        flex: 0 0 224px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-align: left;
        background: var(--color-theme);
        border-radius: 8px;
        align-self: end;
        cursor: pointer;
    }
    #reason-parallax .reason-btn::after {
        content: "";
        display: block;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #reason-parallax .reason-item:hover {
            background: var(--color-theme);
        }
        #reason-parallax .reason-item:hover::after {
            background: #fff;
        }
        #reason-parallax .reason-item:hover .reason-head {
            background: #fff;
        }
        #reason-parallax .reason-item:hover .reason-head span {
            color: var(--color-theme);
        }
        #reason-parallax .reason-item:hover .reason-head .icon {
            background: var(--color-theme);
        }
        #reason-parallax .reason-item:hover .reason-head figure img {
        }
        #reason-parallax .reason-item:hover p {
            color: #fff;
        }
    }

    #service {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #service .service-pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 232;
    }
    #service .service-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #service .service-info {
        position: relative;
        margin: 0;
        padding: 12.0vw 0;
        width: 100%;
        background: var(--color-theme);
    }
    #service .service-info .service-wrap {
        margin: 0 auto;
        padding: 0;
        width: var(--content-width-sp);
        height: auto;
        background: var(--color-theme);
    }
    #service .service-info .service-wrap > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-sp);
        color: #329dfd;
        font-size: 20.0vw;
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #service .service-info .service-wrap > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: #fff;
        font-size: 6.0vw;
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #service .service-info .service-wrap > p {
        margin: 1.0em auto 0;
        width: 100%;
        color: #fff;
        font-size: 3.75vw;
        font-weight: 700;
        text-align: center;
        line-height: calc( 31.5 / 18 );
    }
    #service .service-info .service-wrap > .service-box {
        margin: 8.0vw auto 0;
        padding: 4.0vw;
        width: 100%;
        border: 1px solid #fff;
        border-radius: 2.0vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #service .service-info .service-wrap > .service-box + .service-box {
        margin-top: 4.0vw;
    }
    #service .service-info .service-wrap > .service-box .icon {
        position: relative;
        width: 20%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        border-radius: 2.0vw;
    }
    #service .service-info .service-wrap > .service-box .icon img {
        position: absolute;
        display: block;
        top: 20%;
        left: 20%;
        margin: auto;
        width: 60%;
        height: 60%;
        object-position: center;
        object-fit: contain;
    }
    #service .service-info .service-wrap > .service-box h3 {
        margin: 0;
        width: calc( 80% - 15px );
        color: #fff;
        font-size: 4.3vw;
        font-weight: 700;
        text-align: left;
        line-height: calc( 33 / 22 );
    }
    #service .service-info .service-wrap > .service-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 8.0vw auto 0;
        padding: 4.0vw;
        width: 100%;
        height: auto;
        aspect-ratio: 528 / 77;
        border-radius: 2.0vw;
        color: var(--color-theme);
        font-size: 4.0vw;
        font-weight: 700;
        background: #fff;
        transition: color 0.3s ease-out, border 0.3s ease-out, background 0.3s ease-out;
    }
    #service .service-info .service-wrap > .service-btn::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        right: 1.5em;
        display: block;
        width: 1.0em;
        height: auto;
        aspect-ratio: 20 / 18;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        transition: background 0.3s ease-out;
    }

    #hint {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
        background: #fff;
    }
    #hint > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-sp);
        color: #edf6ff;
        font-size: 20.0vw;
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #hint > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: 6.0vw;
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #hint > p {
        margin: 1.0em auto 0;
        width: 100%;
        font-size: 3.75vw;
        font-weight: 500;
        text-align: center;
        line-height: calc( 36 / 18 );
    }
    #hint-parallax-wrap {
        margin: 100px 0 0;
        overflow: hidden;
    }
    #hint > .hint-grid {
        display: none;
    }
    #hint > #hint-slider {
        position: relative;
        margin: 0 auto;
        padding: 8.0vw 0 14.0vw;
        width: var(--content-width-sp);
        overflow: hidden;
    }
    #hint > #hint-slider .swiper-slide {
        transition: opacity 0.2s 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-slide 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 .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.2s 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: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        scale: -1.0 1.0;
        transition: all 0.3s ease-out;
    }
    #hint > #hint-slider .swiper-button-prev::after {
        content: none;
    }
    #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: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: all 0.3s ease-out;
    }
    #hint > #hint-slider .swiper-button-next::after {
        content: none;
    }
    #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-next:hover {
            background: #fff;
        }
    }
    #hint > .hint-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0 20px;
        padding: 0 1.5em;
        margin: 8.0vw auto 0;
        width: var(--content-width-sp);
        height: auto;
        aspect-ratio: 440 / 77;
        font-size: 4.0vw;
        font-weight: 700;
        border-radius: 2.0vw;
    }
    #hint > .hint-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    #news {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
        background: #f5faff;
    }
    #news > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-sp);
        color: #eaf3fc;
        font-size: 20.0vw;
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #news > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: 6.0vw;
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #news > .news-items {
        margin: 8.0vw auto 0;
        width: var(--content-width-sp);
    }
    #news > .news-items .news-item {
        display: block;
        margin: 0;
        padding: 4.0vw 0;
        width: 100%;
        border-bottom: 1px solid #d2dbea;
    }
    #news > .news-items .news-item .date {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 3.75vw;
        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.75vw;
        font-weight: 500;
        text-align: left;
    }
    #news > .news-items .news-item .title a{
      text-decoration: underline;
    }
    #news > .news-items .news-item:first-child {
        border-top: 1px solid #d2dbea;
    }
    #news > .news-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0 auto;
        padding: 0 1.5em;
        margin: 8.0vw auto 0;
        width: var(--content-width-sp);
        height: auto;
        aspect-ratio: 440 / 77;
        font-size: 4.0vw;
        font-weight: 700;
        border-radius: 2.0vw;
    }
    #news > .news-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    #recruit {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #recruit .recruit-pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 375 / 232;
        order: 2;
    }
    #recruit .recruit-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #recruit .recruit-info {
        margin: 0;
        padding: 12.0vw 0;
        width: 100%;
        background: var(--color-theme);
        order: 1;
    }
    #recruit .recruit-info .recruit-wrap {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        background: var(--color-theme);
    }
    #recruit .recruit-info .recruit-wrap .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-sp);
        color: #329dfd;
        font-size: 20.0vw;
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #recruit .recruit-info .recruit-wrap .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: #fff;
        font-size: 6.0vw;
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #recruit .recruit-info .recruit-wrap p {
        margin: 1.0em auto 0;
        width: 100%;
        color: #fff;
        font-size: 5.3vw;
        font-weight: 800;
        text-align: center;
        line-height: calc( 57.6 / 40 );
    }
    #recruit .recruit-info .recruit-wrap .recruit-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0;
        margin: 8.0vw auto 0;
        width: var(--content-width-sp);
        height: auto;
        aspect-ratio: 440 / 77;
        font-size: 4.0vw;
        font-weight: 700;
        border-radius: 8px;
    }
    #recruit .recruit-info .recruit-wrap .recruit-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    #other {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
        background: #fff;
    }
    #other > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-sp);
        color: #eaf3fc;
        font-size: 20.0vw;
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #other > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: 6.0vw;
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #other > .other-slider-wrap {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: var(--content-width-sp);
    }
    #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 {
        display:block;
        transition: opacity 0.2s ease-out;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 366;
    }
    #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.2s 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: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        scale: -1.0 1.0;
        transition: all 0.3s ease-out;
    }
    #other > .other-slider-wrap .swiper-button-prev::after {
        content: none;
    }
    #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: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: all 0.3s ease-out;
    }
    #other > .other-slider-wrap .swiper-button-next::after {
        content: none;
    }
    #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 {
            background: var(--color-theme);
        }
        #other > .other-slider-wrap .swiper-button-next:hover {
            background: #fff;
        }
        #other > .other-slider-wrap .swiper-button-next:hover::before {
            background: var(--color-theme);
        }
    }

}


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

    #mv {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: calc( 100vh - 100vw * 88 / 1440 );
        max-height: calc( 100vw * 800 / 1440 );
        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.1%;
        height: 100%;
        overflow: hidden;
    }
    #mv .ws-slide .ws-pic-r {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 auto;
        padding: 0;
        width: 50.1%;
        height: 100%;
        overflow: hidden;
    }
    #mv .ws-slide img {
        display:block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 0 0;
        z-index: 1;
        /* transition: transform 1.0s ease-in-out; */
        transition: clip-path 1.0s ease-in-out;
    }
    #mv .ws-slide .ws-pic-l img {
        /* transform: translateX( -100% ); */
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
    #mv .ws-slide .ws-pic-r img {
        /* transform: translateX( +100% ); */
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    #mv .ws-slide.active .ws-pic-l img {
        z-index: 3;
        /* transform: translateX( 0 ); */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    #mv .ws-slide.active .ws-pic-r img {
        z-index: 3;
        /* transform: translateX( 0 ); */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    #mv .ws-slide.stay .ws-pic-l img {
        z-index: 2;
        /* transform: translateX( 0 ); */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    #mv .ws-slide.stay .ws-pic-r img {
        z-index: 2;
        /* transform: translateX( 0 ); */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    #mv #mv-main-txt {
        position: absolute;
        bottom: 40%;
        left: 50%;
        translate: -50% 0;
        width: 42%;
        max-width: calc( 100vw * 596 / 1440 );
        height: auto;
        overflow: hidden;
        z-index: 10;
        -webkit-mask-image: linear-gradient(#000 0 0);
        mask-image: linear-gradient(#000 0 0);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 0%;
        mask-size: 100% 0%;
    }
    #mv #mv-main-txt.active{
        animation: mask-reveal-y 0.8s ease-out forwards;
    }
   @keyframes mask-reveal-y {
     to {
       -webkit-mask-size: 100% 100%;
       mask-size: 100% 100%;
     }
   }
    #mv-txt-box-wrap {
        position: absolute;
        top: 65%;
        left: 50%;
        translate: -50% 0;
        margin: 0;
        padding: 0;
        width: calc( 10.5em + 10.5em + 4.5em );
        max-width: calc( 100vw * 596 / 1440 );
        height: 2.8em;
        color: #fff;
        font-size: clamp(10px, 1.6vw, 23px);
        opacity: 0.0;
        z-index: 20;
        transition: opacity 1.0s ease-out 0s;
    }
    #mv-txt-box-wrap.active {
        opacity: 1.0;
    }

    .mv-txt-box {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 10.5em;
        height: 2.8em;
        color: #fff;
        font-size: 1em;
        font-weight: 800;
        background: var(--color-theme);
        /*
          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: 2px solid #fff;
        */
        overflow: hidden;
        z-index: 10;
    }
    .mv-txt-box.left {
        top: 0;
        left: 0;
    }
    .mv-txt-box.right {
        top: 0;
        right: 0;
        background: #ff800f;
    }
    .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: 100%;
        color: #fff;
        font-size: 1em;
        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: 100%;
        height:2.8em;
        color: #fff;
        font-size: 1em;
        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: 1em;
        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: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        max-height: calc( 100vw * 955 / 1440 );
        aspect-ratio: 1440 / 955;
        background: var(--color-theme);
    }
    #about .about-box {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        margin: 0;
        padding: 0;
        width: var(--content-width-pc);
        color: #fff;
    }
    #about .about-box .txt {
        margin: 0;
        padding: 0;
        font-size: calc( 100vw * 36 / 1440 );
        font-weight: 700;
        text-align: center;
        line-height: calc( 63 / 36 );
        letter-spacing: 0.04em;
    }
    #about .about-box .txt .big {
        display: inline-block;
        font-size: calc( 100vw * 64 / 1440 );
        line-height: calc( 86 / 64 );
    }
    #about .about-box .txt .middle {
        display: inline-block;
        font-size: calc( 100vw * 48 / 1440 );
        line-height: calc( 84 / 48 );
    }
    #about .about-box .txt + .txt {
        margin-top: 0.5em;
    }
    #about .about-box .txt:nth-child(3) {
        margin-top: 1.0em;
    }
    #about .about-box .txt span {
        opacity: 0.2;
        transition: opacity 0.3s;
    }
    #about .about-box .txt span.appear {
        opacity: 1.0;
    }
    #about .about-box .about-btns {
        margin: calc( 100vw * 32 / 1440 ) 0 0;
        width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }
    #about .about-box .about-btns .about-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0;
        padding: 0;
        width: calc( 50% * 560 / 580 );
        height: auto;
        aspect-ratio: 560 / 104;
        font-size: calc( 100vw * 28 / 1440 );
        font-weight: 700;
        border-radius: 8px;
        transition: color 0.3s ease-out, border 0.3s ease-out, background 0.3s ease-out;
    }
    #about .about-box .about-btns .about-btn::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        right: 1.0em;
        display: block;
        width: 1.0em;
        height: auto;
        aspect-ratio: 20 / 18;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        transition: background 0.3s ease-out;
    }

    #reason {
        margin: 0 auto;
        padding: calc( 100vw * 80 / 1440 ) 0;
        width: 100%;
        background: #fff;
        border-radius: calc( 100vw * 64 / 1440 ) calc( 100vw * 64 / 1440 ) 0 0;
        overflow-x: hidden;
    }
    #reason > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
        color: #edf6ff;
        font-size: calc( 100vw * 200 / 1440 );
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #reason > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 100vw * 56 / 1440 );
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #reason > p {
        margin: 1.0em auto 0;
        width: 100%;
        font-size: calc( 100vw * 18 / 1440 );
        font-weight: 500;
        text-align: center;
        line-height: calc( 36 / 18 );
    }
    #reason-parallax-wrap {
        margin: calc( 100vw * 100 / 1440 ) 0 0;
        overflow: hidden;
    }
    #reason-parallax {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: flex-start;
        width: calc( ( 100vw * 416 / 1440 ) * 7 + ( 100vw * 40 / 1440 ) * 6 );
        height: calc( 100vw * 525 / 1440 );
        gap: 0;
        will-change: transform;
    }
    #reason-parallax .reason-item {
        position: relative;
        display: block;
        margin: 0 calc( 100vw * 20 / 1440 );
        padding: calc( 100vw * 48 / 1440 );
        width: calc( 100vw * 416 / 1440 );
        height: auto;
        aspect-ratio: 416 / 525;
        flex: 0 0 calc( 100vw * 416 / 1440 );
        background: #fff;
        border: 1px solid #333;
        border-radius: calc( 100vw * 8 / 1440 );
        cursor: pointer;
        transition: background 0.3s ease-out;
    }
    #reason-parallax .reason-item::after {
        position: absolute;
        content: "";
        bottom: calc( 100vw * 48 / 1440 );
        right: calc( 100vw * 48 / 1440 );
        display: block;
        width: calc( 100vw * 20 / 1440 );
        height: auto;
        aspect-ratio: 20 / 18;
        background: var(--color-theme);
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    #reason-parallax .reason-item .reason-head {
        position: relative;
        margin: 0;
        padding: calc( 100vw * 16 / 1440 );
        width: 100%;
        height: auto;
        aspect-ratio: 320 / 200;
        background: var(--color-theme);
        border-radius: calc( 100vw * 8 / 1440 );
        transition: background 0.3s ease-out;
    }
    #reason-parallax .reason-item .reason-head span {
        margin: 0;
        color: #fff;
        font-size: calc( 100vw * 40 / 1440 );
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: left;
        line-height: 1.0;
        transition: color 0.3s ease-out;
    }
    #reason-parallax .reason-item .reason-head .icon {
        position: absolute;
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        background: #fff;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    #reason-parallax .reason-item:nth-child(1) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon01.svg);
        mask-image: url(../images/top-reason-icon01.svg);
    }
    #reason-parallax .reason-item:nth-child(2) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon02.svg);
        mask-image: url(../images/top-reason-icon02.svg);
    }
    #reason-parallax .reason-item:nth-child(3) .reason-head .icon {
        width: 40%;
        top: 25%;
        left: 30%;
        -webkit-mask-image: url(../images/top-reason-icon03.svg);
        mask-image: url(../images/top-reason-icon03.svg);
    }
    #reason-parallax .reason-item:nth-child(4) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon04.svg);
        mask-image: url(../images/top-reason-icon04.svg);
    }
    #reason-parallax .reason-item:nth-child(5) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon05.svg);
        mask-image: url(../images/top-reason-icon05.svg);
    }
    #reason-parallax .reason-item:nth-child(6) .reason-head .icon {
        -webkit-mask-image: url(../images/top-reason-icon06.svg);
        mask-image: url(../images/top-reason-icon06.svg);
    }
    #reason-parallax .reason-item .reason-head figure {
        position: absolute;
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
    }
    #reason-parallax .reason-item .reason-head figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #reason-parallax .reason-item p {
        margin: 0.5em auto 0;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 100vw * 32 / 1440 );
        font-weight: 700;
        line-height: calc( 48 / 32 );
        transition: color 0.3s ease-out;
    }
    #reason-parallax .reason-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 calc( 100vw * 20 / 1440 );
        padding: 0 1.5em;
        width: calc( 100vw * 416 / 1440 );
        height: auto;
        aspect-ratio: 416 / 77;
        flex: 0 0 calc( 100vw * 416 / 1440 );
        color: #fff;
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        text-align: left;
        background: var(--color-theme);
        border-radius: calc( 100vw * 8 / 1440 );
        align-self: end;
        cursor: pointer;
    }
    #reason-parallax .reason-btn::after {
        content: "";
        display: block;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }
    @media ( hover: hover ) {
        #reason-parallax .reason-item:hover {
            background: var(--color-theme);
        }
        #reason-parallax .reason-item:hover::after {
            background: #fff;
        }
        #reason-parallax .reason-item:hover .reason-head {
            background: #fff;
        }
        #reason-parallax .reason-item:hover .reason-head span {
            color: var(--color-theme);
        }
        #reason-parallax .reason-item:hover .reason-head .icon {
            background: var(--color-theme);
        }
        #reason-parallax .reason-item:hover .reason-head figure img {
        }
        #reason-parallax .reason-item:hover p {
            color: #fff;
        }
    }

    #service {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 1032;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }
    #service .service-pic {
        margin: 0;
        padding: 0;
        width: 50%;
        height: 100%;
    }
    #service .service-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #service .service-info {
        position: relative;
        margin: 0;
        padding: 0;
        width: 50%;
        height: 100%;
        background: var(--color-theme);
        overflow: hidden;
    }
    #service .service-info .service-wrap {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
        margin: 0;
        padding: 0 calc( 100vw * 60 / 1440 ) 0 calc( 100vw * 60 / 1440 );
        width: 100%;
        height: auto;
        background: var(--color-theme);
    }
    #service .service-info .service-wrap > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
        color: #329dfd;
        font-size: calc( 100vw * 160 / 1440 );
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #service .service-info .service-wrap > .title-area span{
        position: relative;
        left: -.3em;
    }
    #service .service-info .service-wrap > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: #fff;
        font-size: calc( 100vw * 56 / 1440 );
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #service .service-info .service-wrap > p {
        margin: 1.0em 0 0;
        width: 100%;
        color: #fff;
        font-size: calc( 100vw * 18 / 1440 );
        font-weight: 700;
        text-align: center;
        line-height: calc( 31.5 / 18 );
    }
    #service .service-info .service-wrap > .service-box {
        margin: calc( 100vw * 40 / 1440 ) auto 0;
        padding: calc( 100vw * 16 / 1440 );
        width: 100%;
        max-width: calc( 100vw * 500 / 1440 );
        border: 1px solid #fff;
        border-radius: calc( 100vw * 8 / 1440 );
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #service .service-info .service-wrap > .service-box + .service-box {
        margin-top: calc( 100vw * 16 / 1440 );
    }
    #service .service-info .service-wrap > .service-box .icon {
        position: relative;
        width: 20%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #service .service-info .service-wrap > .service-box .icon img {
        position: absolute;
        display: block;
        top: 20%;
        left: 20%;
        margin: auto;
        width: 60%;
        height: 60%;
        object-position: center;
        object-fit: contain;
    }
    #service .service-info .service-wrap > .service-box h3 {
        margin: 0;
        width: calc( 80% - ( 100vw * 15 / 1440 ) );
        color: #fff;
        font-size: calc( 100vw * 22 / 1440 );
        font-weight: 700;
        text-align: left;
        line-height: calc( 33 / 22 );
    }
    #service .service-info .service-wrap > .service-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: calc( 100vw * 40 / 1440 ) auto 0;
        padding: calc( 100vw * 16 / 1440 );
        width: 100%;
        max-width: calc( 100vw * 500 / 1440 );
        height: auto;
        aspect-ratio: 528 / 77;
        border-radius: calc( 100vw * 8 / 1440 );
        color: var(--color-theme);
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        background: #fff;
        transition: color 0.3s ease-out, border 0.3s ease-out, background 0.3s ease-out;
    }
    #service .service-info .service-wrap > .service-btn::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        right: 1.5em;
        display: block;
        width: 1.0em;
        height: auto;
        aspect-ratio: 20 / 18;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        transition: background 0.3s ease-out;
    }

    #hint {
        margin: 0 auto;
        padding: calc( 100vw * 96 / 1440 ) 0;
        width: 100%;
        background: #fff;
    }
    #hint > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
        color: #edf6ff;
        font-size: calc( 100vw * 200 / 1440 );
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #hint > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 100vw * 56 / 1440 );
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #hint > p {
        margin: 1.0em auto 0;
        width: 100%;
        font-size: calc( 100vw * 18 / 1440 );
        font-weight: 500;
        text-align: center;
        line-height: calc( 36 / 18 );
    }
    #hint-parallax-wrap {
        margin: calc( 100vw * 100 / 1440 ) 0 0;
        overflow: hidden;
    }
    #hint > .hint-grid {
        margin: calc( 100vw * 40 / 1440 ) auto 0;
        width: var(--content-width-pc);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0 calc( 100vw * 20 / 1440 );
    }
    #hint > .hint-grid .hint-item {
        margin: 0;
        padding: 0;
        width: 100%;
        transition: color 0.2s ease-out, opacity 0.2s ease-out;
    }
    #hint > .hint-grid .swiper-slide h3::after {
        content: "";
        display: inline-block;
        width: 1.5em;
        height: 0.8em;
        position: absolute;
        bottom: 0.3em;
        background: url(../images/icon-window.svg) no-repeat center / contain;
    }
    @media ( hover: hover ) {
        #hint > .hint-grid .hint-item:hover {
            opacity:0.6;
        }
    }
    #hint > .hint-grid .hint-item.disabled,
    #hint > .hint-grid .swiper-slide.disabled{
      cursor: default;
      pointer-events: none;
    }
    #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: calc( 100vw * 8 / 1440 );
    }
    #hint > .hint-grid .hint-item h3 {
        margin: 0.8em 0 0;
        font-size: calc( 100vw * 20 / 1440 );
        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 > .hint-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0 calc( 100vw * 20 / 1440 );
        padding: 0 1.5em;
        margin: calc( 100vw * 60 / 1440 ) auto 0;
        width: var(--content-width-pc);
        max-width: calc( 100vw * 440 / 1440 );
        height: auto;
        aspect-ratio: 440 / 77;
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #hint > .hint-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    #news {
        margin: 0 auto;
        padding: calc( 100vw * 96 / 1440 ) 0;
        width: 100%;
        background: #f5faff;
    }
    #news > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
        color: #eaf3fc;
        font-size: calc( 100vw * 200 / 1440 );
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #news > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 100vw * 56 / 1440 );
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #news > .news-items {
        margin: calc( 100vw * 60 / 1440 ) auto 0;
        width: var(--content-width-pc);
    }
    #news > .news-items .news-item {
        display: block;
        margin: 0;
        padding: calc( 100vw * 30 / 1440 ) 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: calc( 100vw * 80 / 1440 );
        font-size: calc( 100vw * 16 / 1440 );
        font-weight: 500;
        font-family: var(--font-alphabet);
        text-align: left;
    }
    #news > .news-items .news-item .title {
        margin: 0;
        padding: 0;
        width: calc( 100% - ( 100vw * 80 / 1440 ) );
        font-size: calc( 100vw * 16 / 1440 );
        font-weight: 500;
        text-align: left;
    }
    #news > .news-items .news-item .title a{
      text-decoration: underline;
    }
    #news > .news-items .news-item:first-child {
        border-top: 1px solid #d2dbea;
    }
    #news > .common-btn {
        margin: calc( 100vw * 40 / 1440 ) calc( 50.0vw - ( 100vw * 1160 / 1440 ) * 0.5 ) 0 auto;
    }
    #news > .news-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0 calc( 100vw * 20 / 1440 );
        padding: 0 1.5em;
        margin: calc( 100vw * 60 / 1440 ) auto 0;
        width: var(--content-width-pc);
        max-width: calc( 100vw * 440 / 1440 );
        height: auto;
        aspect-ratio: 440 / 77;
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #news > .news-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    #recruit {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 618;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }
    #recruit .recruit-pic {
        margin: 0;
        padding: 0;
        width: 50%;
        height: 100%;
    }
    #recruit .recruit-pic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #recruit .recruit-info {
        position: relative;
        margin: 0;
        padding: 0;
        width: 50%;
        height: 100%;
        background: var(--color-theme);
        overflow: hidden;
    }
    #recruit .recruit-info .recruit-wrap {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
        margin: 0;
        padding: 0 calc( 100vw * 60 / 1440 ) 0 calc( 100vw * 60 / 1440 );
        width: 100%;
        height: auto;
        background: var(--color-theme);
    }
    #recruit .recruit-info .recruit-wrap .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
        color: #329dfd;
        font-size: calc( 100vw * 160 / 1440 );
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #recruit .recruit-info .recruit-wrap .title-area span{
        position: relative;
        left: -.35em;
    }
    #recruit .recruit-info .recruit-wrap .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: #fff;
        font-size: calc( 100vw * 56 / 1440 );
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #recruit .recruit-info .recruit-wrap p {
        margin: 1.0em auto 0;
        width: 100%;
        color: #fff;
        font-size: calc( 100vw * 40 / 1440 );
        font-weight: 800;
        text-align: center;
        line-height: calc( 57.6 / 40 );
    }
    #recruit .recruit-info .recruit-wrap .recruit-btn {
        position: relative;
        display: grid;
        place-items: center;
        margin: 0 calc( 100vw * 20 / 1440 );
        padding: 0 1.5em;
        margin: calc( 100vw * 60 / 1440 )  auto 0;
        width: var(--content-width-pc);
        max-width: calc( 100vw * 440 / 1440 );
        height: auto;
        aspect-ratio: 440 / 77;
        font-size: calc( 100vw * 20 / 1440 );
        font-weight: 700;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #recruit .recruit-info .recruit-wrap .recruit-btn::after {
        position: absolute;
        content: "";
        display: block;
        top: calc( 50% - 0.5em );
        right: 1.5em;
        width: 1.2em;
        height: 1.0em;
        aspect-ratio: 20 / 18;
        background: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: background 0.3s ease-out;
    }

    #other {
        margin: 0 auto;
        padding: calc( 100vw * 96 / 1440 ) 0;
        width: 100%;
        background: #fff;
    }
    #other > .title-area {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
        color: #eaf3fc;
        font-size: calc( 100vw * 200 / 1440 );
        font-weight: 500;
        font-style: italic;
        font-family: var(--font-alphabet);
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0;
    }
    #other > .title-area h2 {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -40%;
        width: 100%;
        color: var(--color-theme);
        font-size: calc( 100vw * 56 / 1440 );
        font-weight: 800;
        font-style: normal;
        text-align: center;
        line-height: 1.0;
        letter-spacing: 0.04em;
    }
    #other > .other-slider-wrap {
        position: relative;
        margin: 0 auto;
        width: var(--content-width-pc);
    }
    #other > .other-slider-wrap #other-slider {
        position: relative;
        margin: 0;
        padding: calc( 100vw * 60 / 1440 ) 0;
        width: 100%;
        overflow: hidden;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide {
        display:block;
        transition: opacity 0.2s ease-out;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide figure {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 720 / 366;
    }
    #other > .other-slider-wrap #other-slider .swiper-slide figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: calc( 100vw * 8 / 1440 );
    }
    #other > .other-slider-wrap .swiper-pagination-bullet {
        width: calc( 100vw * 12 / 1440 );
        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: 50%;
        left: -4.5em;
        bottom: auto;
        right: auto;
        width:clamp(1vw, 4vw, 3em);
        height: auto;
        aspect-ratio: 1 / 1;
        transform: translateY(-50%);
        background: var(--color-theme);
        border: 1px solid var(--color-theme);
        border-radius: calc( 100vw * 8 / 1440 );
        transition: all 0.2s ease-out;
        overflow: hidden;
        @media screen and ( max-width: 1340px ) {
            left:-4.5vw;
        }
    }
    #other > .other-slider-wrap .swiper-button-next {
        left: auto;
        right: -4.5em;
        @media screen and ( max-width: 1340px ) {
            right: -4.5vw;
        }
    }
    #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: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        scale: -1.0 1.0;
        transition: all 0.3s ease-out;
    }
    #other > .other-slider-wrap .swiper-button-prev::after {
        content: none;
    }
    #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: #fff;
        -webkit-mask-image: url(../images/icon-arrow-white.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-image: url(../images/icon-arrow-white.svg);
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        transition: all 0.3s ease-out;
    }
    #other > .other-slider-wrap .swiper-button-next::after {
        content: none;
    }
    #other > .other-slider-wrap .swiper-button-disabled {
        background: #999;
        border: 1px solid #999;
    }
    #other > .other-slider-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: var(--color-theme);
    }
    @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 {
            background: var(--color-theme);
        }
        #other > .other-slider-wrap .swiper-button-next:hover {
            background: #fff;
        }
        #other > .other-slider-wrap .swiper-button-next:hover::before {
            background: var(--color-theme);
        }
    }

}