/* ==========================================================================
   AREA PAGE
   ========================================================================== */

/* ==========================================================================
   area-intro
   ========================================================================== */

.area-intro {
    padding: clamp(1.5rem, 1.979vw, 38px) 0 clamp(2rem, 3.854vw, 74px);
}

.area-intro__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 3.906vw, 75px);
    line-height: 1.22;
    text-align: center;
    color: #000;
    margin: 0 0 clamp(0.75rem, 0.938vw, 18px);
}

.area-intro__text {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.667vw, 32px);
    line-height: 1.22;
    text-align: center;
    color: #7a6f58;
    margin: 0;
}

@media (max-width: 1023px) {
    .area-intro {
        padding: 1rem 0 2.125rem;
    }

    .area-intro__title {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .area-intro__text {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   area-nature
   ========================================================================== */

.area-nature {
    padding: clamp(1.5rem, 2.344vw, 45px) 0 clamp(3rem, 6.25vw, 120px);
    background-color: #eee8e1;
    position: relative;
    text-align: center;
}

.area-nature--has-bg {
    background-image: var(--area-nature-bg);
    background-size: cover;
    background-position: center;
}

.area-nature__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.area-nature__inner {
    position: relative;
}

.area-nature__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 3.906vw, 75px);
    line-height: 1.22;
    color: #000;
    margin: 0 0 0.875rem;
}

.area-nature__subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.146vw, 22px);
    line-height: 1.69;
    color: #323232;
    margin: 0 0 clamp(1.5rem, 1.875vw, 36px);
}

.area-nature__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 3.438vw, 66px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.area-nature__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 0.938vw, 18px);
}

.area-nature__circle {
    width: clamp(120px, 13.281vw, 255px);
    height: clamp(120px, 13.281vw, 255px);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.area-nature__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.area-nature__caption {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(0.875rem, 0.99vw, 19px);
    line-height: 1.13;
    text-transform: uppercase;
    color: var(--color-dark);
    opacity: 0.5;
    margin: 0;
}

@media (max-width: 1023px) {
    .area-nature {
        padding: 3rem 0;
    }

    .area-nature__title {
        font-size: 2.5rem;
        margin-bottom: 1.125rem;
    }

    .area-nature__subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .area-nature__list {
        gap: 9.7vw;
    }

    .area-nature__item {
        flex: 0 0 37.81vw;
        gap: 2.49vw;
    }

    .area-nature__circle {
        width: 37.81vw;
        height: 37.81vw;
    }

    .area-nature__caption {
        font-size: 1.125rem;
    }
}

/* ==========================================================================
   area-hidden
   ========================================================================== */

.area-hidden {
    padding: clamp(2rem, 3.646vw, 70px) 0 clamp(2rem, 4.167vw, 80px);
    position: relative;
    background-color: #d4d1c4;
}

.area-hidden--has-bg {
    background-image: var(--area-hidden-bg);
    background-size: cover;
    background-position: center;
}

.area-hidden__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.area-hidden__inner {
    position: relative;
    padding: 0 clamp(2rem, 10.521vw, 202px) 0 clamp(2rem, 10.729vw, 206px);
}

.area-hidden__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 3.906vw, 75px);
    line-height: 1.22;
    text-align: center;
    color: #000;
    margin: 0 0 clamp(2rem, 4.688vw, 90px);
}

.area-hidden__list {
    display: grid;
    grid-template-columns: 433fr 1001fr;
    column-gap: clamp(2rem, 3.802vw, 73px);
    row-gap: clamp(2rem, 4.583vw, 88px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.area-hidden__item {
    display: flex;
    flex-direction: column;
}

.area-hidden__item:first-child {
    grid-row: 1 / 3;
}

/* Photo 3 is narrower than its column — constrain proportionally (674/1001) */
.area-hidden__item:nth-child(3) {
    width: 67.33%;
    margin-left: 8.5417vw;
}

.area-hidden__figure {
    overflow: hidden;
    width: 100%;
}

.area-hidden__figure img {
    width: 100%;
    height: auto;
    display: block;
}

.area-hidden__item:first-child .area-hidden__figure img {
    aspect-ratio: 433 / 788;
}

.area-hidden__item:nth-child(2) .area-hidden__figure img {
    aspect-ratio: 1001 / 227;
}

.area-hidden__item:nth-child(3) .area-hidden__figure img {
    aspect-ratio: 674 / 438;
}

.area-hidden__item-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 2.344vw, 45px);
    line-height: 1.22;
    color: #000;
    margin: 0;
}

