@charset "utf-8";


/* ===============================================
# loading
=============================================== */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,1);
    z-index: 10000;
    opacity: 1;
}

.opening__img {
    position: relative;
    display: block;
    width: 100%;
    height: 100svh;
    opacity: 1;
}

/* .opening__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.opening__first {
    position: relative;
    z-index: 10001;
    opacity: 0;
}

.opening__second {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10002;
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: translateY(-50%);
    width: 100vw;
    height: 100svh;
}

.opening__third {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10003;
    opacity: 0;
    transform: translateY(-50%);
    width: 100vw;
    height: 100svh;
}

.opening__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 309rem;
}

.opening__spray {
    /* width: 100%; */
    height: 100%;
    /* -o-object-fit: cover;
       object-fit: cover; */
}

@media screen and (max-width: 768px) {
    .opening__logo {
        width: 400rem;
    }
}


/* ===============================================
# mv
=============================================== */
.mv {
    padding-top: 50rem;
    text-align: center;
    background: var(--wh);
}

.mv__copy {
    width: 1021rem;
    margin-bottom: 14rem;
}

.mv__movieBox {
    width: 1200rem;
    margin-inline: auto;
    border-radius: 24rem;
}

.mv__movie {
    width: 100%;
    height: 100%;
    border-radius: 24rem;  
    vertical-align: bottom;
}

@media screen and (max-width: 768px) {
    .mv {
        padding-top: 60rem;
        text-align: left;
    }

    .mv__copy {
        width: 100%;
        padding-inline: 57rem;
        margin-bottom: 60rem;
    }

    .mv__movieBox {
        width: 670rem;
        aspect-ratio: 375 / 680;
    }

    .mv__movie {
        border-radius: 49rem;
        -o-object-fit: cover;
           object-fit: cover;
    }
}



/* ===============================================
# reason
=============================================== */

/* .reason {
    padding-top: 200rem;
} */

.reason .container {
    position: relative;
    max-width: 1000rem;
}

.reason .section__title {
    color: var(--wh);
    margin-bottom: 80rem;
    z-index: 2;
}

.reason__listWrap {
    position: relative;
    padding-top: 56rem;
    padding-bottom: 80rem;
    /* height: 400rem; */
    /* overflow: hidden; */
    opacity: 0;
}

/* .reason__listWrap::before,
.reason__listWrap::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
}

.reason__listWrap::before {
    top: 0;
    height: calc(50rem - 100vw * 0.0085);
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
}

.reason__listWrap::after {
    bottom: 0;
    height: calc(50rem - 100vw * 0.0085);
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.6) 70%, rgba(255,255,255,0));
} */

.reason__bg {
    position: absolute;
    /* bottom: 30rem; */
    /* bottom: 0;
    right: -166rem; */
    top: 50%;
    left: 0;
    right: 0;
    margin-inline: auto;
    transform: translateY(-50%);
    width: 584rem;
    opacity: 0;
    z-index: -1;
}

.reason__list {
    position: relative;
    width: 100%;
    counter-reset: reason;
    transform: translateY(0);
}

.reason__list li {
    position: relative;
    padding-left: 120rem;
    margin-bottom: 48rem;
    font-size: 40rem;
    font-weight: 900;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.reason__list li:last-child {
    margin-bottom: 0;
}

.reason__list li::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80rem;
    height: 80rem;
    padding-top: 8rem;
    border-radius: 50%;
    counter-increment: reason;
    content: counter(reason);
    background: var(--gradation);
    color: var(--wh);
    font-family: var(--akshar);
    font-size: 36rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    z-index: 2;
    transform: translateY(-50%);
}

.reason__list li .marker {
    position: relative;
}

.reason__list li .marker::before {
    content: "";
    position: absolute;
    bottom: 12rem;
    left: 0;
    width: 100%;
    height: 10rem;
    background: var(--underline);
    border-radius: 8rem;
    z-index: -1;
    /* opacity: 0.5; */
}

