/* shared utilities (used by header/footer/index) */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* shared focus-visible rules */
.c-header__menu-button:focus-visible,
.c-header__menu a:focus-visible,
.c-lang-switcher a:focus-visible,
.c-footer a:focus-visible {
    outline: 0.125rem solid var(--gray2);
    outline-offset: 0.2rem;
    border-radius: var(--radius-small);
}

/* fallback for environments without :focus-visible */
@supports not selector(:focus-visible) {
    .c-header__menu-button:focus,
    .c-header__menu a:focus,
    .c-lang-switcher a:focus,
    .c-footer a:focus {
        outline: 0.125rem solid var(--gray2);
        outline-offset: 0.2rem;
        border-radius: var(--radius-small);
    }
}

/* icon style for header and footer */
.c-nav-link--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

a.c-nav-link--with-icon::after {
    content: "";
    inline-size: 0.625rem;
    block-size: 0.375rem;
    margin-block-start: 2px;
    flex: 0 0 auto;
    background-color: var(--text-black);
    -webkit-mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='0.75,0.75 4.75,4.75 8.75,0.75' fill='none' stroke='%234b4b4b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='0.75,0.75 4.75,4.75 8.75,0.75' fill='none' stroke='%234b4b4b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.c-header__menu li .c-nav-link--with-icon:hover::after,
.c-footer__menu li .c-nav-link--with-icon:hover::after {
    background-color: var(--text-white);
}

/* shared split CTA animation component */
.c-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.c-btn__label,
.c-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-btn-bg-default, var(--gray1-5));
    border: var(--c-btn-border-width, 2px) solid var(--c-btn-bg-default, var(--gray1-5));
    color: var(--c-btn-fg, var(--text-white));
}

.c-btn__label {
    min-height: 2.625rem;
    padding-inline: 1.25rem;
    border-radius: var(--radius-round);
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-6);
    transition:
        border-top-right-radius var(--c-btn-merge-duration, 0.28s) ease,
        border-bottom-right-radius var(--c-btn-merge-duration, 0.28s) ease;
}

.c-btn__icon {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: var(--radius-round);
    margin-inline-start: var(--c-btn-overlap, -0.125rem);
    overflow: hidden;
    transition:
        border-top-left-radius var(--c-btn-merge-duration, 0.28s) ease,
        border-bottom-left-radius var(--c-btn-merge-duration, 0.28s) ease;
}

.c-btn__icon--arrow::after {
    content: "";
    display: block;
    width: 0.83rem;
    height: 0.83rem;
    flex: 0 0 auto;
    background-color: var(--text-white);
    -webkit-mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12' fill='none'><path d='M0.454618 5.85459H14.3403M14.3403 5.85459L9.13319 0.45459M14.3403 5.85459L9.13319 11.2546' stroke='white' stroke-width='0.909474' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12' fill='none'><path d='M0.454618 5.85459H14.3403M14.3403 5.85459L9.13319 0.45459M14.3403 5.85459L9.13319 11.2546' stroke='white' stroke-width='0.909474' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transition:
        border-top-left-radius var(--c-btn-merge-duration, 0.28s) ease,
        border-bottom-left-radius var(--c-btn-merge-duration, 0.28s) ease;
}

@media (min-width: 768px) {
    .c-btn__label {
        min-height: 3.125rem;
        font-size: var(--font-size-15);
        padding-inline: 1.25rem;
    }

    .c-btn__icon {
        width: 3.125rem;
        height: 3.125rem;
    }
}