.area-hidden__item-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.146vw, 22px);
    line-height: 1.69;
    color: #323232;
    margin: 0;
}

.area-hidden__item:first-child .area-hidden__content {
    margin-top: clamp(1.5rem, 1.979vw, 38px);
}

.area-hidden__item:first-child .area-hidden__item-title {
    margin-bottom: clamp(1rem, 1.146vw, 22px);
}

.area-hidden__item:not(:first-child) .area-hidden__content {
    margin-top: clamp(1rem, 1.458vw, 28px);
}

.area-hidden__item:nth-child(2) .area-hidden__item-title {
    margin-bottom: clamp(0.75rem, 0.938vw, 18px);
}

.area-hidden__item:nth-child(3) .area-hidden__item-title {
    margin-bottom: clamp(1rem, 1.146vw, 22px);
}

@media (max-width: 1023px) {
    .area-hidden {
        padding: 3.625rem 0 1.875rem;
    }

    .area-hidden__inner {
        padding: 0 var(--container-pad);
    }

    .area-hidden__title {
        font-size: 2.5rem;
        margin-bottom: 1.25rem;
    }

    .area-hidden__list {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 2.25rem;
    }

    .area-hidden__item:first-child {
        grid-row: auto;
    }

    .area-hidden__item:nth-child(3) {
        width: 100%;
        margin-left: 0;
    }

    .area-hidden__item .area-hidden__content {
        margin-top: 1rem;
    }

    .area-hidden__item-title {
        font-size: 1.875rem;
        margin-bottom: 0.5rem;
    }

    .area-hidden__item-text {
        font-size: 1rem;
    }
}

/* ==========================================================================
   area-culture
   ========================================================================== */

.area-culture {
    padding: clamp(2.5rem, 5.208vw, 100px) 0 clamp(2.5rem, 5.729vw, 110px);
}

.area-culture__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 3.906vw, 75px);
    line-height: 1.22;
    text-align: center;
    color: #000;
    margin: 0 0 clamp(2rem, 4.063vw, 78px);
}

.area-culture__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3.125vw, 60px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.area-culture__item {
    display: flex;
    flex-direction: column;
}

.area-culture__figure {
    overflow: hidden;
    width: 100%;
}

.area-culture__figure img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 420 / 726;
    object-fit: cover;
}

.area-culture__content {
    margin-top: clamp(0.75rem, 0.833vw, 16px);
}

.area-culture__item-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 2.344vw, 45px);
    line-height: 1.22;
    color: #000;
    margin: 0 0 0.625rem;
}

.area-culture__item-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.146vw, 22px);
    line-height: 1.69;
    color: #323232;
    margin: 0;
}

@media (max-width: 1023px) {
    .area-culture {
        padding: 1.875rem 0 3.125rem;
    }

    .area-culture__title {
        font-size: 2.5rem;
        margin-bottom: 1.875rem;
    }

    .area-culture__list {
        grid-template-columns: 1fr;
        gap: 3.75rem;
    }

    .area-culture__content {
        margin-top: 0.875rem;
    }

    .area-culture__item-title {
        font-size: 1.875rem;
        margin-bottom: 0.5rem;
    }

    .area-culture__item-text {
        font-size: 1rem;
    }
}

/* ==========================================================================
   block-cta overrides (area page)
   ========================================================================== */

.block-cta__eyebrow {
    color: #7a6f58;
    opacity: 1;
}

.block-cta__title {
    color: #323232;
}

/* ==========================================================================
   area-food (block-text-slider overrides)
   ========================================================================== */

.area-food .block-text-slider {
    padding-top: clamp(2.5rem, 5.208vw, 100px);
    padding-bottom: clamp(3rem, 6.25vw, 120px);
    overflow: visible;
}

.area-food .block-text-slider__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.area-food .block-text-slider--text-left .block-text-slider__inner {
    grid-template-columns: 1fr 27.7604vw;
    column-gap: 5.3125vw;
}

.area-food .block-text-slider--text-left .block-text-slider__text {
    padding: 0;
    align-self: center;
}

.area-food .block-text-slider__title {
    font-weight: 700;
    line-height: 1.22;
    text-align: center;
    color: var(--color-terracotta);
}

.area-food .block-text-slider__body {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.667vw, 32px);
    line-height: 1.22;
    text-align: center;
    color: #7a6f58;
}

.area-food .block-text-slider__slider .swiper-slide {
    height: clamp(300px, 35.208vw, 676px);
}