@media screen and (max-width: 768px) {
    .reason .section__title {
        margin-bottom: 115rem;
    }

    /* .reason__listWrap::before,
    .reason__listWrap::after {
        display: none;
    } */

    .reason__listWrap {
        height: auto;
        overflow: visible;
    }

    .reason__bg {
        /* position: fixed; */
        /* top: 50%;
        bottom: auto;
        left: 0;
        right: 0; */
        width: 656rem;
        /* margin-inline: auto; */
        /* transform: translateY(-50%); */
    }

    .reason__list li {
        padding-left: 120rem;
        margin-bottom: 74rem;
        font-size: 41rem;
    }
    
    .reason__list li::before {
        width: 82rem;
        height: 82rem;
        font-size: 41rem;
    }
    
    .reason__list li .marker {
        position: relative;
    }
    
    .reason__list li .marker::before {
        bottom: 5rem;
        height: 20rem;
        border-radius: 10rem;
    }
}


/* ===============================================
# work
=============================================== */
.work {
    background: var(--bg);
    color: var(--wh);
}

.work .spray {
    top: -18%;
}

.work .section__title {
    color: var(--bg);
}

.work__wrap {
    width: calc(100% + 120rem);
    overflow: hidden;
    opacity: 0;
}

.work__list {
    width: calc(270rem + 3px);
    margin-top: 106rem;
    margin-left: 0;
    padding-left: 3px;
    overflow: visible;
}

.work__list .swiper-slide {
    width: 270rem;
}

.work__list .swiper-slide:not(:last-child) {
    margin-right: 24rem;
}

.work__image {
    position: relative;
    border-radius: 16rem;
    transition: ease .5s;
    border: 2px solid var(--bg);
}


@media(hover: hover) {
    .work__list .swiper-slide:hover .work__image {
        border: 2px solid var(--main);
    }
}

.work__category {
    display: block;
    margin-top: 16rem;
    margin-bottom: 4rem;
    font-size: 10rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    transition: ease .5s;
    color: var(--gy);
}

.work__category.none {
    height: 14rem;
}

.work__name {
    font-weight: 700;
    font-size: 16rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    transition: ease .5s;
}


@media(hover: hover) {
    .work__list .swiper-slide:hover .work__category,
    .work__list .swiper-slide:hover .work__name {
        color: var(--main);
    }
}

.work__btns {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: calc(100% - 120rem);
    margin-top: 70rem;
    min-height: 70rem;
}

.work__prev,
.work__next {
    display: inline-block;
    width: 48rem;
    height: 48rem;
    margin-top: 0;
    border: 1px solid var(--gy2);
    border-radius: 50%;
    opacity: 1 !important;
    transition: .5s;
    transform: translateY(-50%);
}

.work__prev {
    left: 0;
}

.work__prev::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9rem;
    height: 14rem;
    background: url(../img/arrow-prev.svg) no-repeat center / contain;
    transition: .5s;
}

@media(hover: hover) {
    .work__prev:hover::before {
        left: 40%;
    }
}

.work__next {
    left: 68rem;
}

.work__next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9rem;
    height: 14rem;
    background: url(../img/arrow-next.svg) no-repeat center / contain;
    transition: .5s;
}

@media(hover: hover) {
    .work__next:hover::before {
        left: 60%;
    }
}

.work__prev::after,
.work__next::after {
    display: none;
}

.work__pagination {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    top: 50%;
    left: 150rem;
    bottom: auto;
    color: var(--bg);
    font-size: 0;
    transform: translateY(-50%);
}

.work__pagination .swiper-pagination-current,
.work__pagination .swiper-pagination-total {
    display: inline-block;
    font-family: var(--akshar);
    font-size: 14rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.work__pagination .swiper-pagination-current {
    position: relative;
    min-width: 135rem;
    padding-right: 117rem;
    color: var(--gy);
}

.work__pagination .swiper-pagination-current::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10rem;
    transform: translateY(-50%);
    width: 93rem;
    height: 1px;
    background: #666;
}

.work__pagination .swiper-pagination-total {
    color: var(--gy2);
}

.work__btns .btn {
    margin-left: auto;
}