/* icon animation: diagonal swipe (bottom-left -> top-right -> return) */
@keyframes c-btn-icon-swipe-diagonal {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    45% {
        transform: translate(0.625rem, -0.625rem);
        opacity: 0;
    }

    46% {
        transform: translate(-0.625rem, 0.625rem);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* icon animation: horizontal swipe (left -> right -> return) */
@keyframes c-btn-icon-swipe-horizontal {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    45% {
        transform: translateX(0.625rem);
        opacity: 0;
    }

    46% {
        transform: translateX(-0.625rem);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* trigger animation on hover/focus and reset border radius to create "split" effect */
.c-btn:hover .c-btn__label,
.c-btn:focus-visible .c-btn__label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.c-btn:hover .c-btn__icon,
.c-btn:focus-visible .c-btn__icon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.c-btn--icon-diagonal:hover .c-btn__icon--arrow::after {
    animation: c-btn-icon-swipe-diagonal var(--c-btn-icon-swipe-duration, 0.48s) ease-out;
}
.c-btn--icon-diagonal:focus-visible .c-btn__icon--arrow::after {
    animation: c-btn-icon-swipe-diagonal var(--c-btn-icon-swipe-duration, 0.48s) ease-out;
}

.c-btn--icon-horizontal:hover .c-btn__icon--arrow::after,
.c-btn--icon-horizontal:focus-visible .c-btn__icon--arrow::after {
    animation: c-btn-icon-swipe-horizontal var(--c-btn-icon-swipe-duration, 0.48s) ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .c-btn--icon-diagonal:hover .c-btn__icon--arrow::after,
    .c-btn--icon-diagonal:focus-visible .c-btn__icon--arrow::after,
    .c-btn--icon-horizontal:hover .c-btn__icon--arrow::after,
    .c-btn--icon-horizontal:focus-visible .c-btn__icon--arrow::after {
        animation: none;
    }
}

/* footer component */

.c-footer {
    position: relative;
    min-height: 56.25rem;
    color: var(--text-black);
}

.c-footer li {
    list-style: none;
}

.c-footer__bg,
.c-footer__bg-image {
    position: absolute;
    inset: 0;
}

.c-footer__bg {
    overflow: hidden;
}

.c-footer__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-footer__section {
    position: relative;
    z-index: 1;
    padding-block: 12.5625rem 3rem;
}

.c-footer__panel {
    display: flex;
    flex-direction: column;
    padding: 4rem 1.25rem 1.5rem;
    background: var(--bg-white-94);
    border-radius: var(--radius-large);
}

.c-footer__logo-link {
    display: inline-flex;
    width: 15rem;
}

.c-footer__logo {
    width: 100%;
    height: auto;
}

.c-footer__primary-nav {
    margin-block-start: 2.5rem;
    width: 100%;
}

.c-footer__menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.5rem;
    column-gap: 0;
    justify-items: start;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-16);
    line-height: var(--line-height-100);
    letter-spacing: var(--letter-spacing-2);
}

.c-footer__info {
    margin-block-start: 3rem;
}

/* language switcher component (shared header/footer) */
.c-lang-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.25rem;
    border: 1px solid var(--gray6);
    border-radius: var(--radius-base);
    background: linear-gradient(138deg, rgba(238, 238, 238, 0.9) 10%, rgba(238, 238, 238, 0.6) 100%);
}

.c-lang-switcher__item {
    color: var(--gray3);
    font-size: var(--font-size-14);
    line-height: var(--line-height-160);
    letter-spacing: var(--letter-spacing-3);
    padding-inline: 0.45rem;
}

.c-lang-switcher__item--current {
    color: var(--text-black);
}

.c-lang-switcher__separator {
    opacity: 1;
    width: 1px;
    height: 1rem;
    background-color: var(--gray3);
}

.c-lang-switcher:has(a:hover) .c-lang-switcher__separator {
    opacity: 0;
}

a.c-lang-switcher__item:hover {
    color: var(--text-white);
    background-color: var(--gray3);
    border-radius: var(--radius-base);
}

/* refactor: footer link shared decoration */
.c-footer__menu a,
.c-footer__group a,
.c-footer__privacy,
.c-lang-switcher__item {
    text-decoration: none;
}

.c-footer__menu a,
.c-footer__group a {
    color: var(--text-black);
}

.c-footer__company a,
.c-footer__series li,
.c-footer__other-hotels li {
    position: relative;
    text-decoration: none;
    display: inline-block;
}
:is(.c-footer__company a, .c-footer__series li a, .c-footer__other-hotels li a)::after {
    position: absolute;
    content: "";
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

:is(.c-footer__company a, .c-footer__series li a, .c-footer__other-hotels li a):hover::after {
    width: 100%;
    background-color: rgba(75, 75, 75, 1);
}
:is(.c-footer__company a, .c-footer__series li a, .c-footer__other-hotels li a):hover {
    background-color: transparent;
}

.c-footer__info {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.c-footer__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "privacy lang"
        "copyright copyright";
    align-items: end;
    column-gap: 0.5rem;
    row-gap: 1.25rem;
    margin-block-start: 1.5rem;
}

.c-footer__meta .c-footer__privacy {
    grid-area: privacy;
}

.c-footer__meta .c-lang-switcher {
    grid-area: lang;
    justify-self: end;
}

.c-footer__meta .c-footer__copyright {
    grid-area: copyright;
}

.c-footer__group {
    display: flex;
    flex-direction: column;
}

.c-footer__title {
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-140);
    letter-spacing: var(--letter-spacing-6);
    color: var(--gray1-5);
}

.c-footer__company,
.c-footer__series a,
.c-footer__other-hotels a {
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-6);
    color: var(--text-black);
}

