/** reset **/

* {
    border: 0;
    border-radius: 0;

    margin: 0;
    padding: 0;

    resize: none;
    outline: none;

    box-sizing: border-box;
    background: transparent;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-display: swap !important;
}

a {
    text-decoration: none;
}

ul,
ol,
li {
    list-style: none;
}

svg,
img {
    width: 100%;
    height: auto;
    display: block;
}

html,
body {
    overflow-x: hidden;

    font-size: 10px;
    line-height: 10px;

    background-color: white;
}

button {
    cursor: pointer;
}


/** shared **/

.flex        { display: flex }
.flex.wrap   { flex-wrap: wrap }
.flex.inline { display: inline-flex }
.flex.column { flex-direction: column }

.flex > * {
    flex-grow: 0;
    flex-shrink: 0;
}

.flex > .grow   { flex-grow: 1 }
.flex > .shrink { flex-shrink: 1 }

.flex.al-end    { align-items: flex-end }
.flex.al-start  { align-items: flex-start }
.flex.al-center { align-items: center }

.flex.jf-end     { justify-content: flex-end }
.flex.jf-start   { justify-content: flex-start }
.flex.jf-center  { justify-content: center }
.flex.jf-around  { justify-content: space-around }
.flex.jf-between { justify-content: space-between }

.z-top    { z-index: 10 }
.z-middle { z-index: 5 }
.z-bottom { z-index: 1 }

.for-display {
    speak: none;
}

.for-sreader {
    width: 0;
    height: 0;

    display: block;
    overflow: hidden;

    font-size: 14px;
    line-height: 16px;

    text-indent: -5000vw;
}

.wrapper {
    width: calc(100% - 40px);
    margin: 0 auto;
    max-width: 130.0rem;
}

.bg-sand { background: #d6ccb6 }
.bg-green { background: #2a4544 }
.bg-yellow { background: #9a7642 }

.error-message {
    color: #990000;

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.6rem;
    font-family: 'termina';

    margin-top: 0.5rem;
}

.error-message.success { color: #43955d }


/** intro **/

#intro {
    height: 100vh;
    min-height: 92.0rem;
    max-height: 95.0rem;
}

#intro .text,
#intro .facade,
#intro .facade img {
    position: relative;
}

#intro .text {
    width: 45%;
}

#intro .slogan {
    color: #d6ccb6;
    margin: 7.0rem auto 11.0rem;

    font-size: 4.7rem;
    font-weight: 700;
    line-height: 5.6rem;
    font-family: 'termina';

    text-align: center;
    text-transform: uppercase;

    letter-spacing: 0.06em;
}

#intro .logo-nest {
    margin: 0 auto;
    max-width: 44.0rem;
}

#intro .facade {
    width: 55%;
    height: 100%;
    position: relative;
}

#intro .facade .bg {
    top: 0;
    right: 55%;
    width: 100vw;
    height: 100%;
    position: absolute;
}

#intro .facade .top {
    left: 0;
    right: 0;
    bottom: 84%;
    position: absolute;
}

#intro .facade .birds {
    width: 23.0rem;
    right: -10%;
    bottom: 65%;
    position: absolute;
}

#intro .facade .image {
    max-width: 66.0rem;
    max-height: 100%;

    object-fit: contain;
    object-position: bottom left;
}

#intro .wrapper {
    height: 100%;
}


/** form **/

#form {
    position: relative;
}

#form .text {
    color: #d6ccb6;

    width: 44%;
    margin: 0 0 6.2rem;
    position: relative;

    font-size: 2.3rem;
    font-weight: 400;
    line-height: 4.3rem;
    font-family: 'termina';

    text-align: center;
}

#form .text h3 {
    color: #fffef6;

    font-size: 4.4rem;
    font-weight: 800;
    line-height: 5.7rem;
}

#form .text .bird-1 {
    width: 19.8rem;
    top: -17.3rem;
    left: calc(50% - 9.9rem);
    position: absolute;
}

#form .fields {
    width: 56%;
    position: relative;
}

#form2 .fields .cta,
#form .fields .cta {
    color: #fffef6;

    order: 2;
    margin: 2.0rem 0 0;

    font-size: 1.6rem;
    font-weight: 800;
    line-height: 2.1rem;
    font-family: 'termina';
}