.area-food .block-text-slider__slider {
    overflow: visible;
}

.area-food .block-text-slider__slider .swiper {
    overflow: visible;
}

.area-food .block-text-slider__slider .swiper-button-prev {
    left: -3.9583vw;
}

.area-food .block-text-slider__slider .swiper-button-next {
    right: -3.9583vw;
}

@media (max-width: 1023px) {
    .area-food .block-text-slider {
        padding-top: 7.463vw;
        padding-bottom: 9.95vw;
    }

    .area-food .block-text-slider__inner {
        max-width: none;
        padding: 0;
    }

    .area-food .block-text-slider--text-left .block-text-slider__inner {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 9.95vw;
    }

    .area-food .block-text-slider--text-left .block-text-slider__text {
        padding: 0 var(--container-pad);
        align-self: auto;
    }

    .area-food .block-text-slider__title {
        font-family: var(--font-serif);
        font-size: 9.95vw;
        line-height: 1.22;
        margin-bottom: 3.98vw;
    }

    .area-food .block-text-slider__body {
        font-size: 4.975vw;
        margin-bottom: 0;
    }

    .area-food .block-text-slider__slider-wrap {
        padding: 0 var(--container-pad);
    }

    .area-food .block-text-slider__slider .swiper-slide {
        height: calc((100vw - 2 * var(--container-pad)) * 676 / 381);
    }

    /* Reserve space for arrows below slider (3.483vw gap + 13.93vw button) */
    .area-food .block-text-slider__slider {
        padding-bottom: 17.413vw;
    }

    .area-food .block-text-slider__slider .swiper-button-prev,
    .area-food .block-text-slider__slider .swiper-button-next {
        width: 13.93vw;
        height: 13.93vw;
        margin-top: 0;
        top: auto;
        bottom: -17.413vw;
    }

    .area-food .block-text-slider__slider .swiper-button-prev {
        left: calc(50% - 17.66vw);
        right: auto;
    }

    .area-food .block-text-slider__slider .swiper-button-next {
        right: calc(50% - 17.66vw);
        left: auto;
    }

    .area-food .block-text-slider__pagination {
        display: none;
    }
}

/* ==========================================================================
   area-villages
   ========================================================================== */

.area-villages {
    padding: clamp(2.5rem, 5.208vw, 100px) 0 clamp(2rem, 3.333vw, 64px);
    background-color: #d4d1c4;
    position: relative;
}

.area-villages--has-bg {
    background-image: var(--area-villages-bg);
    background-size: cover;
    background-position: center;
}

.area-villages__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.area-villages__inner {
    position: relative;
}

.area-villages__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 3.906vw, 75px);
    line-height: 1.22;
    text-align: center;
    color: #000;
    margin: 0 0 clamp(2rem, 3.125vw, 60px);
}

.area-villages__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5.208vw, 100px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.area-villages__item {
    display: flex;
    flex-direction: column;
}

.area-villages__figure {
    overflow: hidden;
    width: 100%;
}

.area-villages__figure img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 797 / 283;
    object-fit: cover;
}

.area-villages__content {
    margin-top: clamp(1rem, 1.042vw, 20px);
}

.area-villages__item-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 2.344vw, 45px);
    line-height: 1.22;
    color: #000;
    margin: 0 0 clamp(1rem, 1.25vw, 24px);
}

.area-villages__item-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.146vw, 22px);
    line-height: 1.69;
    color: #323232;
    margin: 0;
}

@media (max-width: 1023px) {
    .area-villages {
        padding: 2.5rem 0 5rem;
    }

    .area-villages__title {
        font-size: 2.5rem;
        margin-bottom: 1.125rem;
    }

    .area-villages__list {
        grid-template-columns: 1fr;
        gap: 2.375rem;
    }

    .area-villages__content {
        margin-top: 1.125rem;
    }

    .area-villages__item-title {
        font-size: 1.875rem;
        margin-bottom: 0.625rem;
    }

    .area-villages__item-text {
        font-size: 1rem;
    }
}

/* ==========================================================================
   area-return
   ========================================================================== */

.area-return {
    padding: clamp(2.5rem, 3.646vw, 70px) 0 clamp(3rem, 4.688vw, 90px);
    background-color: #f6f6f6;
}

.area-return H2{
    color: #40362F;
}

.area-return__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 3.906vw, 75px);
    line-height: 1.22;
    text-align: center;
    color: #000;
    margin: 0 0 clamp(2rem, 2.604vw, 50px);
}

