/* ==================================================
   Project
================================================== */


/* ==================================================
   Common
================================================== */

.project-inner {

    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto;

}


.project-section-en {

    margin:
        0
        0
        22px;

    font-family:
        var(--font-en);

    font-size:
        0.63rem;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        0.22em;

    color:
        var(--color-text-soft);

}


.project-section-en-light {

    color:
        rgba(248, 245, 238, 0.65);

}



/* ==================================================
   Project Hero
================================================== */

.project-hero {

    width:
        100%;

    padding:
        calc(var(--header-height) + 90px)
        var(--side-padding)
        105px;

    background:
        var(--color-bg);

}


.project-hero-inner {

    width:
        100%;

    max-width:
        720px;

    margin:
        0 auto;

    text-align:
        center;

}


.project-hero-en {

    margin:
        0
        0
        34px;

    font-family:
        var(--font-en);

    font-size:
        0.68rem;

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        0.28em;

    color:
        var(--color-text-soft);

}


.project-hero h1 {

    margin:
        0;

    font-family:
        var(--font-jp);

    font-size:
        clamp(1.45rem, 6vw, 2.2rem);

    font-weight:
        500;

    line-height:
        1.85;

    letter-spacing:
        0.12em;

    color:
        var(--color-text);

}


.project-hero-description {

    width:
        100%;

    max-width:
        570px;

    margin:
        48px auto 0;

    font-family:
        var(--font-jp);

    font-size:
        clamp(0.7rem, 2.75vw, 0.82rem);

    font-weight:
        400;

    line-height:
        2.15;

    letter-spacing:
        0.085em;

    color:
        var(--color-text-soft);

}



/* ==================================================
   Project Main Image
================================================== */

.project-main-image {

    padding:
        0
        var(--side-padding)
        100px;

    background:
        var(--color-bg);

}


.project-main-image-inner {

    width:
        100%;

    max-width:
        880px;

    margin:
        0 auto;

    overflow:
        hidden;

    background:
        var(--color-bg-light);

}


.project-main-image img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    object-fit:
        cover;

}



/* ==================================================
   About Project
================================================== */

.project-about {

    padding:
        100px
        var(--side-padding);

    background:
        var(--color-bg-light);

}


.project-about h2,
.project-future h2 {

    margin:
        0
        0
        38px;

    font-family:
        var(--font-jp);

    font-size:
        clamp(1.15rem, 4.8vw, 1.6rem);

    font-weight:
        500;

    line-height:
        1.95;

    letter-spacing:
        0.11em;

    color:
        var(--color-text);

}


.project-text {

    width:
        100%;

    max-width:
        590px;

}


.project-text p {

    margin:
        0
        0
        18px;

    font-family:
        var(--font-jp);

    font-size:
        clamp(0.68rem, 2.65vw, 0.8rem);

    font-weight:
        400;

    line-height:
        2.15;

    letter-spacing:
        0.08em;

    color:
        var(--color-text-soft);

}


.project-text p:last-child {

    margin-bottom:
        0;

}



/* ==================================================
   Cycle
================================================== */

.project-cycle {

    padding:
        100px
        var(--side-padding);

    background:
        var(--color-bg-dark);

}


.project-cycle-inner {

    width:
        100%;

    max-width:
        820px;

    margin:
        0 auto;

}


.project-cycle-list {

    margin-top:
        48px;

}


.project-cycle-item {

    width:
        100%;

    max-width:
        500px;

}


.project-cycle-number {

    display:
        block;

    margin:
        0
        0
        17px;

    font-family:
        var(--font-en);

    font-size:
        0.65rem;

    line-height:
        1;

    letter-spacing:
        0.18em;

    color:
        rgba(248, 245, 238, 0.45);

}


.project-cycle-item h3 {

    margin:
        0
        0
        16px;

    font-family:
        var(--font-jp);

    font-size:
        clamp(0.95rem, 3.8vw, 1.15rem);

    font-weight:
        500;

    line-height:
        1.6;

    letter-spacing:
        0.13em;

    color:
        var(--color-bg-light);

}


.project-cycle-item p {

    margin:
        0;

    font-family:
        var(--font-jp);

    font-size:
        clamp(0.65rem, 2.55vw, 0.75rem);

    font-weight:
        400;

    line-height:
        2;

    letter-spacing:
        0.075em;

    color:
        rgba(248, 245, 238, 0.68);

}


