@import url(
'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap'
);


/* =========================
   BASIC
========================= */

:root {

    --background: #f4f3ef;

    --white: #ffffff;

    --black: #111111;

    --gray: #777777;

    --line: #d8d6d0;

    --pink: #ff3ca6;

    --purple: #744cff;

    --blue: #00cfff;

    --green: #9cff00;

    --orange: #ff7b00;

    --padding: clamp(
        20px,
        4vw,
        70px
    );

}


* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background:
        var(--background);

    color:
        var(--black);

    font-family:
        Inter,
        "Noto Sans JP",
        sans-serif;

    overflow-x: hidden;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font-family: inherit;

}


/* =========================
   LOADING
========================= */

.loading {

    position: fixed;

    inset: 0;

    z-index: 999;

    background: #111;

    color: white;

    display: grid;

    place-items: center;

    transition:
        transform 1s
        cubic-bezier(.77,0,.18,1);

}


.loading.hide {

    transform:
        translateY(-100%);

}


.loading-logo {

    font-size:
        clamp(
            40px,
            10vw,
            120px
        );

    font-weight: 700;

    letter-spacing:
        -.08em;

}


.loading-logo span {

    color:
        var(--pink);

}


/* =========================
   HEADER
========================= */

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 100;

    padding:
        25px
        var(--padding);

    display: flex;

    justify-content:
        space-between;

    align-items: center;

}


.logo {

    font-size: 20px;

    font-weight: 700;

    letter-spacing:
        -.08em;

}


.logo span {

    color:
        var(--pink);

}


.pc-nav {

    display: flex;

    gap: 30px;

}


.pc-nav a {

    font-size: 10px;

    letter-spacing:
        .15em;

    transition:
        opacity .3s;

}


.pc-nav a:hover {

    opacity: .4;

}


/* =========================
   HAMBURGER
========================= */

.hamburger {

    display: none;

    border: 0;

    background: transparent;

    cursor: pointer;

}


.hamburger span {

    display: block;

    width: 26px;

    height: 1px;

    background: #111;

    margin: 6px;

}


/* =========================
   MOBILE MENU
========================= */

.mobile-menu {

    position: fixed;

    inset: 0;

    z-index: 90;

    background:
        rgba(0,0,0,.96);

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 30px;

    transform:
        translateY(-100%);

    transition:
        transform .7s
        cubic-bezier(.77,0,.18,1);

}


.mobile-menu.open {

    transform:
        translateY(0);

}


