:root {
    /* color-base */
    --black: #4b4b4b;
    --gray1: #544a42;
    --gray1-5: #716963;
    --gray2: #82776e;
    --gray3: #b0a69d;
    --gray4: #dbd9d7;
    --gray5: #ebe7e5;
    --gray6: #eeeeee;
    --white: #ffffff;
    --beige: #fbf7f3;
    --livin-guu: #06646d;
    --livin-guu_1: #7da7a0;
    --livin-guu_2: #b2c6c7;
    --marimore: #444f5e;
    --marimore_1: #616c7c;
    --marimore_2: #b8bfc9;
    --ichi-guu: #846e42;
    --ichi-guu_1: #ae9e7f;
    --ichi-guu_2: #d6cdbf;
    --and-series: #3f643f;
    --and-series_1: #8aa28a;
    --and-series_2: #c0d1c0;
    --other-hotels: #965858;
    --other-hotels_1: #a88f8f;
    --other-hotels_2: #d3c5c5;

    --text-white: var(--white);
    --text-black: var(--black);

    --bg-white: var(--white);
    --bg-white-94: rgba(255, 255, 255, 0.94);
    --bg-hero-bluegreen: #a5babb;
    --bg-hero-greige: #bbb3a5;
    --bg-hero-dustypink: var(--other-hotels_2);
    --bg-hero-green: #aec2ae;
    --bg-hero-dustyblue: #a5aebb;
    --bg-hero-beige: #e9dbcc;
    --bg-hero-overlay: rgba(93, 70, 50, 0.4);
    --bg-news-surface: #fafafa;

    --border-white: var(--white);
    --border-black: var(--black);

    /* font-family-base */
    --font-family-eng: "Lato", "Roboto", Helvetica;
    --font-family-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans";

    /* font-weight-base */
    --font-weight-light: 300;
    --font-weight-regular: 400;

    /* font-size-base (px -> rem) */
    --font-size-10: 0.625rem;
    --font-size-11: 0.6875rem;
    --font-size-12: 0.75rem;
    --font-size-13: 0.8125rem;
    --font-size-14: 0.875rem;
    --font-size-15: 0.9375rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-22: 1.375rem;
    --font-size-24: 1.5rem;
    --font-size-28: 1.75rem;
    --font-size-32: 2rem;
    --font-size-40: 2.5rem;

    /* line-height-base (percentage -> unitless) */
    --line-height-100: 1;
    --line-height-140: 1.4;
    --line-height-160: 1.6;
    --line-height-170: 1.7;
    --line-height-200: 2;

    /* letter-spacing-base (percentage -> em) */
    --letter-spacing-2: 0.02em;
    --letter-spacing-3: 0.03em;
    --letter-spacing-4: 0.04em;
    --letter-spacing-6: 0.06em;

    /* border-radius-base */
    --radius-small: 0.25rem;
    --radius-base: 0.625rem;
    --radius-large: 1.25rem;
    --radius-xl: 2.5rem;
    --radius-xxl: 5rem;
    --radius-round: calc(1px/0);
    --radius-footer-panel: 3.75rem;

    /* layout-common (implementation-minimum) */
    --layout-inline-padding: clamp(1rem, 4vw, 1.25rem);
    --width-100per: 100%;
    --width-section-max: calc(100% - (var(--layout-inline-padding) * 2.5));

    --layout-space-base: clamp(5rem, 3.875rem + 4.8vw, 7.5rem);
    --layout-space-small: clamp(4rem, 3.2rem + 2.4vw, 5rem);
    --layout-space-large: clamp(6rem, 4.8rem + 3.6vw, 7.5rem);

    --layout-gap: clamp(2rem, 1.25rem + 2.4vw, 3rem);
}

@media (min-width: 768px) {
    :root {
        --layout-inline-padding: clamp(2rem, 3.5vw, 2.5rem);
        --width-section-max: calc(var(--width-100per) - (var(--layout-inline-padding) * 2));

        --index-panel-padding: clamp(1.5rem, 4.5vw, 6.4375rem);
    }
}