.project-cycle-line {

    width:
        1px;

    height:
        55px;

    margin:
        28px
        0
        28px
        17px;

    background:
        rgba(248, 245, 238, 0.2);

}



/* ==================================================
   Future
================================================== */

.project-future {

    padding:
        105px
        var(--side-padding);

    background:
        var(--color-bg);

}


.project-future-layout {

    display:
        grid;

    gap:
        55px;

}


.project-future-image {

    width:
        min(100%, 520px);

    overflow:
        hidden;

    background:
        var(--color-bg-light);

}


.project-future-image img {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

}



/* ==================================================
   Message
================================================== */

.project-message {

    padding:
        90px
        var(--side-padding);

    background:
        var(--color-bg-light);

}


.project-message-inner {

    width:
        100%;

    max-width:
        680px;

    margin:
        0 auto;

    text-align:
        center;

}


.project-message p {

    margin:
        0;

    font-family:
        var(--font-jp);

    font-size:
        clamp(0.84rem, 3.5vw, 1.08rem);

    font-weight:
        500;

    line-height:
        2.15;

    letter-spacing:
        0.11em;

    color:
        var(--color-text);

}



/* ==================================================
   Contact Link
================================================== */

.project-contact {

    padding:
        95px
        var(--side-padding);

    background:
        var(--color-bg);

}


.project-contact-inner {

    width:
        100%;

    max-width:
        560px;

    margin:
        0 auto;

    text-align:
        center;

}


.project-contact-text {

    margin:
        0
        0
        42px;

    font-family:
        var(--font-jp);

    font-size:
        clamp(0.66rem, 2.6vw, 0.76rem);

    line-height:
        2;

    letter-spacing:
        0.08em;

    color:
        var(--color-text-soft);

}


.project-contact-link {

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        8px;

    min-width:
        210px;

    padding:
        18px
        30px;

    border:
        1px solid
        var(--color-text);

    color:
        var(--color-text);

    text-decoration:
        none;

    transition:
        background
        0.4s
        var(--ease-main),
        color
        0.4s
        var(--ease-main);

}


.project-contact-link span {

    font-family:
        var(--font-en);

    font-size:
        0.82rem;

    line-height:
        1;

    letter-spacing:
        0.2em;

}


.project-contact-link small {

    font-family:
        var(--font-jp);

    font-size:
        0.57rem;

    line-height:
        1;

    letter-spacing:
        0.1em;

}


.project-contact-link:hover {

    background:
        var(--color-text);

    color:
        var(--color-bg-light);

}



/* ==================================================
   Tablet
================================================== */

@media screen and (min-width: 768px) {

    .project-hero {

        padding-top:
            calc(var(--header-height) + 120px);

        padding-bottom:
            130px;

    }


    .project-hero-description {

        margin-top:
            58px;

    }


    .project-main-image {

        padding-bottom:
            130px;

    }


    .project-about,
    .project-cycle,
    .project-future {

        padding-top:
            130px;

        padding-bottom:
            130px;

    }


    .project-cycle-list {

        display:
            grid;

        grid-template-columns:
            1fr
            60px
            1fr
            60px
            1fr;

        align-items:
            start;

        gap:
            0;

        margin-top:
            65px;

    }


    .project-cycle-item {

        max-width:
            none;

    }


    .project-cycle-line {

        width:
            38px;

        height:
            1px;

        margin:
            34px
            auto
            0;

    }


    .project-future-layout {

        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.05fr);

        align-items:
            center;

        gap:
            70px;

    }


    .project-future-image {

        width:
            100%;

    }


    .project-message {

        padding-top:
            115px;

        padding-bottom:
            115px;

    }


    .project-contact {

        padding-top:
            120px;

        padding-bottom:
            120px;

    }

}



/* ==================================================
   Desktop
================================================== */

@media screen and (min-width: 1100px) {

    .project-inner {

        max-width:
            920px;

    }


    .project-about .project-text {

        margin-left:
            auto;

        margin-right:
            40px;

    }


    .project-future-layout {

        gap:
            95px;

    }

}



/* ==================================================
   Small Screens
================================================== */

@media screen and (max-width: 380px) {

    .project-hero h1 {

        font-size:
            1.28rem;

    }


    .project-cycle {

        padding-left:
            22px;

        padding-right:
            22px;

    }

}



/* ==================================================
   Reduced Motion
================================================== */

@media
(prefers-reduced-motion: reduce) {

    .project-contact-link {

        transition:
            none;

    }

}