.mobile-menu nav {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.mobile-menu a {

    font-size:
        clamp(
            38px,
            10vw,
            90px
        );

    letter-spacing:
        -.07em;

}


.mobile-menu a span {

    font-size: 10px;

    color: #777;

    margin-right: 20px;

}


.mobile-menu p {

    margin-top: 70px;

    font-size: 9px;

    letter-spacing:
        .2em;

    color: #777;

}


/* =========================
   HERO
========================= */

.hero {

    min-height:
        100svh;

    position: relative;

    overflow: hidden;

    display: grid;

    place-items: center;

    background:
        #efeee9;

    isolation: isolate;

}


.hero-content {

    position: relative;

    z-index: 10;

    text-align: center;

}


.hero-small {

    font-size: 9px;

    letter-spacing:
        .25em;

    margin-bottom: 30px;

}


.concept {

    margin: 0;

    font-size:
        clamp(
            40px,
            7vw,
            110px
        );

    line-height:
        .85;

    letter-spacing:
        -.08em;

    font-weight: 500;

}


.concept span {

    display: block;

}


.concept strong {

    display: block;

    font-size:
        .5em;

    margin: 15px;

}


.crexima {

    margin-top: 50px;

    font-size:
        clamp(
            50px,
            11vw,
            150px
        );

    font-weight: 700;

    letter-spacing:
        -.1em;

}


.crexima span {

    position: relative;

    color: transparent;

    -webkit-text-stroke:
        1px #111;

}


.crexima span::after {

    content: "";

    position: absolute;

    inset: 15% -20%;

    background:
        linear-gradient(
            90deg,
            #ff304f,
            #ffb000,
            #b9ff00,
            #00d9ff,
            #654cff,
            #ff4cdb
        );

    filter:
        blur(15px);

    opacity: .8;

    z-index: -1;

}


.jp-copy {

    font-size: 11px;

    letter-spacing:
        .2em;

    margin-top: 20px;

}


/* =========================
   LIGHT LEAK
========================= */

.light {

    position: absolute;

    z-index: 1;

    filter:
        blur(35px);

    opacity: .65;

    mix-blend-mode:
        multiply;

}


.light-01 {

    width: 50vw;

    height: 20vw;

    left: -10%;

    top: 10%;

    background:
        linear-gradient(
            90deg,
            #ff245b,
            #ff9f00,
            #baff00
        );

    transform:
        rotate(-20deg);

    animation:
        leak01
        10s
        ease-in-out
        infinite
        alternate;

}


.light-02 {

    width: 55vw;

    height: 22vw;

    right: -15%;

    top: 8%;

    background:
        linear-gradient(
            90deg,
            #00d9ff,
            #654cff,
            #ff43d4
        );

    transform:
        rotate(25deg);

    animation:
        leak02
        12s
        ease-in-out
        infinite
        alternate;

}


.light-03 {

    width: 45vw;

    height: 15vw;

    left: 20%;

    bottom: 5%;

    background:
        linear-gradient(
            90deg,
            #ff4a9d,
            #ff7600,
            #fff000
        );

    transform:
        rotate(10deg);

    animation:
        leak03
        8s
        ease-in-out
        infinite
        alternate;

}


.light-04 {

    width: 30vw;

    height: 30vw;

    right: 5%;

    bottom: 5%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #00d9ff,
            #714cff 40%,
            transparent 70%
        );

    animation:
        leak04
        13s
        ease-in-out
        infinite
        alternate;

}


@keyframes leak01 {

    to {

        transform:
            translate(
                12vw,
                5vh
            )
            rotate(-5deg);

    }

}


@keyframes leak02 {

    to {

        transform:
            translate(
                -10vw,
                8vh
            )
            rotate(10deg);

    }

}


@keyframes leak03 {

    to {

        transform:
            translate(
                -8vw,
                -5vh
            )
            rotate(-10deg);

    }

}


@keyframes leak04 {

    to {

        transform:
            translate(
                -10vw,
                -8vh
            )
            scale(1.4);

    }

}


/* =========================
   COLLAGE
========================= */

.collage {

    position: absolute;

    z-index: 4;

}


.collage-01 {

    left: 7%;

    top: 22%;

    transform:
        rotate(-8deg);

}


.collage-02 {

    right: 7%;

    top: 30%;

    transform:
        rotate(7deg);

}


.collage-03 {

    left: 12%;

    bottom: 12%;

    transform:
        rotate(5deg);

}


.collage-image {

    width:
        clamp(
            120px,
            17vw,
            250px
        );

    aspect-ratio:
        1.3;

    border:
        8px solid
        white;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.15);

    display: grid;

    place-items: center;

    color: white;

    font-size: 9px;

    letter-spacing:
        .2em;

}


.image-01 {

    background:
        linear-gradient(
            135deg,
            #111 0 20%,
            #ff5a73 21% 38%,
            #ffb72c 39% 55%,
            #5ed9ff 56% 72%,
            #654cff 73%
        );

}


.image-02 {

    background:
        linear-gradient(
            135deg,
            #eee,
            #4b2b5f 30%,
            #f0b330 55%,
            #0d3b59 56%,
            #111
        );

}


.image-03 {

    background:
        linear-gradient(
            135deg,
            #111,
            #777,
            #eee,
            #222
        );

}


/* =========================
   SCROLL
========================= */

.scroll {

    position: absolute;

    right:
        var(--padding);

    bottom: 30px;

    font-size: 9px;

    letter-spacing:
        .2em;

}


.scroll span {

    font-size: 16px;

    margin-left: 10px;

}


/* =========================
   SECTION
========================= */