#form2 .fields .form,
#form .fields .form {
    padding: 2.4rem 4.0rem;
    position: relative;
    max-width: 66.0rem;
    background: #fffef6;
    border-radius: 0 2.4rem 0 0;
}

#form .fields .form .bird-2 {
    width: 4.4rem;
    left: calc(100% + 1.5rem);
    bottom: 100%;
    position: absolute;
}

#form2 .fields .form .field,
#form .fields .form .field {
    margin: 0 0 1.5rem;
}

#form2 .fields .form .field label,
#form .fields .form .field label {
    color: #2a4544;

    margin: 0 0 1.0rem;
    padding: 0 0.5rem;

    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.8rem;
    font-family: 'termina';

    letter-spacing: 0.04em;
}

#form2 .fields .form .field input,
#form .fields .form .field input {
    color: #2a4544;

    width: 100%;
    padding: 0 0.5rem;

    font-size: 1.3rem;
    font-weight: 400;
    line-height: 3.8rem;
    font-family: 'termina';

    border: 1px solid #d4c9b4;
    border-radius: 1.2rem;
}

#form2 .fields .form .submit,
#form .fields .form .submit {
    color: #fffef6;

    margin: 3.0rem 0 -7rem auto;
    padding: 0 3.5rem;
    transition: transform 0.3s ease-out;

    font-size: 2.5rem;
    font-weight: 900;
    line-height: 9.8rem;
    font-family: 'termina';

    border-radius: 2.4rem;
}

#form .bg {
    padding: 10.0rem 0 3.8rem;
    position: relative;
}

#form .pattern {
    top: 10.0rem;
    bottom: calc(3.8rem + 6.2rem);

    width: auto;
    right: calc(100% - 7.0rem);
    height: calc(100% - 10.0rem - 3.8rem - 6.2rem);

    position: absolute;
}


/** gallery **/

#gallery {
    position: relative;
}

#gallery p,
#gallery h3 {
    color: #fffef6;

    font-size: 2.8rem;
    font-weight: 400;
    line-height: 4.9rem;
    font-family: 'termina';

    text-align: center;
}

#gallery h3 {
    color: #d6ccb6;

    font-size: 3.8rem;
    font-weight: 900;
}

#gallery .bg {
    padding: 10.0rem 0 8.0rem;
}

#gallery .bird-1 {
    top: -20.0rem;
    left: 30.0rem;
    width: 12.6rem;
    position: absolute;
}

#gallery .main-splide,
#gallery .thumb-splide {
    margin: 3.0rem auto 0;
    max-width: 107.6rem;
}

#gallery .thumb-splide {
    margin: 3.0rem auto 0;
}

#gallery .main-splide .splide__slide {
    position: relative;
}

#gallery .thumb-splide .splide__slide {
    background: black;
}

#gallery .thumb-splide .splide__slide img {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease-out;
}

#gallery .thumb-splide .splide__slide.is-active img {
    opacity: 1;
}

#gallery .main-splide .splide__slide img,
#gallery .thumb-splide .splide__slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    aspect-ratio: 1070 / 530;
}

#gallery .thumb-splide .splide__slide img {
    aspect-ratio: 200 / 140;
}

#gallery .main-splide .splide__slide span {
    color: #ffffff;

    left: 1.8rem;
    bottom: 1.3rem;
    position: absolute;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6rem;
    font-family: 'termina';

    text-transform: uppercase;
}

#gallery .main-splide .splide__arrow {
    width: 6.0rem;
    height: 6.0rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #d6ccb6;
    border-radius: 50%;
}

#gallery .main-splide .splide__arrow svg {
    width: 2.6rem;
}

#gallery .main-splide .splide__arrow--prev svg {
    transform: scale(-1);
}

#gallery .main-splide .splide__arrows {
    z-index: 2;

    top: 50%;
    width: 100%;
    height: 0%;
    padding: 0 3.0rem;

    display: flex;
    overflow: visible;
    position: absolute;

    justify-content: space-between;
}

#gallery .wrapper {
    position: relative;
}



/** map **/

#map .text {
    width: 35%;
}

#map .text p,
#map .text h3 {
    color: #2a4544;

    width: 100%;
    padding: 0 0 0 4.8rem;

    font-size: 2.4rem;
    font-weight: 400;
    line-height: 3.2rem;
    font-family: 'termina';
}