.area-return__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(3rem, 7.031vw, 135px);
    row-gap: clamp(1.5rem, 2.292vw, 44px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.area-return__item {
    display: flex;
    flex-direction: column;
}

.area-return__label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(0.875rem, 0.99vw, 19px);
    line-height: 1.13;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin: 0 0 clamp(0.75rem, 0.938vw, 18px);
    display: block;
}

.area-return__label::before {
    content: "♡\00a0";
}

.area-return__figure {
    overflow: hidden;
    width: 100%;
    border-radius: 0.208vw;
}

.area-return__figure img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 797 / 283;
    object-fit: cover;
}

.area-return__content {
    margin-top: clamp(0.75rem, 1.042vw, 20px);
}

.area-return__item-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 2.344vw, 45px);
    line-height: 1.22;
    color: #000;
    margin: 0 0 clamp(1rem, 1.25vw, 24px);
}

.area-return__item-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.146vw, 22px);
    line-height: 1.69;
    color: #323232;
    margin: 0;
}

@media (max-width: 1023px) {
    .area-return {
        padding: 9.95vw 0;
    }

    .area-return__title {
        font-size: 9.95vw;
        margin-bottom: 4.478vw;
    }

    .area-return__list {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 9.95vw;
    }

    .area-return__figure {
        border-radius: 0.498vw;
    }

    .area-return__label {
        font-size: 4.478vw;
        margin-bottom: 4.478vw;
    }

    .area-return__content {
        margin-top: 2.488vw;
    }

    .area-return__item-title {
        font-size: 7.463vw;
        margin-bottom: 3.483vw;
    }

    .area-return__item-text {
        font-size: 3.98vw;
    }
}

/* ==========================================================================
   area-closing
   ========================================================================== */

.area-closing {
    background-color: var(--color-bg);
    text-align: center;
}

.area-closing__photo {
    position: relative;
    margin-bottom: -4.01vw;
}

.area-closing__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(244, 240, 234, 0.75) 72%,
        #f4f0ea 100%
    );
    pointer-events: none;
}

.area-closing__photo img {
    width: 100%;
    height: clamp(300px, 31.458vw, 604px);
    object-fit: cover;
    display: block;
}

.area-closing__inner {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(3rem, 5.208vw, 100px);
}

.area-closing__title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(2.5rem, 3.906vw, 75px);
    line-height: 1.22;
    color: var(--color-dark);
    margin: 0 0 clamp(1rem, 1.25vw, 24px);
}

.area-closing__text {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 1.667vw, 32px);
    line-height: 1.22;
    color: #323232;
    margin: 0 0 clamp(1.5rem, 2.763vw, 50px);
}

.area-closing__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 1.354vw, 26px);
}

.area-closing .btn--primary {
    background-color: var(--color-dark);
    border: 1px solid var(--color-dark);
    border-radius: 0.208vw;
    min-width: clamp(10rem, 12.135vw, 233px);
    height: clamp(2.625rem, 3.229vw, 62px);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(1rem, 1.198vw, 23px);
    line-height: 1.13;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(1rem, 1.25vw, 24px);
}

.area-closing .btn--primary:hover {
    background-color: transparent;
    color: var(--color-dark);
}

.area-closing .btn--outline {
    background-color: transparent;
    border: 1px solid var(--color-dark);
    border-radius: 0.208vw;
    min-width: clamp(10rem, 12.083vw, 232px);
    height: clamp(2.625rem, 3.229vw, 62px);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(1rem, 1.198vw, 23px);
    line-height: 1.13;
    color: #323232;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(1rem, 1.25vw, 24px);
}

.area-closing .btn--outline:hover {
    background-color: var(--color-dark);
    color: #fff;
}

@media (max-width: 1023px) {
    .area-closing__photo {
        margin-bottom: -2.488vw;
    }

    .area-closing__photo img {
        height: 31.343vw;
    }

    .area-closing__title {
        font-size: 9.95vw;
        margin-bottom: 3.98vw;
    }

    .area-closing__text {
        font-size: 4.478vw;
        line-height: 1.45;
        margin-bottom: 2.488vw;
    }

    .area-closing__buttons {
        flex-direction: column;
        gap: 3.483vw;
    }

    .area-closing .btn--primary,
    .area-closing .btn--outline {
        width: 100%;
        min-width: unset;
        height: auto;
        padding: 4.478vw 0;
        border-radius: 0.995vw;
        font-size: 5.721vw;
        font-weight: 700;
        line-height: 1.13;
    }
}