@media screen and (max-width: 768px) {
    .work .spray {
        top: -50rem;
    }

    .work__wrap {
        width: calc(100% + 57rem);
    }

    .work__list {
        width: calc(558rem + 3px);
        margin-top: 131rem;
    }

    .work__list .swiper-slide {
        width: 558rem;
    }

    .work__list .swiper-slide:not(:last-child) {
        margin-right: 49rem;
    }

    .work__image {
        border-radius: 33rem;
    }

    .work__category {
        margin-top: 33rem;
        margin-bottom: 8rem;
        font-size: 21rem;
    }

    .work__category.none {
        height: 29rem;
    }

    .work__name {
        font-size: 33rem;
    }

    .work__btns {
        align-items: flex-end;
        justify-content: center;
        width: calc(100% - 57rem);
        margin-top: 94rem;
        min-height: 257rem;
    }
    
    .work__prev,
    .work__next {
        top: 0;
        width: 98rem;
        height: 98rem;
    }

    .work__prev::before,
    .work__next::before {
        width: 18rem;
        height: 28rem;
    }

    .work__next {
        left: 139rem;

    }

    .work__pagination {
        top: 0%;
        left: auto;
        right: 0;
    }
    
    .work__pagination .swiper-pagination-current,
    .work__pagination .swiper-pagination-total {
        font-size: 29rem;
    }
    
    .work__pagination .swiper-pagination-current {
        min-width: 277rem;
        padding-right: 240rem;
    }
    
    .work__pagination .swiper-pagination-current::after {
        right: 21rem;
        width: 191rem;
    }
}

/* ===============================================
# technology
=============================================== */
.technology {
    background: var(--wh);
}

.technology .section__title {
    color: var(--wh);
}

.technology__list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 120rem;
    opacity: 0;
}

.technology__list li {
    position: relative;
    width: calc((100% - 64rem * 2) / 3);
    margin-bottom: 64rem;
}

.technology__list li::before {
    content: attr(data-sub);
    position: absolute;
    top: 0;
    left: -24rem;
    font-family: var(--akshar);
    font-size: 16rem;
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 600;
    background: var(--gradation);
    color: var(--main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
}

.technology__list li:nth-last-of-type(-n+3) {
    margin-bottom: 64rem;
}

.technology__img {
    margin-bottom: 20rem;
    border-radius: 12rem;
}

.technology__subTitle {
    font-size: 20rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.08em;
    margin-bottom: 12rem;
}

@media screen and (max-width: 768px) {
    .technology__list {
        display: block;
        margin-top: 131rem;
    }

    .technology__list li {
        width: calc(100% - 49rem);
        margin-bottom: 98rem;
        margin-left: auto;
    }

    .technology__list li:last-child {
        margin-bottom: 0;
    }

    .technology__list li::before {
        left: -49rem;
        font-size: 33rem;
    }

    .technology__img {
        margin-bottom: 41rem;
        border-radius: 25rem;
    }

    .technology__subTitle {
        font-size: 41rem;
        margin-bottom: 25rem;
    }
}

/* ===============================================
# news
=============================================== */
.news {
    padding-top: 120rem;
    padding-bottom: 80rem;
    background: var(--gy);
}

.news .container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.news .section__title {
    flex-shrink: 0;
    margin-right: 238rem;
}

.news__listWrap {
    flex-grow: 1;
}

.news__list {
    margin-bottom: 48rem;
}

.news__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    padding: 24rem 64rem 32rem 0;
    border-bottom: 1px solid var(--gy2);
}

.news__item:hover {
    color: var(--txt);
}

.news__list li:first-child .news__item {
    border-top: 1px solid var(--gy2);
}

.news__item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
    width: 32rem;
    height: 32rem;
    background: url(../img/arrow-wh-bk.svg) no-repeat center / contain;
    transition: .3s ease-out;
}


@media(hover: hover) {
    .news__item:hover::after {
        background: url(../img/arrow-og.svg) no-repeat center / contain;
    }
}

.news__item[target="_blank"]::after {
    background: url(../img/arrow-wh-bk-diagonal.svg) no-repeat center / contain;
}


@media(hover: hover) {
    .news__item[target="_blank"]:hover::after {
        background: url(../img/arrow-og-diagonal.svg) no-repeat center / contain;
    }
}

.news__item[href="javascript:void(0);"] {
    cursor: default;
}

.news__item[href="javascript:void(0);"]::after {
    display: none;
}