#map .text h3 {
    color: #9a7642;

    font-size: 2.9rem;
    font-weight: 900;
    line-height: 3.6rem;

    margin: 6.8rem 0 7.0rem;
}

#map .text .facade {
    width: calc(100% + (100vw - 130.0rem)/2);
    margin: 11.5rem 0 0;

    object-fit: cover;
    object-position: center;

    aspect-ratio: 540 / 340;
}

#map .text .pattern {
    max-width: 30.0rem;
    margin: 1.8rem auto 0 4.8rem;
}

#map .map {
    width: 65%;
    position: relative;
}

#map .map img {
    width: calc(100% + (100vw - 130.0rem)/2);
    height: 100%;

    object-fit: contain;
    object-position: top center;
}

#map .map .box {
    color: #ffffff;

    left: 9.0rem;
    bottom: 7.0rem;

    font-size: 10px;
    font-weight: 400;
    line-height: 24px;
    font-family: 'termina';

    position: absolute;
}

#map .map .box a {
    color: #fffef6;

    margin: 0 0 3.0rem;
    padding: 1.0rem 4.6rem;
    border-radius: 2.4rem;

    font-size: 2.0rem;
    font-weight: 900;
    line-height: 3.1rem;
    font-family: 'termina';

    text-align: center;
    text-transform: uppercase;

    transition: transform 0.3s ease-out;
}


/** plant **/

#plant .top .text {
    color: #2a4544;

    width: 35%;
    padding: 0 0 0 4.8rem;

    font-size: 3.0rem;
    font-weight: 900;
    line-height: 4.2rem;
    font-family: 'termina';
}

#plant .top .images {
    width: 65%;
}

#plant .top .images div {
    width: calc(50% + (100vw - 130.0rem)/4);
    position: relative;
}

#plant .top .images div img {
    object-fit: cover;
    object-position: center;

    aspect-ratio: 500 / 260;
}

#plant .top .images div span {
    color: #ffffff;

    left: 1.8rem;
    bottom: 1.3rem;
    position: absolute;

    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6rem;
    font-family: 'termina';

    text-transform: uppercase;
}

#plant .bottom {
    padding: 11.0rem 0 15.0rem;
}

#plant .bottom .list {
    color: #2a4544;

    width: 38%;
    padding: 0 0 0 4.8rem;

    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.5rem;
    font-family: 'termina';

    text-transform: uppercase;
}

#plant .bottom .list li {
    margin: 0 0 2.4rem;
    padding-left: 6.8rem;
    position: relative;
}

#plant .bottom .list li span {
    color: #ffffff;

    top: 50%;
    left: 0;
    width: 3.8rem;
    height: 3.8rem;

    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;

    font-size: 2.5rem;
    font-weight: 900;
    line-height: 3.0rem;
    font-family: 'termina';

    transform: translateY(-50%);
    border-radius: 50%;
}

#plant .bottom .list li:nth-child(1) span  { background: #00835d }
#plant .bottom .list li:nth-child(2) span  { background: #b3553a }
#plant .bottom .list li:nth-child(3) span  { background: #1e4482 }
#plant .bottom .list li:nth-child(4) span  { background: #93a455 }
#plant .bottom .list li:nth-child(5) span  { background: #741a36 }
#plant .bottom .list li:nth-child(6) span  { background: #eb2773 }
#plant .bottom .list li:nth-child(7) span  { background: #00718b }
#plant .bottom .list li:nth-child(8) span  { background: #e3734a }
#plant .bottom .list li:nth-child(9) span  { background: #be9769 }
#plant .bottom .list li:nth-child(10) span { background: #67b045 }
#plant .bottom .list li:nth-child(11) span { background: #dfb825 }
#plant .bottom .list li:nth-child(12) span { background: #549fd7 }

#plant .bottom .plant {
    width: 62%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}


/** form2 **/

#form2 .text,
#form2 .fields {
    width: 62%;
    padding: 6.5rem 0 3.5rem;
}

#form2 .text {
    width: 38%;
    position: relative;
    padding-left: 7.5rem;
    padding-bottom: 0;
}

#form2 .text .bg {
    top: 0;
    left: 0;
    width: 50vw;
    height: 100%;
    position: absolute;
}

#form2 .text .z-top {
    height: 100%;
    position: relative;
}

