#hallway-contents {
    position: fixed;
    inset: 0;
    z-index: 100;

    pointer-events: none;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(0, 0, 0, 0.25);
}

/* =====================================
   NUMBER
===================================== */

.hallway-number {
    display: block;

    margin-bottom: 18px;

    font-size: 11px;
    font-weight: 300;

    letter-spacing: 0.3em;

    color: rgba(255, 255, 255, 0.45);
}


/* =====================================
   LINE
===================================== */

.hallway-line {
    width: 45px;
    height: 1px;

    margin-bottom: 28px;

    background:
        rgba(255, 255, 255, 0.7);

    transition:
        width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hallway-content.active .hallway-line {
    width: 110px;
}


/* =====================================
   CATEGORY
===================================== */

.hallway-category {
    margin: 0 0 10px;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: 0.35em;

    color: rgba(255, 255, 255, 0.5);
}


/* =====================================
   TITLE
===================================== */

.hallway-content h2 {
    margin: 0;

    font-size: clamp(38px, 5vw, 72px);
    font-weight: 300;

    line-height: 1.15;

    letter-spacing: 0.04em;

    color: #fff;
}


/* =====================================
   DESCRIPTION
===================================== */

.hallway-description {
    margin: 24px 0 0;

    font-size: 13px;
    font-weight: 300;

    line-height: 2;

    letter-spacing: 0.12em;

    color: rgba(255, 255, 255, 0.65);
}


/* =====================================
   LINK
===================================== */

.hallway-link {
    display: inline-flex;

    align-items: center;
    gap: 24px;

    margin-top: 38px;

    padding-bottom: 8px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.35);

    color: #fff;

    font-size: 10px;

    letter-spacing: 0.25em;

    text-decoration: none;

    transition:
        gap 0.4s ease,
        border-color 0.4s ease;
}

.hallway-link:hover {
    gap: 34px;

    border-color: #fff;
}

.hallway-link span {
    font-size: 16px;
    font-weight: 200;
}


.hallway-content {
    position: absolute;
    top: 50%;

    width: min(520px, 84vw);

    color: #fff;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.8s ease,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.8s;
}


/* ==============================
   左側
============================== */

.hallway-content.left {
    left: 22%;
    right: auto;

    text-align: left;

    transform:
        translateY(-45%) translateX(-20px);
}

.hallway-content.left::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(ellipse at left center,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.3) 45%,
            rgba(0, 0, 0, 0) 75%);
    filter: blur(15px);
    pointer-events: none;
}

/* ==============================
   右側
============================== */

.hallway-content.right {
    right: 22%;
    left: auto;

    text-align: right;

    transform:
        translateY(-45%) translateX(20px);
}

.hallway-content.right::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        radial-gradient(ellipse at right center,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.3) 45%,
            rgba(0, 0, 0, 0) 75%);

    /* 背景だけぼかす */
    filter: blur(15px);

    pointer-events: none;
}

.hallway-content.right .hallway-line {
    margin-left: auto;
}


/* 表示 */
.hallway-content.left.active,
.hallway-content.right.active {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%) translateX(0);

    pointer-events: auto;
}