@layer reset, base, layout, components, utilities;

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
    :where(html) {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    :where(body, h1, h2, p, ol, ul, figure) {
        margin: 0;
    }
    :where(ol, ul) {
        padding: 0;
        list-style: none;
    }
    :where(img, svg, table, pre) {
        max-width: 100%;
        height: auto;
    }
    :where(table) {
        border-collapse: collapse;
        border-spacing: 0;
    }
    :where(a) {
        color: inherit;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.15em;
    }
}

@layer base {
    :root {
        --color-page-bg: #f2cc1a;
        --color-page-pattern-a: rgb(255 255 255 / 24%);
        --color-page-pattern-b: rgb(255 255 255 / 14%);
        --color-ink: #222;
        --color-muted: #5f5f5f;
        --color-header-blue: #0000ff;
        --color-header-text: #fff;
        --color-surface: #fff;
        --color-surface-soft: rgb(255 255 255 / 88%);
        --color-yellow: #f2cc1a;
        --color-bubble-blue: #1178b7;
        --color-bubble-orange: #f2a40b;
        --color-table-border: #b7c2c0;
        --color-table-stripe: #d8e2e0;
        --color-notice-bg: #fff4c9;
        --color-notice-border: #e2cd74;
        --color-contact-bg: #257aba;
        --color-contact-text: #fff;
        --color-brand-deep: #15314a;
        --color-brand-blue: #0f6fa8;
        --color-brand-green: #2f8f52;
        --color-brand-orange: #e29100;
        --font-family:
            "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        --content-max: 980px;
        --space-2xs: 0.25rem;
        --space-xs: 0.5rem;
        --space-sm: 0.75rem;
        --space-md: 1rem;
        --space-lg: 1.25rem;
        --space-xl: 1.5rem;
        --space-2xl: 2rem;
        --radius-xs: 0.25rem;
        --radius-sm: 0.5rem;
        --radius-md: 0.75rem;
        --shadow-soft: 0 10px 24px rgb(0 0 0 / 10%);
    }

    :where(body) {
        min-width: 320px;
        font-family: var(--font-family);
        font-size: 1rem;
        line-height: 1.5;
        color: var(--color-ink);
        background-color: var(--color-page-bg);
        background-image:
            radial-gradient(
                circle at 0 0,
                var(--color-page-pattern-a) 0 13%,
                transparent 14%
            ),
            radial-gradient(
                circle at 100% 100%,
                var(--color-page-pattern-a) 0 14%,
                transparent 15%
            ),
            linear-gradient(
                140deg,
                var(--color-page-pattern-b) 0 32%,
                transparent 33%
            ),
            linear-gradient(
                0deg,
                rgb(255 255 255 / 12%),
                rgb(255 255 255 / 12%)
            );
        background-attachment: fixed;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@layer layout {
    :where(.layout-container) {
        width: min(100% - (var(--space-md) * 2), var(--content-max));
        margin-inline: auto;
    }

    :where(.page__main) {
        padding-block: var(--space-md) var(--space-2xl);
    }
}

@layer components {
    :where(.header-bar) {
        padding-block: var(--space-md) 0;
    }

    :where(.header-bar .layout-container) {
        background: linear-gradient(180deg, #0f26ff 0%, #0016d6 100%);
        border-radius: var(--radius-sm);
        border: 1px solid rgb(255 255 255 / 30%);
        box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
    }

    :where(.header-bar__title) {
        padding: var(--space-sm) var(--space-md);
        text-align: center;
        font-size: clamp(2rem, 1.636rem + 1.82vw, 2.75rem);
        font-weight: 700;
        line-height: 1.2;
        color: var(--color-header-text);
        letter-spacing: 0.03em;
    }

    :where(.page__title) {
        margin-top: var(--space-lg);
        font-size: clamp(1.1rem, 3.4vw, 1.45rem);
        line-height: 1.3;
        color: var(--color-brand-deep);
        text-shadow: 0 1px 0 rgb(255 255 255 / 36%);
    }

    :where(.breadcrumb) {
        margin-top: var(--space-sm);
    }

    :where(.breadcrumb__list) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs);
        font-size: 0.8125rem;
        color: var(--color-muted);
    }

    :where(.breadcrumb__item + .breadcrumb__item)::before {
        content: ">";
        margin-inline: 0.35rem;
        color: #848484;
    }

    :where(.breadcrumb__link) {
        text-decoration: none;
    }
    :where(.breadcrumb__link:hover, .breadcrumb__link:focus-visible) {
        text-decoration: underline;
    }

    :where(.top) {
        margin-top: var(--space-lg);
        border-radius: var(--radius-md);
        padding: var(--space-md);
        background: rgb(255 255 255 / 28%);
        border: 1px solid rgb(255 255 255 / 50%);
        box-shadow: var(--shadow-soft);
    }

    :where(.top__lead) {
        margin-bottom: var(--space-sm);
        font-size: clamp(0.88rem, 2.8vw, 1.02rem);
        line-height: 1.55;
        font-weight: 700;
        color: var(--color-brand-deep);
    }

    :where(.top__card) {
        border: 1px solid var(--color-table-border);
        border-radius: var(--radius-md);
        background: var(--color-surface-soft);
        padding: var(--space-md);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%);
    }

    :where(.top__logo) {
        display: block;
        width: min(230px, 100%);
        margin-inline: auto;
    }

    :where(.facility-grid) {
        margin-top: var(--space-md);
        display: grid;
        gap: var(--space-sm);
        grid-auto-rows: 1fr;
    }

    :where(.facility-grid__item) {
        min-width: 0;
        display: flex;
    }

    :where(.facility-grid__link) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        justify-items: center;
        min-width: 0;
        block-size: clamp(4.9rem, 15vw, 5.3rem);
        inline-size: 100%;
        padding: var(--space-sm);
        border: 1px solid var(--color-table-border);
        border-radius: var(--radius-sm);
        text-decoration: none;
        background: rgb(255 255 255 / 90%);
        box-shadow: 0 4px 12px rgb(0 0 0 / 7%);
        transition:
            transform 160ms ease,
            box-shadow 160ms ease,
            border-color 160ms ease;
    }

    :where(.facility-grid__link:hover, .facility-grid__link:focus-visible) {
        border-color: #8aa8bb;
        box-shadow: 0 9px 20px rgb(0 0 0 / 12%);
        transform: translateY(-2px);
    }

    :where(.facility-grid__image) {
        inline-size: min(100%, 150px);
        block-size: clamp(36px, 10.5vw, 52px);
        object-fit: contain;
        object-position: center;
    }

    :where(.facility-grid__name) {
        min-width: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-block-size: calc(1.35em * 2);
        font-weight: 700;
        font-size: 0.95rem;
        line-height: 1.35;
        color: #1f2d39;
    }

    :where(.facility) {
        margin-top: var(--space-md);
    }

    :where(.facility__hero) {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: grid;
        gap: 0.72rem;
        grid-template-areas:
            "title"
            "left"
            "right";
        padding: clamp(1rem, 3.5vw, 1.4rem);
        border-radius: calc(var(--radius-md) + 0.15rem);
        background:
            linear-gradient(165deg, rgb(255 255 255 / 93%) 0%, rgb(255 255 255 / 82%) 100%);
        border: 1px solid rgb(255 255 255 / 70%);
        box-shadow: var(--shadow-soft);
    }

    :where(.facility__hero)::before,
    :where(.facility__hero)::after {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
    }

    :where(.facility__hero)::before {
        inset: 0;
        background:
            linear-gradient(90deg, rgb(21 49 74 / 7%), rgb(21 49 74 / 7%)) left 1rem top 0.9rem / calc(100% - 2rem) 1px no-repeat;
    }

    :where(.facility__hero)::after {
        content: none;
    }

    :where(.facility__hero-title) {
        grid-area: title;
        justify-self: center;
        display: inline-block;
        padding: 0.42rem 0.88rem;
        border-radius: 0.6rem;
        background: linear-gradient(140deg, #1c86cd, #16669f);
        box-shadow: 0 4px 10px rgb(22 102 159 / 24%);
        color: #fff;
        font-size: clamp(1.5rem, 1.2727rem + 1.1364vw, 2rem);
        line-height: 1.2;
        letter-spacing: 0.04em;
        text-align: center;
        text-shadow: 0 1px 1px rgb(0 0 0 / 18%);
    }

    :where(.facility__bubble) {
        min-width: 0;
        max-width: none;
        padding: 0.72rem 0.86rem;
        border-radius: 0.72rem;
        border: 1px solid rgb(21 49 74 / 14%);
        font-size: clamp(0.82rem, 2.45vw, 0.9rem);
        line-height: 1.46;
        box-shadow: 0 4px 10px rgb(0 0 0 / 8%);
    }

    :where(.facility__bubble--left) {
        grid-area: left;
        justify-self: start;
        inline-size: 100%;
        color: #1d557f;
        font-weight: 700;
        background: linear-gradient(160deg, rgb(231 245 255 / 96%), rgb(211 236 252 / 88%));
    }

    :where(.facility__bubble--right) {
        grid-area: right;
        justify-self: start;
        inline-size: 100%;
        color: #5b4300;
        background: linear-gradient(160deg, rgb(255 248 226 / 96%), rgb(255 238 184 / 88%));
        border-color: rgb(233 190 76 / 66%);
    }

    :where(.facility__brand) {
        margin-top: var(--space-sm);
        display: flex;
        align-items: center;
        gap: var(--space-md);
        min-width: 0;
        padding: var(--space-md);
        border-radius: var(--radius-md);
        background: var(--color-surface-soft);
        border: 1px solid var(--color-table-border);
        box-shadow: var(--shadow-soft);
    }

    :where(.facility__logo) {
        flex: 0 0 clamp(70px, 26vw, 120px);
        width: clamp(70px, 26vw, 120px);
    }

    :where(.facility__name) {
        font-size: clamp(1.05rem, 4.3vw, 1.55rem);
        font-weight: 700;
        line-height: 1.2;
    }

    :where(.tenant) {
        margin-top: var(--space-lg);
    }

    :where(.tenant__heading) {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: clamp(1rem, 3.7vw, 1.3rem);
        line-height: 1.3;
        color: var(--color-brand-deep);
    }

    :where(.tenant__heading)::before {
        content: "";
        inline-size: 0.3rem;
        block-size: 1.08em;
        border-radius: 999px;
        background: linear-gradient(180deg, #1d89ca, #0f6fa8);
        flex: none;
    }

    :where(.tenant__table-wrap) {
        margin-top: var(--space-sm);
    }

    :where(.tenant-table) {
        width: 100%;
        border: 1px solid var(--color-table-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--color-surface);
        display: block;
        box-shadow: 0 10px 22px rgb(0 0 0 / 8%);
    }

    :where(.tenant-table__head) {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    :where(.tenant-table__body) {
        display: grid;
        gap: 1px;
        padding: 1px;
        background: var(--color-table-border);
    }

    :where(.tenant-table__row) {
        display: grid;
        grid-template-columns: 2ch minmax(0, 1fr);
        gap: 0.2rem 0.38rem;
        padding: var(--space-sm);
        background: var(--color-surface);
    }

    :where(.tenant-table__row:nth-child(even)) {
        background: var(--color-table-stripe);
    }

    :where(.tenant-table__cell) {
        min-width: 0;
        padding: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: top;
    }

    :where(.tenant-table__cell--no) {
        grid-column: 1;
        display: block;
        font-weight: 700;
        white-space: nowrap;
        color: #2d4a5f;
        line-height: 1.34;
        font-variant-numeric: tabular-nums;
    }

    :where(.tenant-table__cell--no)::before {
        content: none;
    }

    :where(.tenant-table__cell--name) {
        grid-column: 2;
        font-size: 0.98rem;
        line-height: 1.33;
        font-weight: 700;
        color: #172534;
        text-align: left;
    }

    :where(.tenant-table__cell--detail) {
        grid-column: 1 / -1;
        font-size: 1rem;
        line-height: 1.55;
        color: #2f2f2f;
    }

    :where(.tenant-table__cell--detail)::before {
        content: none;
    }

    :where(.notice) {
        margin-top: var(--space-lg);
        padding: var(--space-md);
        border-radius: var(--radius-md);
        border: 1px solid var(--color-notice-border);
        background: var(--color-notice-bg);
        box-shadow: 0 10px 22px rgb(0 0 0 / 8%);
    }

    :where(.notice__heading) {
        font-size: 1rem;
        line-height: 1.3;
    }
    :where(.notice__text) {
        margin-top: var(--space-xs);
        font-size: 0.9rem;
        line-height: 1.55;
    }

    :where(.contact) {
        margin-top: var(--space-md);
        padding: var(--space-md);
        border-radius: var(--radius-md);
        background: linear-gradient(145deg, #2f86c5, #1f6ea9);
        color: var(--color-contact-text);
        box-shadow: 0 10px 22px rgb(0 0 0 / 10%);
    }

    :where(.contact__heading) {
        font-size: 1rem;
        line-height: 1.3;
    }
    :where(.contact__office) {
        margin-top: var(--space-xs);
        font-size: 0.92rem;
    }
    :where(.contact__address) {
        margin-top: var(--space-xs);
        font-style: normal;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    @media (min-width: 480px) {
        :where(.layout-container) {
            width: min(100% - (var(--space-xl) * 2), var(--content-max));
        }
        :where(.facility-grid) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        :where(.facility__hero) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-areas:
                "title title"
                "left right";
            align-items: stretch;
        }
        :where(.facility-grid__link) {
            block-size: 5.25rem;
        }
    }

    @media (min-width: 768px) {
        :where(.page__main) {
            padding-block: var(--space-lg) var(--space-2xl);
        }
        :where(.facility-grid) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        :where(.tenant-table) {
            display: table;
        }

        :where(.tenant-table__head) {
            position: static;
            inline-size: auto;
            block-size: auto;
            margin: 0;
            overflow: visible;
            clip: auto;
            clip-path: none;
            white-space: normal;
            display: table-header-group;
        }

        :where(.tenant-table__head-cell) {
            display: table-cell;
            padding: var(--space-sm) var(--space-md);
            background: #fff;
            border-bottom: 1px solid var(--color-table-border);
            font-size: 0.88rem;
            line-height: 1.35;
            text-align: left;
        }

        :where(.tenant-table__head-cell--no),
        :where(.tenant-table__cell--no) {
            width: 4.4rem;
        }
        :where(.tenant-table__head-cell--name),
        :where(.tenant-table__cell--name) {
            width: 16.5rem;
        }

        :where(.tenant-table__body) {
            display: table-row-group;
            padding: 0;
            background: transparent;
        }
        :where(.tenant-table__row) {
            display: table-row;
            padding: 0;
            background: transparent;
        }

        :where(.tenant-table__cell) {
            display: table-cell;
            padding: 0.54rem var(--space-md);
            border-bottom: 1px solid var(--color-table-border);
            font-size: 0.86rem;
            line-height: 1.45;
        }

        :where(.tenant-table__cell--no) {
            color: #44515c;
        }

        :where(.tenant-table__row:last-child .tenant-table__cell) {
            border-bottom: 0;
        }
        :where(.tenant-table__row:nth-child(even) .tenant-table__cell) {
            background: var(--color-table-stripe);
        }
        :where(.tenant-table__row:nth-child(odd) .tenant-table__cell) {
            background: var(--color-surface);
        }

        :where(.tenant-table__cell--detail)::before {
            content: none;
        }
    }

    @media (min-width: 1024px) {
        :where(.header-bar__title) {
            padding-block: 0.6rem;
        }
        :where(.page__title) {
            margin-top: var(--space-xl);
        }
        :where(.facility-grid) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        :where(.tenant-table__cell) {
            font-size: 0.9rem;
        }
    }

    @keyframes rise-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        :where(.top, .facility, .tenant, .notice, .contact) {
            animation: rise-in 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
        }

        :where(.facility) {
            animation-delay: 60ms;
        }
        :where(.tenant) {
            animation-delay: 120ms;
        }
        :where(.notice, .contact) {
            animation-delay: 160ms;
        }
    }
}

@layer utilities {
    .u-sr-only {
        position: absolute !important;
        inline-size: 1px !important;
        block-size: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }

    .u-nowrap {
        white-space: nowrap !important;
    }
}