.c-footer__series,
.c-footer__other-hotels {
    align-items: flex-start;
    padding: 0;
    margin: 0;
}

.c-footer__other-hotels {
    display: flex;
    flex-direction: column;
}

.c-footer__series {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-footer__privacy {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-6);
    color: var(--text-black);
}

.c-footer__copyright {
    font-size: var(--font-size-10);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-2);
    color: var(--gray2);
}

@media (min-width: 768px) {
    .c-footer__section {
        padding-block: 22.5625rem 4.0625rem;
    }

    .c-footer__bg-image {
        object-fit: none;
    }

    .c-footer__panel {
        max-width: 1391px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 19rem;
        grid-template-areas:
            "logo logo lang"
            "menu menu info"
            "privacy copyright info";
        row-gap: 0;
        column-gap: 4rem;
        padding-block: calc(var(--index-panel-padding) + 0.34rem) var(--index-panel-padding);
        padding-inline-start: calc(var(--index-panel-padding) - 0.825rem);
        padding-inline-end: var(--index-panel-padding);
        border-radius: var(--radius-footer-panel);
    }

    .c-footer__logo-link {
        grid-area: logo;
        width: 20rem;
        margin-inline-start: 0.825rem;
    }
    .c-footer__primary-nav {
        grid-area: menu;
        align-self: start;
    }

    .c-footer__menu {
        display: flex;
        flex-wrap: wrap;
        gap: 0 1rem;
        font-size: var(--font-size-20);
    }

    .c-footer__menu li a {
        border-radius: var(--radius-round);
        padding: 0.5rem 0.875rem;
    }

    .c-footer__menu li a.c-nav-link--with-icon {
        padding-inline-start: 1rem;
    }

    .c-footer__menu li .icon--arrow {
        padding-block-start: 1px;
    }

    .c-footer__menu li a:hover {
        background-color: rgba(176, 166, 157, 1);
        color: var(--text-white);
    }

    .c-footer__menu li a:hover .icon--arrow path {
        stroke: var(--text-white);
    }

    .c-footer__info,
    .c-footer__meta {
        margin-block-start: 0;
    }
    .c-footer__info {
        grid-area: info;
        display: grid;
        grid-template-areas:
            "company"
            "series"
            "others";
    }

    .c-footer__group:nth-of-type(1) {
        grid-area: company;
    }

    .c-footer__group:nth-of-type(2) {
        grid-area: series;
    }

    .c-footer__group:nth-of-type(3) {
        grid-area: others;
    }

    .c-footer__company,
    .c-footer__series a,
    .c-footer__other-hotels a {
        font-size: var(--font-size-14);
    }

    .c-footer__series {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
    }

    .c-footer__meta {
        display: contents;
    }

    .c-footer__meta .c-lang-switcher {
        grid-area: lang;
        justify-self: end;
        align-self: start;
        margin-bottom: 0;
    }

    .c-footer__meta .c-footer__privacy {
        grid-area: privacy;
        align-self: end;
        margin-inline-start: 0.825rem;
    }

    .c-footer__meta .c-footer__copyright {
        grid-area: copyright;
        align-self: end;
    }
}
/* shared utilities (used by header/footer/index) */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* shared focus-visible rules */
.c-header__menu-button:focus-visible,
.c-header__menu a:focus-visible,
.c-lang-switcher a:focus-visible,
.c-footer a:focus-visible {
    outline: 0.125rem solid var(--gray2);
    outline-offset: 0.2rem;
    border-radius: var(--radius-small);
}