.news__date {
    font-family: var(--akshar);
    font-size: 12rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    flex-shrink: 0;
    margin-top: 10rem;
}

.news__category {
    color: var(--main);
    font-size: 10rem;
    font-weight: 500;
    line-height: 1.4;
    margin-left: 24rem;
    padding: 4rem 10rem;
    border: 1px solid var(--main);
    border-radius: 11rem;
    flex-shrink: 0;
    margin-top: 6rem;
    text-align: center;
}

.news__title {
    margin-top: 4rem;
    margin-left: 74rem;
}

.news .btn {
    margin-left: auto;
}

@media screen and (max-width: 768px) {
    .news {
        padding-top: 164rem;
        padding-bottom: 131rem;
    }
    
    .news .container {
        display: block;
    }
    
    .news .section__title {
        margin-right: 0;
    }
    
    .news__list {
        margin-top: 82rem;
        margin-bottom: 98rem;
    }
    
    .news__item {
        flex-wrap: wrap;
        padding: 49rem 131rem 66rem 0;
    }
    
    .news__item::after {
        right: 8rem;
        width: 66rem;
        height: 66rem;
    }
    
    .news__date {
        font-size: 25rem;
        margin-top: 21rem;
    }
    
    .news__category {
        font-size: 21rem;
        font-weight: 600;
        margin-left: 49rem;
        padding: 8rem 21rem;
        border-radius: 23rem;
        margin-top: 12rem;
    }
    
    .news__title {
        width: 100%;
        margin-top: 49rem;
        margin-left: 0;
    }
    
    .news .btn {
        margin-right: auto;
    }
}


/* ===============================================
# contact
=============================================== */
.contact {
    position: relative;
    padding-block: 305rem;
    transition: .3s ease-out;
    pointer-events: none;
}

.contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradation);
    transition: .3s ease-out;
    z-index: 1;
}

.contact:hover::before {
    opacity: 0;
}

.contact__wrap {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    pointer-events: auto;
    z-index: 2;
}

.contact .section__title {
    font-size: 24rem;
    color: var(--wh);
    margin-right: 335rem;
}

.contact__arrow {
    width: 160rem;
}

.contact__arrow rect,
.contact__arrow path {
    transition: .3s ease-out;
}

.contact__wrap:hover .contact__arrow rect {
    fill: var(--main)
}

.contact__wrap:hover .contact__arrow path {
    fill: var(--wh)
}

.contact__movie {
    position: absolute;
    z-index: -1;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .contact {
        padding-top: 197rem;
        padding-bottom: 144rem;
    }
    
    .contact:hover::before {
        opacity: 1;
    }
    
    .contact__wrap {
        display: block;
        width: auto;
        text-align: center;
    }
    
    .contact .section__title {
        margin-right: 0;
        margin-bottom: 66rem;
        text-align: center;
    }
    
    .contact__arrow {
        width: 132rem;
        height: 132rem;
    }

    .contact__wrap:hover .contact__arrow rect {
        fill: var(--wh)
    }
    
    .contact__wrap:hover .contact__arrow path {
        fill: var(--main)
    }
    
    .contact__movie {
        display: none;
    }
}


/* ===============================================
# access
=============================================== */
.access {
    color: var(--wh);
    background: var(--txt);
}

.access .container {
    display: flex;
    justify-content: space-between;
}

.access__texts {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-shrink: 0;
}

.access__info address {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-block: 40rem;
    margin-bottom: 40rem;
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    font-size: 16rem;
    line-height: 1.8;
    letter-spacing: 0.12em;
    padding-right: 14rem;
}

.access__image {
    width: 792rem;
}

.access__image,
.access__image img {
    border-radius: 16rem;
}

@media screen and (max-width: 768px) {
    .access {
        padding-top: 197rem;
        padding-bottom: 144rem;
    }

    .access .container,
    .access__texts {
        display: block;
    }

    .access__info {
        margin-bottom: 82rem;
    }
    
    .access__info address {
        width: 100%;
        padding-block: 82rem;
        margin-bottom: 82rem;
        margin-top: 82rem;
        font-size: 33rem;
    }
    
    .access__image {
        width: 100%;
    }
    
    .access__image,
    .access__image img {
        border-radius: 25rem;
    }
}