@charset "utf-8";header {
    transition: .3s
}

header.on {
    background-color: var(--color--bg_gray)
}

header.on::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color--gray);
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: .3s
}

header.on::after {
    bottom: -1px;
    opacity: 1
}

#loading {
    width: 100%;
    height: 100vh;
    height: 100svh;
    background-color: var(--color--bg_gray);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000
}

#loading.loaded {
    background-color: rgba(240,240,239,1);
    backdrop-filter: blur(0);
    opacity: 1;
    animation-name: loading;
    animation-duration: 1.2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    pointer-events: none
}

@keyframes loading {
    0% {
        background-color: rgba(240,240,239,1);
        backdrop-filter: blur(0);
        opacity: 1
    }

    100% {
        background-color: rgba(240,240,239,0);
        backdrop-filter: blur(20px);
        opacity: 0
    }
}

.loading__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.loading__logo__wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    overflow: hidden
}

.loading__logo__wrap__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    position: relative;
    opacity: 1
}

.loaded .loading__logo__wrap__inner {
    backdrop-filter: blur(0);
    opacity: 1;
    animation-name: loaded__logo__wrap__inner;
    animation-duration: .8s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    pointer-events: none
}

@keyframes loaded__logo__wrap__inner {
    0% {
        opacity: 1;
        backdrop-filter: blur(0)
    }

    100% {
        backdrop-filter: blur(20px);
        opacity: 0
    }
}

.loading__logo__wrap__inner::after {
    content: '';
    display: block;
    width: 140%;
    height: 2px;
    background-color: var(--color--gray);
    position: absolute;
    bottom: 0;
    left: calc(50% - 1vw);
    transform: translate(-50%,0%);
    transform-origin: center center;
    animation-name: logo__letter__line;
    animation-duration: 2.4s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.83,0,.17,1);
    animation-fill-mode: forwards
}

@keyframes logo__letter__line {
    0% {
        transform: translate(-50%,0%) scale(0,1);
        transform-origin: center center
    }

    55% {
        transform: translate(-50%,0%) scale(1,1);
        transform-origin: center center
    }

    60% {
        transform: translate(-50%,0%) scale(1,1);
        opacity: 1;
        transform-origin: center right
    }

    100% {
        transform: translate(-50%,0%) scale(0,1);
        opacity: 0;
        transform-origin: center right
    }
}

.loading__logo__letter {
    width: auto;
    height: 34px
}

.loading__logo__letter:nth-of-type(1) {
    margin-right: 1.729175%
}

.loading__logo__letter:nth-of-type(2) {
    margin-right: 2.504323%
}

.loading__logo__letter:nth-of-type(3) {
    margin-right: 4.233498%
}

.loading__logo__letter:nth-of-type(4) {
    margin-right: 3.696858%
}

.loading__logo__letter:nth-of-type(5) {
    margin-right: 2.206189%
}

.loading__logo__letter:nth-of-type(6) {
    margin-right: 2.385069%
}

.loading__logo__letter img,.loading__logo__letter svg {
    width: auto;
    height: 100%;
    fill: var(--color--gray);
    transform: translate(-1vw,100%);
    opacity: 0;
    animation-name: logo__letter__color;
    animation-duration: 1.8s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.83,0,.17,1);
    animation-fill-mode: forwards
}

:root {
    --loading__logo__letter__delay: .4s
}

.loading__logo__letter:nth-of-type(1) svg {
    animation-delay: calc(var(--loading__logo__letter__delay) + 0s)
}

.loading__logo__letter:nth-of-type(2) svg {
    animation-delay: calc(var(--loading__logo__letter__delay) + .06s)
}

.loading__logo__letter:nth-of-type(3) svg {
    animation-delay: calc(var(--loading__logo__letter__delay) + .12s)
}

.loading__logo__letter:nth-of-type(4) svg {
    animation-delay: calc(var(--loading__logo__letter__delay) + .18s)
}

.loading__logo__letter:nth-of-type(5) svg {
    animation-delay: calc(var(--loading__logo__letter__delay) + .24s)
}

.loading__logo__letter:nth-of-type(6) svg {
    animation-delay: calc(var(--loading__logo__letter__delay) + .3s)
}

.loading__logo__letter:nth-of-type(7) svg {
    animation-delay: calc(var(--loading__logo__letter__delay) + .36s)
}

@keyframes logo__letter__color {
    0% {
        opacity: 0;
        transform: translate(-1vw,100%)
    }

    50% {
        opacity: 1;
        fill: var(--color--gray);
        transform: translate(-1vw,0%)
    }

    100% {
        opacity: 1;
        fill: var(--color--black);
        transform: translate(0%,0%)
    }
}