/* fallback for environments without :focus-visible */
@supports not selector(:focus-visible) {
    .c-header__menu-button:focus,
    .c-header__menu a:focus,
    .c-lang-switcher a:focus,
    .c-footer a:focus {
        outline: 0.125rem solid var(--gray2);
        outline-offset: 0.2rem;
        border-radius: var(--radius-small);
    }
}

/* icon style for header and footer */
.c-nav-link--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

a.c-nav-link--with-icon::after {
    content: "";
    inline-size: 0.625rem;
    block-size: 0.375rem;
    margin-block-start: 2px;
    flex: 0 0 auto;
    background-color: var(--text-black);
    -webkit-mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='0.75,0.75 4.75,4.75 8.75,0.75' fill='none' stroke='%234b4b4b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><polyline points='0.75,0.75 4.75,4.75 8.75,0.75' fill='none' stroke='%234b4b4b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.c-header__menu li .c-nav-link--with-icon:hover::after,
.c-footer__menu li .c-nav-link--with-icon:hover::after {
    background-color: var(--text-white);
}

/* shared split CTA animation component */
.c-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.c-btn__label,
.c-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-btn-bg-default, var(--gray1-5));
    border: var(--c-btn-border-width, 2px) solid var(--c-btn-bg-default, var(--gray1-5));
    color: var(--c-btn-fg, var(--text-white));
}

.c-btn__label {
    min-height: 2.625rem;
    padding-inline: 1.25rem;
    border-radius: var(--radius-round);
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-6);
    transition:
        border-top-right-radius var(--c-btn-merge-duration, 0.28s) ease,
        border-bottom-right-radius var(--c-btn-merge-duration, 0.28s) ease;
}

.c-btn__icon {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: var(--radius-round);
    margin-inline-start: var(--c-btn-overlap, -0.125rem);
    overflow: hidden;
    transition:
        border-top-left-radius var(--c-btn-merge-duration, 0.28s) ease,
        border-bottom-left-radius var(--c-btn-merge-duration, 0.28s) ease;
}

.c-btn__icon--arrow::after {
    content: "";
    display: block;
    width: 0.83rem;
    height: 0.83rem;
    flex: 0 0 auto;
    background-color: var(--text-white);
    -webkit-mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12' fill='none'><path d='M0.454618 5.85459H14.3403M14.3403 5.85459L9.13319 0.45459M14.3403 5.85459L9.13319 11.2546' stroke='white' stroke-width='0.909474' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='12' viewBox='0 0 15 12' fill='none'><path d='M0.454618 5.85459H14.3403M14.3403 5.85459L9.13319 0.45459M14.3403 5.85459L9.13319 11.2546' stroke='white' stroke-width='0.909474' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transition:
        border-top-left-radius var(--c-btn-merge-duration, 0.28s) ease,
        border-bottom-left-radius var(--c-btn-merge-duration, 0.28s) ease;
}

@media (min-width: 768px) {
    .c-btn__label {
        min-height: 3.125rem;
        font-size: var(--font-size-15);
        padding-inline: 1.25rem;
    }

    .c-btn__icon {
        width: 3.125rem;
        height: 3.125rem;
    }
}