.section-number {

    padding:
        var(--padding);

    border-bottom:
        1px solid
        var(--line);

    font-size: 9px;

    letter-spacing:
        .2em;

    color:
        var(--gray);

}


/* =========================
   ABOUT
========================= */

.about {

    min-height:
        100vh;

    padding-bottom:
        15vh;

}


.about-content {

    padding:
        10vh
        var(--padding);

    display:
        grid;

    grid-template-columns:
        1fr 2fr;

    gap:
        8vw;

}


.eyebrow {

    font-size: 10px;

    letter-spacing:
        .2em;

}


.about h2 {

    font-size:
        clamp(
            60px,
            10vw,
            150px
        );

    line-height:
        .85;

    letter-spacing:
        -.09em;

    margin: 0;

}


.about h2 em {

    color: transparent;

    -webkit-text-stroke:
        1px #111;

    font-style: normal;

}


.about-text {

    max-width: 550px;

    margin-top: 70px;

    line-height:
        2;

    font-size: 14px;

}


/* =========================
   BUSINESS
========================= */

.business {

    background:
        #111;

    color:
        white;

}


.business .section-number {

    border-color:
        #333;

}


.business-title {

    padding:
        10vh
        var(--padding);

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

}


.business-title h2 {

    font-size:
        clamp(
            60px,
            13vw,
            190px
        );

    line-height:
        .7;

    letter-spacing:
        -.1em;

    margin: 0;

}


.business-title p {

    color: #777;

    font-size: 9px;

    letter-spacing:
        .2em;

}


.business-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

}


.business-item {

    min-height:
        32vh;

    padding:
        40px
        var(--padding);

    border-top:
        1px solid
        #333;

    border-right:
        1px solid
        #333;

    position:
        relative;

    overflow:
        hidden;

    transition:
        background .5s,
        color .5s;

}


.business-item:nth-child(even) {

    border-right:
        none;

}


.business-item:hover {

    background:
        #f4f3ef;

    color:
        #111;

}


.business-number {

    font-size: 9px;

    color: #777;

}


.business-item h3 {

    font-size:
        clamp(
            50px,
            8vw,
            110px
        );

    letter-spacing:
        -.08em;

    margin:
        10vh
        0
        20px;

}


.business-item p {

    font-size: 9px;

    letter-spacing:
        .1em;

}


.business-item strong {

    position:
        absolute;

    right:
        var(--padding);

    bottom:
        40px;

    font-size: 9px;

    letter-spacing:
        .15em;

}


/* =========================
   PORTFOLIO
========================= */

.portfolio {

    padding-bottom:
        15vh;

}


.portfolio-header {

    padding:
        10vh
        var(--padding);

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

}


.portfolio-header h2 {

    font-size:
        clamp(
            65px,
            12vw,
            180px
        );

    line-height:
        .75;

    letter-spacing:
        -.1em;

    margin: 0;

}


.portfolio-header em {

    font-style: normal;

    color: transparent;

    -webkit-text-stroke:
        1px #111;

}


.portfolio-header p {

    font-size: 12px;

    line-height: 1.8;

}


.works {

    padding:
        0
        var(--padding);

    display:
        grid;

    grid-template-columns:
        repeat(12,1fr);

    gap:
        8vw 3vw;

}


.work01 {

    grid-column:
        1 / 7;

}


.work02 {

    grid-column:
        8 / 13;

    margin-top:
        12vw;

}


.work03 {

    grid-column:
        3 / 8;

}


.work04 {

    grid-column:
        9 / 13;

}


.work-image {

    aspect-ratio:
        1.1;

    display:
        grid;

    place-items:
        center;

    color:
        white;

    font-size:
        9px;

    letter-spacing:
        .2em;

    transition:
        transform .6s;

}


.work:hover .work-image {

    transform:
        scale(.97)
        rotate(2deg);

}


.work-image01 {

    background:
        linear-gradient(
            120deg,
            #111 0 20%,
            #ff456d 21% 38%,
            #f6bd27 39% 58%,
            #2ad7ff 59% 75%,
            #6b51ef 76%
        );

}