#hero {
    width: 100%;
    height: 100vh;
}

.hero__container {
    width: 100%;
    height: auto;
    padding: 0;
    position: relative
}

.hero__image {
    width: 100%;
    height: auto;
    margin: 0 auto
}

.hero__image__wrap {
    width: 100%;
    height: auto;
    overflow: hidden;
    will-change: padding;
}

#vegas {
    width: 100%;
    height: 100%;
    position: relative;
}
/*
.hero__swiper {
    width: 100%;
    height: 100%;
    transform: rotate(0.000001deg);
    will-change: padding,transform
}

.hero__swiper .swiper-wrapper {
    transform: rotate(0.000001deg);
    will-change: padding,transform
}

.hero__swiper .swiper-slide {
    width: 100%;
    height: 100%;
    transform: rotate(0.000001deg);
    will-change: padding,transform
}

.hero__swiper .swiper-slide.swiper-slide-prev .hero__swiper__slide,.hero__swiper .swiper-slide.swiper-slide-next .hero__swiper__slide,.hero__swiper .swiper-slide.swiper-slide-active .hero__swiper__slide {
    display: block
}

.hero__swiper__slide {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotate(0.000001deg);
    will-change: transform
}

.hero__swiper__slide._01 {
    background-image: url(../image/index/hero__image_01@pc.webp)
}

.hero__swiper__slide._02 {
    background-image: url(../image/index/hero__image_02@pc.webp)
}

.hero__swiper__slide._03 {
    background-image: url(../image/index/hero__image_03@pc.webp)
}

.hero__swiper__slide._04 {
    background-image: url(../image/index/hero__image_04@pc.webp)
}

.hero__swiper__slide._05 {
    background-image: url(../image/index/hero__image_05@pc.webp)
}

/*.hero__swiper__slide._06 {
    background-image: url(../image/index/hero__image_06@pc.webp)
}

.hero__swiper__slide._07 {
    background-image: url(../image/index/hero__image_07@pc.webp)
}*/

.hero__copy {
    width: 9.53125vw;
    max-width: 125px;
    height: auto;
    position: absolute;
    top: calc(8.625vh + 110px);
    right: calc(5.3125vw + 30px);
    z-index: 10;
    will-change: transform
}

.hero__copy svg {
    fill: var(--color--white)
}

#thoughts {
    width: 100%;
    height: auto
}

.thoughts__inner {
    width: 100%;
    height: auto;
    padding: 14.960938vw 0 16.40625vw;
    background-color: rgba(255,255,255,.68);
    backdrop-filter: blur(0);
    position: relative;
    z-index: 2;
    will-change: backdrop-filter
}

.thoughts__contents {
    width: auto;
    height: auto;
    margin-left: 15.15625vw
}

.thoughts__contents__sub_title {
    width: 100%;
    height: auto;
    margin: 6.09375vw 0 1.40625vw;
    font-size: var(--16px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .08em
}

.thoughts__contents__txt {
    width: 100%;
    height: auto;
    margin: 0 0 5.15625vw;
    font-size: var(--14px);
    font-weight: 300;
    line-height: 2.6;
    letter-spacing: .08em;
    color: var(--color--black);
    opacity: 0;
    transition: opacity .8s;
    transition-delay: opacity .44s
}

.run .thoughts__contents__txt {
    opacity: 1
}

.thoughts__contents__txt strong {
    font-weight: 400
}

.thoughts__contents__btn_wrap {
    width: auto;
    height: auto;
    opacity: 0;
    transition: opacity .8s;
    transition-delay: opacity .64s
}

.run .thoughts__contents__btn_wrap {
    opacity: 1
}

.thoughts__contents__btn {
    width: 19.53125vw;
    height: auto;
    padding: 0 0 1.328125vw;
    aspect-ratio: 250 / 46;
    border-bottom: solid 1px var(--color--black)
}

.thoughts__contents__btn svg {
    width: 2.1875vw;
    height: auto;
    fill: var(--color--black);
    overflow: initial
}

.thoughts__image {
    position: absolute;
    opacity: 0;
    transition: opacity .8s,transform .8s
}

.run.thoughts__image {
    opacity: 1
}

.thoughts__image._01 {
    width: 37.8125%;
    height: auto;
    top: 7.734375vw;
    right: 0
}

.thoughts__image._02 {
    width: 6.328125%;
    height: auto;
    top: 31.25vw;
    left: 0
}

.thoughts__image._03 {
    width: 32.578125%;
    height: auto;
    top: 64.765625vw;
    right: 9.53125%
}

.thoughts__image._04 {
    width: 32.34375vw;
    height: auto;
    bottom: 8.4375vw;
    right: 0
}

#works {
    width: 100%;
    height: auto;
    padding: 5.625vw 0 0;
    background-color: var(--color--white)
}