/* icon animation: diagonal swipe (bottom-left -> top-right -> return) */
@keyframes c-btn-icon-swipe-diagonal {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }

    45% {
        transform: translate(0.625rem, -0.625rem);
        opacity: 0;
    }

    46% {
        transform: translate(-0.625rem, 0.625rem);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* icon animation: horizontal swipe (left -> right -> return) */
@keyframes c-btn-icon-swipe-horizontal {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    45% {
        transform: translateX(0.625rem);
        opacity: 0;
    }

    46% {
        transform: translateX(-0.625rem);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* trigger animation on hover/focus and reset border radius to create "split" effect */
.c-btn:hover .c-btn__label,
.c-btn:focus-visible .c-btn__label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.c-btn:hover .c-btn__icon,
.c-btn:focus-visible .c-btn__icon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.c-btn--icon-diagonal:hover .c-btn__icon--arrow::after {
    animation: c-btn-icon-swipe-diagonal var(--c-btn-icon-swipe-duration, 0.48s) ease-out;
}
.c-btn--icon-diagonal:focus-visible .c-btn__icon--arrow::after {
    animation: c-btn-icon-swipe-diagonal var(--c-btn-icon-swipe-duration, 0.48s) ease-out;
}

.c-btn--icon-horizontal:hover .c-btn__icon--arrow::after,
.c-btn--icon-horizontal:focus-visible .c-btn__icon--arrow::after {
    animation: c-btn-icon-swipe-horizontal var(--c-btn-icon-swipe-duration, 0.48s) ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .c-btn--icon-diagonal:hover .c-btn__icon--arrow::after,
    .c-btn--icon-diagonal:focus-visible .c-btn__icon--arrow::after,
    .c-btn--icon-horizontal:hover .c-btn__icon--arrow::after,
    .c-btn--icon-horizontal:focus-visible .c-btn__icon--arrow::after {
        animation: none;
    }
}

/* footer component */

.c-footer {
    position: relative;
    min-height: 56.25rem;
    color: var(--text-black);
}

.c-footer li {
    list-style: none;
}

.c-footer__bg,
.c-footer__bg-image {
    position: absolute;
    inset: 0;
}

.c-footer__bg {
    overflow: hidden;
}

.c-footer__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-footer__section {
    position: relative;
    z-index: 1;
    padding-block: 12.5625rem 3rem;
}

.c-footer__panel {
    display: flex;
    flex-direction: column;
    padding: 4rem 1.25rem 1.5rem;
    background: var(--bg-white-94);
    border-radius: var(--radius-large);
}

.c-footer__logo-link {
    display: inline-flex;
    width: 15rem;
}

.c-footer__logo {
    width: 100%;
    height: auto;
}

.c-footer__primary-nav {
    margin-block-start: 2.5rem;
    width: 100%;
}

.c-footer__menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.5rem;
    column-gap: 0;
    justify-items: start;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-16);
    line-height: var(--line-height-100);
    letter-spacing: var(--letter-spacing-2);
}

.c-footer__info {
    margin-block-start: 3rem;
}

/* language switcher component (shared header/footer) */
.c-lang-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.25rem;
    border: 1px solid var(--gray6);
    border-radius: var(--radius-base);
    background: linear-gradient(138deg, rgba(238, 238, 238, 0.9) 10%, rgba(238, 238, 238, 0.6) 100%);
}

.c-lang-switcher__item {
    color: var(--gray3);
    font-size: var(--font-size-14);
    line-height: var(--line-height-160);
    letter-spacing: var(--letter-spacing-3);
    padding-inline: 0.45rem;
}

.c-lang-switcher__item--current {
    color: var(--text-black);
}

.c-lang-switcher__separator {
    opacity: 1;
    width: 1px;
    height: 1rem;
    background-color: var(--gray3);
}

.c-lang-switcher:has(a:hover) .c-lang-switcher__separator {
    opacity: 0;
}

a.c-lang-switcher__item:hover {
    color: var(--text-white);
    background-color: var(--gray3);
    border-radius: var(--radius-base);
}

/* refactor: footer link shared decoration */
.c-footer__menu a,
.c-footer__group a,
.c-footer__privacy,
.c-lang-switcher__item {
    text-decoration: none;
}

.c-footer__menu a,
.c-footer__group a {
    color: var(--text-black);
}

.c-footer__company a,
.c-footer__series li,
.c-footer__other-hotels li {
    position: relative;
    text-decoration: none;
    display: inline-block;
}
:is(.c-footer__company a, .c-footer__series li a, .c-footer__other-hotels li a)::after {
    position: absolute;
    content: "";
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

:is(.c-footer__company a, .c-footer__series li a, .c-footer__other-hotels li a):hover::after {
    width: 100%;
    background-color: rgba(75, 75, 75, 1);
}
:is(.c-footer__company a, .c-footer__series li a, .c-footer__other-hotels li a):hover {
    background-color: transparent;
}

.c-footer__info {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.c-footer__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "privacy lang"
        "copyright copyright";
    align-items: end;
    column-gap: 0.5rem;
    row-gap: 1.25rem;
    margin-block-start: 1.5rem;
}

.c-footer__meta .c-footer__privacy {
    grid-area: privacy;
}

.c-footer__meta .c-lang-switcher {
    grid-area: lang;
    justify-self: end;
}

.c-footer__meta .c-footer__copyright {
    grid-area: copyright;
}

.c-footer__group {
    display: flex;
    flex-direction: column;
}

.c-footer__title {
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-140);
    letter-spacing: var(--letter-spacing-6);
    color: var(--gray1-5);
}