.work-image02 {

    background:
        linear-gradient(
            135deg,
            #eee,
            #111 45%,
            #00d9ff 46% 62%,
            #eee
        );

}


.work-image03 {

    background:
        linear-gradient(
            155deg,
            #d7ff00 0 18%,
            #111 19% 36%,
            #ff6b00 37% 54%,
            #5d4bff 55% 72%,
            #eee 73%
        );

}


.work-image04 {

    background:
        linear-gradient(
            45deg,
            #111 0 30%,
            #ff4b9a 31% 45%,
            #fff 46% 60%,
            #00bfff 61% 78%,
            #111 79%
        );

}


.work p {

    font-size: 9px;

    color: #777;

    margin-top: 15px;

}


.work h3 {

    font-size: 12px;

    font-weight: 500;

}


/* =========================
   CONTACT
========================= */

.contact {

    min-height:
        90vh;

    background:
        #111;

    color:
        white;

}


.contact .section-number {

    border-color:
        #333;

}


.contact-content {

    padding:
        12vh
        var(--padding);

}


.contact h2 {

    font-size:
        clamp(
            70px,
            13vw,
            190px
        );

    line-height:
        .78;

    letter-spacing:
        -.1em;

    margin:
        30px 0
        80px;

}


.contact h2 em {

    font-style:
        normal;

    color:
        transparent;

    -webkit-text-stroke:
        1px white;

}


.contact-button {

    max-width:
        650px;

    padding:
        25px 0;

    border-top:
        1px solid #444;

    border-bottom:
        1px solid #444;

    display:
        flex;

    justify-content:
        space-between;

    font-size: 11px;

    letter-spacing:
        .2em;

}


.contact-button:hover {

    color:
        var(--green);

}


.contact-footer {

    padding:
        25px
        var(--padding);

    border-top:
        1px solid #333;

    display:
        flex;

    justify-content:
        space-between;

    color:
        #777;

    font-size: 8px;

    letter-spacing:
        .15em;

}


/* =========================
   FOOTER
========================= */

footer {

    background:
        #111;

    color:
        #666;

    border-top:
        1px solid #333;

    padding:
        20px
        var(--padding);

    display:
        flex;

    justify-content:
        space-between;

    font-size: 8px;

    letter-spacing:
        .15em;

}


/* =========================
   MOBILE
========================= */

@media(max-width:700px) {


    .pc-nav {

        display:
            none;

    }


    .hamburger {

        display:
            block;

    }


    .hero {

        min-height:
            100svh;

    }


    .concept {

        font-size:
            12vw;

    }


    .crexima {

        font-size:
            18vw;

    }


    .collage-01 {

        left:
            -8%;

        top:
            18%;

    }


    .collage-02 {

        right:
            -10%;

        top:
            33%;

    }


    .collage-03 {

        left:
            0;

        bottom:
            15%;

    }


    .collage-image {

        width:
            150px;

        border-width:
            6px;

    }


    .about-content {

        display:
            block;

        padding-top:
            8vh;

    }


    .about h2 {

        font-size:
            18vw;

        margin-top:
            60px;

    }


    .about-text {

        margin-top:
            60px;

    }


    .business-title {

        display:
            block;

    }


    .business-title p {

        margin-top:
            30px;

    }


    .business-grid {

        grid-template-columns:
            1fr;

    }


    .business-item {

        min-height:
            35vh;

        border-right:
            none;

    }


    .business-item h3 {

        font-size:
            20vw;

    }


    .portfolio-header {

        display:
            block;

    }


    .portfolio-header h2 {

        font-size:
            18vw;

        margin-bottom:
            50px;

    }


    .works {

        display:
            block;

    }


    .work {

        margin:
            0
            0
            20vw;

    }


    .work02,
    .work04 {

        margin-left:
            10vw;

    }


    .contact h2 {

        font-size:
            19vw;

    }


    .contact-footer {

        display:
            grid;

        gap:
            10px;

    }


    footer {

        display:
            grid;

        gap:
            10px;

    }

}