.works__inner {
    width: 100%;
    height: auto
}

.works__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 78.125%;
    height: auto;
    padding: 0 0 5.46875vw;
    margin: 0 auto
}

.works__btn_wrap {
    width: auto;
    height: auto;
    opacity: 0;
    transform: translate(0%,20px);
    transition: .8s;
    transition-delay: .44s
}

.run .works__btn_wrap {
    opacity: 1;
    transform: translate(0%,0%)
}

.works__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 11.09375vw;
    height: auto
}

.works__contents {
    width: 100%;
    height: auto;
    position: relative
}

.works__list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: auto;
    padding-top: 1px;
    position: relative
}

.works__list::before,.works__list::after {
    display: block;
    content: '';
    background-color: var(--color--light_gray);
    position: absolute;
    z-index: 1;
    pointer-events: none
}

.works__list::before {
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    transform: scale(0,1);
    transform-origin: center left;
    transition: all 1s
}

.run .works__list::before {
    transform: scale(1,1)
}

.works__list::after {
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: scale(1,0);
    transform-origin: top center;
    transition: all 1s;
    transition-delay: .5s
}

.run .works__list::after {
    transform: scale(1,1)
}

.works__list__item {
    width: 50%;
    height: auto;
    background-color: var(--color--white);
    position: relative
}

.works__list__item__inner {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6.09375vw 7.03125vw 5.859375vw;
    position: relative
}

.works__list__item__inner::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color--black);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none
}

@media (any-hover: hover) {
    .works__list__item__inner::before {
        transition:.4s
    }

    .works__list__item__inner:hover::before {
        opacity: .14
    }
}

.works__list__item__stalker {
    position: absolute;
    pointer-events: none;
    opacity: 0
}

.hover .works__list__item__stalker {
    opacity: 1
}

.works__list__item__stalker._circle {
    width: var(--10px);
    height: var(--10px);
    border-radius: 50%;
    background-color: rgba(255,255,255,.6);
    z-index: 3
}

.hover .works__list__item__stalker._circle {
    width: 7.65625vw;
    height: 7.65625vw
}

.works__list__item__stalker._arrow {
    width: var(--10px);
    height: auto;
    z-index: 4
}

.works__list__item__stalker._arrow svg {
    width: 100%;
    height: auto;
    fill: var(--color--black)
}

.hover .works__list__item__stalker._arrow {
    width: 1.9375vw
}

.works__list__item__image {
    width: 100%;
    height: auto;
    margin: 0 auto 2.65625vw;
    aspect-ratio: 460 / 285;
    overflow: hidden;
    opacity: 0;
    transform: translate(0%,20px);
    transition: .6s
}

.run .works__list__item__image {
    opacity: 1;
    transform: translate(0%,0%)
}

.works__list__item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1)
}

@media (any-hover: hover) {
    .works__list__item__image img {
        transition:.45s
    }

    .works__list__item__inner:hover .works__list__item__image img {
        transform: scale(1.06)
    }
}

.works__list__item__info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0 auto var(--10px);
    font-weight: 400;
    line-height: var(--18px);
    letter-spacing: .08em;
    color: var(--color--light_gray);
    opacity: 0;
    transform: translate(0%,20px);
    transition: .6s;
    transition-delay: .1s
}

.run .works__list__item__info {
    opacity: 1;
    transform: translate(0%,0%)
}

.works__list__item__info__date {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    height: auto;
    margin-right: var(--10px);
    font-size: var(--13px)
}

.works__list__item__info__date::after {
    content: '/';
    display: block;
    margin-left: var(--11px)
}

.works__list__item__info__customer {
    width: auto;
    height: auto;
    font-size: var(--12px)
}

.works__list__item__ttl {
    width: 100%;
    height: auto;
    margin: 0 auto var(--18px);
    font-family: "Noto Serif JP",serif;
    font-size: var(--16px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .08em;
    color: var(--color--black);
    opacity: 0;
    transform: translate(0%,20px);
    transition: .6s;
    transition-delay: .15s
}

.run .works__list__item__ttl {
    opacity: 1;
    transform: translate(0%,0%)
}

.works__list__item__txt {
    width: 100%;
    height: auto;
    font-size: var(--12px);
    font-weight: 300;
    line-height: 2;
    letter-spacing: .08em;
    color: var(--color--black);
    opacity: 0;
    transform: translate(0%,20px);
    transition: .6s;
    transition-delay: .2s
}

.run .works__list__item__txt {
    opacity: 1;
    transform: translate(0%,0%)
}

#page__large_image {
    width: 100%;
    height: auto;
    aspect-ratio: 1280 / 800;
    overflow: hidden;
    position: relative
}