.c-footer__company,
.c-footer__series a,
.c-footer__other-hotels a {
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-6);
    color: var(--text-black);
}

.c-footer__series,
.c-footer__other-hotels {
    align-items: flex-start;
    padding: 0;
    margin: 0;
}

.c-footer__other-hotels {
    display: flex;
    flex-direction: column;
}

.c-footer__series {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-footer__privacy {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-6);
    color: var(--text-black);
}

.c-footer__copyright {
    font-size: var(--font-size-10);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-2);
    color: var(--gray2);
}

@media (min-width: 768px) {
    .c-footer__section {
        padding-block: 22.5625rem 4.0625rem;
    }

    .c-footer__bg-image {
        object-fit: none;
    }

    .c-footer__panel {
        max-width: 1391px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 19rem;
        grid-template-areas:
            "logo logo lang"
            "menu menu info"
            "privacy copyright info";
        row-gap: 0;
        column-gap: 4rem;
        padding-block: calc(var(--index-panel-padding) + 0.34rem) var(--index-panel-padding);
        padding-inline-start: calc(var(--index-panel-padding) - 0.825rem);
        padding-inline-end: var(--index-panel-padding);
        border-radius: var(--radius-footer-panel);
    }

    .c-footer__logo-link {
        grid-area: logo;
        width: 20rem;
        margin-inline-start: 0.825rem;
    }
    .c-footer__primary-nav {
        grid-area: menu;
        align-self: start;
    }

    .c-footer__menu {
        display: flex;
        flex-wrap: wrap;
        gap: 0 1rem;
        font-size: var(--font-size-20);
    }

    .c-footer__menu li a {
        border-radius: var(--radius-round);
        padding: 0.5rem 0.875rem;
    }

    .c-footer__menu li a.c-nav-link--with-icon {
        padding-inline-start: 1rem;
    }

    .c-footer__menu li .icon--arrow {
        padding-block-start: 1px;
    }

    .c-footer__menu li a:hover {
        background-color: rgba(176, 166, 157, 1);
        color: var(--text-white);
    }

    .c-footer__menu li a:hover .icon--arrow path {
        stroke: var(--text-white);
    }

    .c-footer__info,
    .c-footer__meta {
        margin-block-start: 0;
    }
    .c-footer__info {
        grid-area: info;
        display: grid;
        grid-template-areas:
            "company"
            "series"
            "others";
    }

    .c-footer__group:nth-of-type(1) {
        grid-area: company;
    }

    .c-footer__group:nth-of-type(2) {
        grid-area: series;
    }

    .c-footer__group:nth-of-type(3) {
        grid-area: others;
    }

    .c-footer__company,
    .c-footer__series a,
    .c-footer__other-hotels a {
        font-size: var(--font-size-14);
    }

    .c-footer__series {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem;
    }

    .c-footer__meta {
        display: contents;
    }

    .c-footer__meta .c-lang-switcher {
        grid-area: lang;
        justify-self: end;
        align-self: start;
        margin-bottom: 0;
    }

    .c-footer__meta .c-footer__privacy {
        grid-area: privacy;
        align-self: end;
        margin-inline-start: 0.825rem;
    }

    .c-footer__meta .c-footer__copyright {
        grid-area: copyright;
        align-self: end;
    }
}

/* =============================================================================
   Button Component (c-btn)
   ============================================================================= */

.c-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.c-btn__label,
.c-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-btn-bg-default, var(--gray1-5));
    border: var(--c-btn-border-width, 2px) solid var(--c-btn-bg-default, var(--gray1-5));
    color: var(--c-btn-fg, var(--white));
}

.c-btn__label {
    min-height: 2.625rem;
    padding-inline: 1.25rem;
    border-radius: 100vh;
    font-family: var(--font-family-noto-sans-jp), sans-serif;
    font-size: var(--font-size-13);
    font-weight: 300;
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-6);
    transition:
        border-top-right-radius var(--c-btn-merge-duration, 0.28s) ease,
        border-bottom-right-radius var(--c-btn-merge-duration, 0.28s) ease;
}