/* ==========================================================================
   area-practical
   ========================================================================== */

.area-practical {
    padding: clamp(3rem, 5vw, 96px) 0;
    background-color: #d4d1c4;
    position: relative;
    text-align: center;
}

.area-practical--has-bg {
    background-image: var(--area-practical-bg);
    background-size: cover;
    background-position: center;
}

.area-practical__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.area-practical__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 3.906vw, 75px);
    line-height: 1.22;
    color: #000;
    margin: 0 0 clamp(2rem, 2.5vw, 48px);
}

.area-practical__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.146vw, 22px);
    line-height: 1.69;
    color: #323232;
    margin: 0;
}

/* Circles — full-width, overriding container-wide constraints */
.area-practical__circles {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    height: clamp(300px, 33.754vw, 650px);
}

.area-practical__list {
    position: relative;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.area-practical__item {
    position: absolute;
}

.area-practical__circle {
    border-radius: 50%;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.area-practical__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Circle sizes and positions (at 1920px design) */
.area-practical__item:nth-child(1) {
    width: clamp(150px, 17.604vw, 338px);
    height: clamp(150px, 17.604vw, 338px);
    left: 12.1vw;
    top: 5.1vw;
}

.area-practical__item:nth-child(2) {
    width: clamp(100px, 11.979vw, 230px);
    height: clamp(100px, 11.979vw, 230px);
    left: 35vw;
    top: 12.627vw;
}

.area-practical__item:nth-child(3) {
    width: clamp(130px, 15.208vw, 292px);
    height: clamp(130px, 15.208vw, 292px);
    left: 49.217vw;
    top: 2.521vw;
}

.area-practical__item:nth-child(4) {
    width: clamp(150px, 18.125vw, 348px);
    height: clamp(150px, 18.125vw, 348px);
    left: 59.438vw;
    top: 16.1vw;
}

.area-practical__item:nth-child(5) {
    width: clamp(110px, 12.917vw, 248px);
    height: clamp(110px, 12.917vw, 248px);
    left: 72.021vw;
    top: 1.917vw;
}

/* Button */
.area-practical__footer {
    text-align: center;
}

.area-practical .btn--primary {
    background-color: #6d7550;
    border: 1px solid #6d7550;
    border-radius: 0.208vw;
    min-width: clamp(10rem, 12.135vw, 233px);
    height: clamp(2.625rem, 3.229vw, 62px);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(1rem, 1.198vw, 23px);
    line-height: 1.13;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(1rem, 1.25vw, 24px);
    transition: background-color var(--transition-base),
        border-color var(--transition-base);
}

.area-practical .btn--primary:hover {
    background-color: var(--color-cta-hover);
    border-color: var(--color-cta-hover);
}

@media (max-width: 1023px) {
    .area-practical {
        padding: 7.463vw 0;
    }

    .area-practical--has-bg {
        background-image: var(
            --area-practical-bg-mobile,
            var(--area-practical-bg)
        );
        background-size: 100% auto;
        background-position: center bottom;
        background-repeat: no-repeat;
    }

    .area-practical__title {
        font-size: 9.95vw;
        margin-bottom: 5.473vw;
        max-width: 83.0846vw;
    }

    .area-practical__text {
        font-size: 5.473vw;
    }

    .area-practical__circles {
        height: 321.8458vw;
    }

    .area-practical__item:nth-child(1) {
        width: 62.189vw;
        height: 62.189vw;
        left: 9vw;
        top: 20vw;
    }

    .area-practical__item:nth-child(2) {
        width: 42.289vw;
        height: 42.289vw;
        right: 7vw;
        left: auto;
        top: 90.5vw;
    }

    .area-practical__item:nth-child(3) {
        width: 53.731vw;
        height: 53.731vw;
        left: 13.2vw;
        top: 139vw;
    }

    .area-practical__item:nth-child(4) {
        width: 64.1791vw;
        height: 64.1791vw;
        right: 10.2vw;
        left: auto;
        top: 199.5vw;
    }

    .area-practical__item:nth-child(5) {
        width: 45.522vw;
        height: 45.522vw;
        left: 8.5vw;
        top: 277.2vw;
    }

    .area-practical__footer {
        margin-top: 13.433vw;
    }

    .area-practical .btn--primary {
        width: 87.313vw;
        min-width: unset;
        height: 15.423vw;
        font-size: 5.721vw;
        border-radius: 0.995vw;
        padding: 0;
    }
}