#page__large_image::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color--black);
    opacity: .3;
    mix-blend-mode: darken;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.page__large_image__wrap {
    width: 100%;
    height: 110%;
    background-image: url(../image/index/page-large_image@pc.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1
}

@media all and (max-width: 768px) {
    #hero {
        height:90vh;
    }

    .hero__container {
        height: 100svh
    }

    .hero__swiper__slide._01 {
        background-image: url(../image/index/hero__image_01@sp.webp)
    }

    .hero__swiper__slide._02 {
        background-image: url(../image/index/hero__image_02@sp.webp)
    }

    .hero__swiper__slide._03 {
        background-image: url(../image/index/hero__image_03@sp.webp)
    }

    .hero__swiper__slide._04 {
        background-image: url(../image/index/hero__image_04@sp.webp)
    }

    .hero__swiper__slide._05 {
        background-image: url(../image/index/hero__image_05@sp.webp)
    }

    .hero__swiper__slide._06 {
        background-image: url(../image/index/hero__image_06@sp.webp)
    }

    .hero__swiper__slide._07 {
        background-image: url(../image/index/hero__image_07@sp.webp)
    }

    .hero__copy {
        width: 24.098667vw;
        top: calc(4.657534vh + 56px);
        right: calc(7.466667vw + 18px)
    }

    .thoughts__inner {
        padding: 97.546667vw 0 96.8vw
    }

    .thoughts__contents {
        width: 80%;
        margin: 0 auto
    }

    .thoughts__contents__sub_title {
        margin: 9.066667vw 0 3.73333vw;
        text-indent: -.4em
    }

    .thoughts__contents__txt {
        margin: 0 0 9.066667vw;
        line-height: 2
    }

    .thoughts__contents__btn_wrap {
        width: 66.666667vw;
        margin: 0 auto
    }

    .thoughts__contents__btn {
        width: 66.666667vw;
        padding: 0 0 4.533333vw
    }

    .thoughts__image {
        position: absolute
    }

    .thoughts__image._01 {
        width: 36.176vw;
        top: 17.973333vw;
        right: auto;
        left: 10.133333vw;
        z-index: 1
    }

    .thoughts__image._02 {
        width: 61.229333vw;
        top: 42.506667vw;
        left: auto;
        right: 9.866667vw;
        z-index: 2
    }

    .thoughts__image._03 {
        width: 64.266667vw;
        top: auto;
        bottom: 39.733333vw;
        right: auto;
        left: 9.866667vw;
        z-index: 1
    }

    .thoughts__image._04 {
        display: block;
        width: 36.176vw;
        height: auto;
        bottom: 15.28vw;
        right: 4.8vw;
        z-index: 2
    }

    #works {
        padding: 13.866667vw 0 0
    }

    .works__heading {
        display: block;
        width: 100%;
        padding: 0 0 9.6vw
    }

    .works__btn_wrap {
        width: 32.933333vw;
        margin: 4.666667vw auto 0
    }

    .works__btn {
        width: 32.933333vw
    }

    .works__list {
        display: block;
        padding-top: 0
    }

    .works__list::before,.works__list::after {
        display: none
    }

    .works__list__item {
        width: 100%
    }

    .works__list__item::before {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--color--light_gray);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1
    }

    .works__list__item__inner {
        padding: 9.6vw 4.8vw 9.066667vw
    }

    .works__list__item__inner::before {
        display: none
    }

    .works__list__item__stalker {
        display: none
    }

    .works__list__item__image {
        margin: 0 auto 5.733333vw;
        aspect-ratio: 338 / 210
    }

    .works__list__item__info {
        padding: 0 4.8vw;
        margin: 0 auto 2.4vw
    }

    .works__list__item__ttl {
        padding: 0 4.8vw;
        margin: 0 auto var(--12px)
    }

    .works__list__item__txt {
        padding: 0 4.8vw
    }

    .works__list__item__btn_wrap {
        width: 32.8vw;
        height: auto;
        margin: 7.066666vw auto 0;
        opacity: 0;
        transform: translate(0%,20px);
        transition: .6s;
        transition-delay: .25s
    }

    .run .works__list__item__btn_wrap {
        opacity: 1;
        transform: translate(0%,0%)
    }

    .works__list__item__btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: auto;
        font-size: var(--16px);
        font-weight: 500;
        line-height: 1;
        letter-spacing: .04em;
        color: var(--color--black)
    }

    #page__large_image {
        aspect-ratio: 375 / 590
    }

    .page__large_image__wrap {
        background-image: url(../image/index/page-large_image@sp.webp)
    }
}