.c-btn__icon {
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 100vh;
    margin-inline-start: var(--c-btn-overlap, -0.125rem);
    overflow: hidden;
    transition:
        border-top-left-radius var(--c-btn-merge-duration, 0.28s) ease,
        border-bottom-left-radius var(--c-btn-merge-duration, 0.28s) ease;
}

.c-btn__icon>svg {
    display: block;
}

/* 追加: c-btn--icon-horizontal の矢印を45度左に回転 */
.c-btn--icon-horizontal .c-btn__icon>svg {
    transform: rotate(-45deg);
}

/* Brand specific button colors */
.hotel-card--livin-guu .c-btn__label,
.hotel-card--livin-guu .c-btn__icon {
    background-color: var(--livin-guu_1);
    border-color: var(--livin-guu_1);
}

.hotel-card--marimore .c-btn__label,
.hotel-card--marimore .c-btn__icon {
    background-color: var(--marimore_1);
    border-color: var(--marimore_1);
}

.hotel-card--ichi-guu .c-btn__label,
.hotel-card--ichi-guu .c-btn__icon {
    background-color: #AE9E7F;
    border-color: #AE9E7F;
}

.hotel-card--series .c-btn__label,
.hotel-card--series .c-btn__icon {
    background-color: var(--and-series_1);
    border-color: var(--and-series_1);
}

.hotel-card--other .c-btn__label,
.hotel-card--other .c-btn__icon,
.hotel-card__other-item .c-btn__label,
.hotel-card__other-item .c-btn__icon {
    background-color: var(--other-hotels_1);
    border-color: var(--other-hotels_1);

}
.hotel-card--other .c-btn__label {
    min-height: 2.1875rem;
    padding-inline: 1.25rem;
}
.hotel-card__other-cta .c-btn__icon {
    width: 1.9rem;
    height: 1.9rem;
}

/* --- IGNORE --- icon animation: diagonal swipe (bottom-left -> top-right -> return) */
@keyframes c-btn-icon-swipe-diagonal {
    0% {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 1;
    }

    45% {
        transform: translate(0.625rem, -0.625rem) rotate(-45deg);
        opacity: 0;
    }

    46% {
        transform: translate(-0.625rem, 0.625rem) rotate(-45deg);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 1;
    }
}

/* --- IGNORE --- icon animation: horizontal swipe (left -> right -> return) */
@keyframes c-btn-icon-swipe-horizontal {
    0% {
        transform: translateX(0) rotate(-45deg);
        opacity: 1;
    }

    45% {
        transform: translateX(0.625rem) rotate(-45deg);
        opacity: 0;
    }

    46% {
        transform: translateX(-0.625rem) rotate(-45deg);
        opacity: 0;
    }

    100% {
        transform: translateX(0) rotate(-45deg);
        opacity: 1;
    }
}

.c-btn:hover .c-btn__label,
.c-btn:focus-visible .c-btn__label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.c-btn:hover .c-btn__icon,
.c-btn:focus-visible .c-btn__icon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.c-btn--icon-diagonal:hover .c-btn__icon>svg,
.c-btn--icon-diagonal:focus-visible .c-btn__icon>svg {
    animation: c-btn-icon-swipe-diagonal var(--c-btn-icon-swipe-duration, 0.48s) ease-out;
}

.c-btn--icon-horizontal:hover .c-btn__icon>svg,
.c-btn--icon-horizontal:focus-visible .c-btn__icon>svg {
    animation: c-btn-icon-swipe-diagonal var(--c-btn-icon-swipe-duration, 0.48s) ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .c-btn--icon-diagonal:hover .c-btn__icon>svg,
    .c-btn--icon-diagonal:focus-visible .c-btn__icon>svg,
    .c-btn--icon-horizontal:hover .c-btn__icon>svg,
    .c-btn--icon-horizontal:focus-visible .c-btn__icon>svg {
        animation: none;
    }
}

@media (min-width: 768px) {

    .c-btn__label {
        min-height: 3.125rem;
        font-size: var(--font-size-13);
        padding-inline: 1.25rem;
    }

    .c-btn__icon {
        width: 3.125rem;
        height: 3.125rem;
    }

}