#form2 .text h3 {
    color: #9a7642;

    font-size: 3.2rem;
    font-weight: 900;
    line-height: 4.0rem;
    font-family: 'termina';

    text-align: center;
}

#form2 .text .sign {
    position: relative;
    margin-top: auto;
}

#form2 .text .sign .logo {
    top: 50%;
    left: 50%;
    width: 29.0rem;
    position: absolute;
    transform: translate(-50%, -50%);
}

#form2 .fields .cta {
    order: -1;
    margin: -8rem 0 0;
    margin-left: 38rem;
    margin-right: 7.5rem;
    text-align: center;
}

#form2 .fields .form {
    order: -2;
    width: calc(100% - 7.5rem);
    max-width: none;
    margin-bottom: 14rem;
}

#form2 .fields .form .submit {
    margin: 10rem 0 -15rem -4.0rem;
}

#form2 .fields .legal {
    color: #ffffff;

    font-size: 7px;
    font-weight: 500;
    line-height: 10px;
    font-family: 'termina';

    margin-top: 5.0rem;
    margin-right: 7.5rem;

    text-align: justify;
}


/** responsive **/

@media (max-width: 1360px) {
    html, body {
        font-size: 8px;
    }
}

@media (max-width: 1100px) {
    #intro {
        height: auto;
        min-height: auto;
        max-height: none;
        background: #2a4544;
    }

    #intro .text,
    #intro .facade,
    #form .text,
    #form .fields,
    #map .text,
    #map .map,
    #plant .top .text,
    #plant .top .images,
    #plant .bottom .list,
    #plant .bottom .plant {
        width: 100%;
    }

    #intro .facade .bg,
    #intro .facade .top,
    #form .pattern {
        display: none;
    }

    #intro .slogan {
        margin: 5rem auto 5rem;
    }

    #intro .logo-nest {
        margin: 4rem auto 0;
    }

    #intro .facade .image {
        margin: 0 auto;
        max-width: 85.0rem;
    }

    #form .text {
        margin: 4rem 0 6.2rem;
    }

    #form .text .bird-1 {
        top: -24.3rem;
    }

    #form .fields .form {
        max-width: none;
    }

    #form .fields .cta {
        margin: 8rem 0 0;
        text-align: center;
    }

    #form .fields .form .submit {
        margin: 3.0rem auto -7rem;
    }

    #gallery .bird-1 {
        top: -18rem;
        left: 0rem;
    }

    #map .text .facade {
        width: calc(100% + 40px);
        margin-right: -20px;
    }

    #map .text .pattern {
        width: calc(100% - 4.8rem * 2);
        height: 6.5rem;
        margin: 1.8rem auto 0;
        object-fit: cover;
    }

    #map .text p,
    #map .text h3,
    #plant .top .text {
        text-align: center;
        padding-left: 0;
    }

    #map .map img {
        width: calc(100% + 40px);
        margin-left: -20px;
        padding: 0 0 30rem;
    }

    #map .map .box {
        left: 20px;
        right: 20px;
        text-align: center;
    }

    #plant .top .images {
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    #plant .top .images div {
        width: 50%;
    }

    #plant .top .text {
        padding: 4rem 0;
    }

    #plant .bottom .list {
        order: 2;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 0;
    }

    #plant .bottom .list li {
        min-width: 44rem;
    }

    #form2 .text,
    #form2 .fields {
        width: 100%;
    }

    #form2 .fields .form {
        width: 100%;
    }

    #form2 .fields .cta,
    #form2 .fields .legal {
        margin-right: 0;
    }

    #form2 .text {
        padding-left: 0;
    }

    #form2 .text .bg {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
    }

    #form2 .text .sign {
        width: 100%;
        margin: 0 auto;
        max-width: 48rem;
        margin-top: 4rem;
    }
}

@media (max-width: 575px) {
    html, body {
        font-size: 6px;
    }

    #gallery h3 {
        max-width: 51rem;
        margin: auto;
    }

    #map .map .box p br {
        display: none;
    }


    #form2 .fields .cta {
        margin: 8rem 0 0;
        text-align: center;
    }

    #form2 .fields .form {
        margin-bottom: 0;
    }

    #form2 .fields .form .submit {
        margin: 3.0rem auto -7rem;
    }
}