:root {
    /* Color Palette */
    /* Color Palette - Aeon Magenta Overhaul */
    --color-gold: #c5a059;
    /* Keep: Elegant gold/yellow for premium accent */
    --color-gold-light: #ffe6f2;
    /* Replace: Cream -> Pale Rose (Backgrounds) */

    --color-orange: #B60081;
    /* Replace: Primary Orange -> Aeon Magenta (Primary) */
    --color-red: #99006b;
    /* Replace: Red -> Deep Magenta (Secondary/Accent) */

    --color-blue: #0068b7;
    /* Trustworthy blue (Keep for links/neutrality) */
    --color-pink: #B60081;
    /* Replace: Pink -> Aeon Magenta (Unified) */

    --color-text-main: #333333;
    --color-text-light: #666666;

    --color-bg-light: #fff0f5;
    /* Replace: Grayish -> Lavender Blush (Base BG) */
    --color-bg-contact: #fff0f5;
    /* Replace: Pinkish -> Lavender Blush (Unified Contact) */
    --white: #ffffff;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 32px;
    --spacing-lg: 64px;
    --spacing-xl: 96px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--color-text-main);
    line-height: 1.6;
    background-color: var(--white);
    font-weight: 400;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.8;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.text-center {
    text-align: center;
}

.text-gold {
    color: var(--color-gold);
}

.text-orange {
    color: var(--color-orange);
}

.text-red {
    color: var(--color-red);
}

.text-blue {
    color: var(--color-blue);
}

.font-bold {
    font-weight: 700;
}

.section {
    padding: var(--spacing-lg) 0;
}

.section-title {
    font-size: 28.8px;
    font-weight: 700;
    text-align: left;
    margin-bottom: var(--spacing-md);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12.8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #eaeaea;
    color: var(--color-orange);
}

.section-title::before {
    content: '';
    display: block;
    width: 6px;
    height: 1.5em;
    background-color: currentColor;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 35.2px;
    }
}

/* Hero Section */
.hero {
    position: relative;
    background-color: #f0f0f0;
    /* Placeholder for image */
    background-image: url('../images/hero_image.png');
    /* Using placeholder, logic implies user will swap */
    background-size: cover;
    background-position: center;
    padding: 32px 0;
    /* Reduced from spacing-xl (96px) to maximize internal space */
    min-height: 560px;
    /* Huge height to force open center on PC */
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: stretch;
    /* Stretch to allow content to fill height */
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.35);
    /* Overlay to make text readable */
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Push Top and Bottom apart */
    flex: 1;
    /* Force expansion to fill parent height */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-top-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    /* Pushed to absolute top */
}

.hero-bottom-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    /* Pushed to absolute bottom */
    margin-top: auto;
    /* Push to bottom if space allows */
}

@media (min-width: 768px) {
    .hero-bottom-group {
        padding-top: 80px;
        /* Force push down away from center faces */
    }
}

.hero-header {
    background: var(--color-gold);
    color: var(--white);
    display: inline-block;
    padding: 8px 32px;
    border-radius: var(--radius-full);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-md);
}

.hero-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--color-text-main);
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 48px;
        /* Reduced from 64px to clear faces */
        margin-bottom: 16px;
        /* Tighter margin */
        line-height: 1.4;
    }
}

.hero-badge {
    position: absolute;
    top: 60px;
    /* Moved down */
    right: 20px;
    /* Moved to Right */
    left: auto;
    background: var(--color-orange);
    /* Magenta Badge */
    color: var(--white);
    width: 146px;
    height: 146px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transform: rotate(-10deg);
    z-index: 10;
    line-height: 1.2;
}

.badge-top {
    font-size: 11.4px;
    /* Reduced from 16px */
    font-weight: 700;
    border-bottom: 2px solid white;
    margin-bottom: 2px;
    padding-bottom: 1px;
}

.badge-amount {
    font-size: 36.4px;
    /* Reduced from 60.8px */
    font-family: sans-serif;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -2px;
    margin: 2px 0;
}

.badge-sub {
    font-size: 12.5px;
    /* Reduced from 17.6px */
    font-weight: 700;
    border-bottom: 2px solid white;
    margin-bottom: 2px;
    padding-bottom: 2px;
}

.badge-bottom {
    display: flex;
    align-items: center;
    gap: 5px;
}

.badge-present {
    font-size: 14.6px;
    /* Reduced from 22.4px */
    font-weight: 900;
    color: #ffff00;
    /* Yellow */
}

.badge-bottom .fa-gift {
    color: #daa520;
    /* Gold icon */
    font-size: 30.2px;
}

.badge-note {
    font-size: 10.4px;
    color: #fff;
    margin-top: 2px;
    font-weight: 700;
    line-height: 1;
}

.hero-period {
    background: linear-gradient(135deg, #d63384 0%, #B60081 100%);
    color: var(--white);
    padding: 16px 48px;
    font-size: 24px;
    font-weight: 700;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    display: inline-block;
}

@media (max-width: 767px) {

    /* Reset Parent Hero Padding/Height for Mobile to avoid double spacing */
    .hero {
        padding: 0;
        min-height: auto;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        padding-top: var(--spacing-md);
        /* Standard spacing */
        justify-content: space-between;
        /* Force Top/Bottom Split */
        min-height: 550px;
        /* Increased to show background image faces */
        padding-bottom: var(--spacing-md);
    }

    .hero-top-group {
        margin-top: 0;
        /* Override desktop 5vh to push higher */
    }

    .hero-bottom-group {
        margin-bottom: 0;
        /* Reset bottom margin to rely on padding */
    }

    /* 1. Simplify Location Header (Bigger) */
    .hero-header {
        background: rgba(255, 255, 255, 0.85);
        /* Subtle background for weight */
        color: var(--color-text-main);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        /* Soft shadow */
        padding: 4.8px 12.8px;
        border-radius: 4px;
        margin-bottom: 12.8px;
        font-size: 12px;
        /* Reduced from 16px */
        display: inline-block;
        /* Changed from block to inline-block for 'tag' feel? Or keep block? User wanted 're-adjustment'. Let's keep it centered but cleaner */
        width: auto;
        /* Auto width looks better with bg */
        margin-left: auto;
        margin-right: auto;
        text-shadow: none;
    }

    .hero-header i {
        color: var(--color-gold);
        margin-right: 6px;
    }

    /* 2. Title Adjustment (HUGE) */
    .hero-title {
        font-size: 32px;
        /* Reduced from 51.2px */
        margin-bottom: 16px;
        line-height: 1.25;
        width: 100%;
        text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.8);
        /* Stronger shadow for readability */
    }

    /* 3. Simplify Period (Wide & Bold) */
    .hero-period {
        background: rgba(255, 255, 255, 0.95);
        color: var(--color-orange);
        padding: 10px 16px;
        font-size: 14px;
        /* Reduced from 20px */
        font-weight: 900;
        border: 3px solid var(--color-orange);
        /* Thicker border */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        margin-top: 16px;
        display: block;
        /* Full line block */
        width: 90%;
        /* Wide */
        margin-left: auto;
        margin-right: auto;
        border-radius: 50px;
        /* Pill */
    }

    /* 4. Floating Badge (Restored) */
    .hero-badge {
        position: absolute;
        top: 60px;
        /* Moved down from 20px */
        right: 20px;
        left: auto;
        width: 94px;
        height: 94px;
        background: var(--color-orange);
        /* Aeon Magenta */
        color: var(--white);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        transform: rotate(12deg);
        z-index: 20;
        line-height: 1.2;
    }

    .badge-top {
        border-bottom: 2px solid white;
        margin-bottom: 0px;
        /* Removed margin */
        margin-right: 0;
        font-size: 7.3px;
        /* Reduced from 9.6px */
        padding-bottom: 0px;
    }

    .badge-amount {
        font-size: 21.8px;
        /* Reduced from 32px */
        margin: -1px 0 1px 0;
        /* Tighten vertical space */
        letter-spacing: -2px;
        line-height: 1;
    }

    .badge-sub {
        border-bottom: 2px solid white;
        margin-bottom: 2px;
        margin-right: 0;
        font-size: 8.3px;
        /* Reduced from 11.2px */
        padding-bottom: 1px;
        line-height: 1;
    }

    .badge-bottom {
        font-size: 10.4px;
        /* Reduced from 13.6px */
        margin-left: 0;
        gap: 2px;
        position: static;
        /* Let it flow inside */
        margin-top: 0;
    }

    .badge-present {
        font-size: 10.4px;
        /* Reduced from 14.4px */
        font-weight: 900;
        color: #ffff00;
        text-shadow: 1px 1px 0 var(--color-red);
        /* Outline effect for contrast */
    }

    .badge-bottom .fa-gift {
        font-size: 10.4px;
        /* Reduced from 14.4px */
    }

    .badge-note {
        font-size: 6.2px;
        margin-top: 1px;
    }
}

/* Points Grid */
.points-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .points-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.points-section-container {
    background-color: var(--color-bg-light);
    /* Soft orange/beige background */
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
}

/* New V2 Point Card Design */
.point-card-v2 {
    background: #fff;
    border-radius: 12px;
    /* Removed global padding to allow full-width image */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    /* gap removed to handle spacing via padding */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* Ensures content respects border radius */
}

.point-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.point-header-v2 {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 16px 24px;
    /* Added padding here */
}

.point-badge-v2 {
    background: var(--color-orange);
    /* Dark Blue */
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.badge-label {
    font-size: 10.4px;
    font-weight: 700;
    margin-bottom: 2px;
}

.badge-number {
    font-size: 28.8px;
    font-weight: 900;
    line-height: 0.9;
}

.point-title-group {
    flex: 1;
}

.point-catch {
    color: var(--color-gold);
    /* Gold/Orange */
    font-weight: 700;
    font-size: 13.6px;
    margin-bottom: 3.2px;
}

.point-title {
    font-size: 17.6px;
    font-weight: 700;
    line-height: 1.3;
    color: #333;
}

.point-img-container {
    width: 100%;
}

.point-img-container img {
    width: 100%;
    height: auto;
    border-radius: 0;
    /* Full width means no corners */
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.point-desc-v2 {
    padding: 16px 24px 24px 24px;
    /* Added padding here */
}

.point-summary {
    font-size: 14.4px;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 16px;
    font-weight: 700;
}

.point-list-box {
    background-color: var(--color-gold-light);
    /* Light beige matching image */
    border: 1px solid #d4cba6;
    /* Subtle border */
    border-radius: 8px;
    padding: 16px;
    position: relative;
}

.point-list-box ul {
    list-style: none;
    /* Removed default bullets to use custom ones if needed, or keep simple */
    padding-left: 0;
}

.point-list-box ul li {
    font-size: 13.6px;
    line-height: 1.5;
    color: #555;
    position: relative;
    padding-left: 16px;
    margin-bottom: 4.8px;
}

.point-list-box ul li:last-child {
    margin-bottom: 0;
}

.point-list-box ul li::before {
    content: '・';
    position: absolute;
    left: 0;
    top: 0;
    color: #333;
    /* Darker bullet */
    font-weight: bold;
}

.point-list-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #bfa87a;
    /* Goldish arrow */
    font-size: 14.4px;
}

/* CTA Banner Inactive */
.banner-inactive {
    background: #e0e0e0;
    padding: var(--spacing-md);
    text-align: center;
    border-radius: var(--radius-md);
    position: relative;
    color: #999;
    filter: grayscale(1);
}

.banner-inactive::after {
    content: "✕ 目前受付しておりません";
    /* Assuming disabled based on 'X' */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 900;
    color: #555;
    border: 4px solid #555;
    padding: 16px;
    background: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

/* Reservation CTA Card (New Design - Soft/Warm) */
.reservation-cta-section {
    padding-bottom: 0;
    /* Less padding bottom to connect with points */
}

.reservation-cta-card {
    background: #fff;
    border: none;
    /* Removed heavy red border */
    border-top: 6px solid var(--color-gold-light);
    /* Elegant gold accent top */
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Soft floating shadow */
    text-align: center;
    overflow: hidden;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* 1. Action Header (Formerly Action Text) */
.reservation-action-header {
    background: var(--color-gold-light);
    /* Soft Cream/Beige */
    color: #5d4037;
    /* Dark Brown friendly text */
    padding: 24px 19.2px 16px;
    position: relative;
    border-bottom: 1px dashed #e0c080;
    /* Subtle separation */
}

.reservation-action-title {
    font-size: 28.8px;
    font-weight: 900;
    margin: 0;
    line-height: 1.2;
    color: var(--color-orange);
    /* Warm Orange/Gold */
    text-shadow: none;
    /* Clean text */
}

.reservation-action-sub {
    font-size: 15.2px;
    font-weight: 700;
    opacity: 0.9;
    margin-top: 8px;
    display: block;
    color: #8d6e63;
    /* Softer brown */
}

/* 2. Body (QR Code) */
.reservation-cta-body {
    padding: 32px 16px;
    background: #fff;
    flex: 1;
    /* Pushes footer down */
}

.reservation-qr-wrapper {
    margin: 0 auto;
    position: relative;
    display: inline-block;
}

.reservation-qr-image {
    width: 200px;
    height: 200px;
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    /* Clean look */
}

/* 3. Benefit Footer (Formerly Header) */
.reservation-benefit-footer {
    background: var(--color-bg-light);
    /* Very light beige footer */
    color: #5d4037;
    padding: 19.2px 16px;
    position: relative;
    border-top: 1px solid #eee;
}

.reservation-benefit-eyebrow {
    font-size: 17.6px;
    font-weight: 700;
    display: block;
    color: var(--color-orange);
    /* Gold/Orange accent */
    margin-bottom: 3.2px;
}

.reservation-benefit-title {
    font-size: 25.6px;
    /* Slightly smaller to be less "shouty" */
    font-weight: 900;
    margin: 0;
    line-height: 1.3;
    color: var(--color-orange);
    /* Red used only for the key benefit text, but not background */
}

.cta-footer-note {
    font-size: 12.8px;
    color: #777;
    text-align: center;
    /* Centered looks better in this flow */
    background: transparent;
    /* Remove grey box */
    padding: 0 16px;
    margin: 0 auto 24px;
    /* Add margin within body before footer */
    border-radius: 0;
    max-width: 90%;
}

.cta-footer-note strong {
    color: #d97706;
    /* Match gold/orange theme */
}

/* Events Table */
.event-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-sm);
}

.event-table th,
.event-table td {
    padding: 16px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 16px;
}

.event-table th {
    background: var(--color-bg-light);
    width: 30%;
    font-weight: 700;
}

/* Benefits Section */
.benefit-box {
    background: var(--color-bg-light);
    border: 3px solid var(--color-gold);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    text-align: left;
}

.benefit-note {
    text-align: left;
    font-size: 14.4px;
    color: #666;
    background-color: var(--white);
    padding: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid #ddd;
    margin-top: 16px;
}

.benefit-highlight {
    color: var(--color-red);
    font-weight: 900;
    font-size: 24px;
}

/* Steps New Design */
.text-pink {
    color: var(--color-pink);
}

.steps-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start;
}

@media (min-width: 900px) {
    .steps-wrapper {
        flex-direction: row;
        align-items: center;
        /* Center vertically if needed, or stretch */
    }
}

.steps-routes {
    flex-shrink: 0;
    width: 100%;
    margin-bottom: var(--spacing-sm);
}

@media (min-width: 900px) {
    .steps-routes {
        width: 250px;
        margin-bottom: 0;
        margin-right: var(--spacing-md);
    }
}

.route-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    color: var(--color-blue);
    font-weight: 700;
}

.route-icon {
    width: 40px;
    height: 40px;
    background: #deb887;
    /* Gold-ish icon bg? Or actually simple icon color */
    /* Looking at image: Gold icon, no circle bg? Or gold icon */
    background: none;
    color: #daa520;
    font-size: 28.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.route-text {
    flex: 1;
    font-size: 16px;
}

.route-arrow {
    font-size: 24px;
    color: #ccc;
}

.steps-cards-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    width: 100%;
}

@media (min-width: 768px) {
    .steps-cards-container {
        flex-direction: row;
    }
}

.step-card-new {
    flex: 1;
    background: var(--white);
    border: 1px solid #333;
    border-radius: var(--radius-md);
    padding: 35px 0 0 0;
    position: relative;
    box-shadow: none;
    /* Flat style as per image? Or slight shadow */
    overflow: visible;
}

.step-badge {
    position: absolute;
    top: -15px;
    /* Half out */
    left: 15px;
    width: 40px;
    height: 40px;
    background: #b9006e;
    /* Purple/Pink */
    color: var(--white);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    font-size: 19.2px;
    z-index: 2;
}

.step-icon {
    text-align: center;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-image {
    width: 100%;
    /* max-width: 120px; REMOVED */
    height: auto;
    object-fit: cover;
}

.step-content {
    font-size: 14.4px;
    padding: 24px;
}

.step-title {
    font-size: 15.2px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-blue);
    /* Or dark text? Image looks dark */
    color: #333;
}

.step-desc {
    font-size: 12.8px;
    line-height: 1.4;
    color: #555;
    text-align: left;
    /* Though center aligns with icon nicer? Image looks leftish/center */
}

/* Flow Chart styling simple visual - REMOVED */
/* Sponsors */
.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 800px) {
    .sponsor-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sponsor-card {
    background: #fff;
    border: 1px solid var(--color-gold);
    /* Matched to design taste */
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    height: 100%;
    transition: transform 0.2s;
}

.sponsor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(197, 160, 89, 0.2);
    /* Gold shadow */
}

.sponsor-logo-box {
    width: 100%;
    height: 100px;
    /* Spacious for logo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sponsor-logo-box img {
    max-width: 90%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sponsor-info {
    width: 90%;
    border-top: 2px solid #ddd;
    padding: 12.8px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sponsor-name {
    font-size: 14.4px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
}

.sponsor-link {
    font-size: 12.8px;
    color: #0068b7;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

.sponsor-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Contact Box */
.contact-box {
    background: #fffaf5;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-orange);
}

.contact-table th {
    background: none;
    color: var(--color-orange);
}


/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section {
    padding: var(--spacing-lg) 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-content {
    animation: fadeInUp 1s ease-out;
}

.point-card,
.sponsor-card,
.step-card,
.benefit-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.point-card:hover,
.sponsor-card:hover,
.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.btn-cta:hover {
    transform: scale(1.05);
}

/* Visitor Benefits Redesign (Happy & Modern) */
.benefit-card {
    background: linear-gradient(135deg, #fffcf5 0%, #fff0d4 100%);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 15px 30px -10px rgba(255, 165, 0, 0.25), 0 0 0 1px rgba(255, 165, 0, 0.1) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-top: 16px;
}

.benefit-card:hover {
    transform: translateY(-5px);
}

/* Decorative background circle */
.benefit-card::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.benefit-visual {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.benefit-icon-bounce {
    font-size: 80px;
    color: var(--color-orange);
    text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);
    animation: bounceIcon 2s infinite ease-in-out;
}

@keyframes bounceIcon {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

.benefit-label-badge {
    margin-top: 8px;
    background: var(--color-red);
    color: #fff;
    padding: 4.8px 12.8px;
    border-radius: 50px;
    font-size: 13.6px;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.benefit-content {
    flex: 1;
    z-index: 1;
    text-align: center;
    width: 100%;
}

.benefit-intro {
    font-size: 16px;
    color: #555;
    margin-bottom: 16px;
    line-height: 1.8;
}

.benefit-price-wrapper {
    margin: 24px 0;
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    border-radius: 12px;
    display: inline-block;
}

.benefit-price-text {
    display: block;
    font-size: 35.2px;
    font-weight: 900;
    /* Gradient Text */
    background: linear-gradient(45deg, #FF8C00, #FF0080);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.2;
}

.benefit-price-suffix {
    font-size: 16px;
    font-weight: 700;
    color: #444;
}

/* Glassmorphism Note */
.glass-note {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 16px 24px;
    text-align: left;
    margin-top: 16px;
}

.benefit-note-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-note-list li {
    font-size: 13.6px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.5;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.benefit-note-list li i {
    color: var(--color-orange);
    margin-right: 4.8px;
}

/* Desktop Layout */
@media (min-width: 768px) {
    .benefit-card {
        flex-direction: row;
        align-items: flex-start;
        padding: 48px;
        gap: 48px;
        text-align: left;
    }

    .benefit-visual {
        padding-top: 16px;
    }

    .benefit-content {
        text-align: left;
    }

    .benefit-price-text {
        display: inline;
        font-size: 44.8px;
    }

    .benefit-price-wrapper {
        display: block;
        background: transparent;
        padding: 0;
        margin: 16px 0 32px 0;
    }
}

/* Floor Map */
.access-map-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .access-map-container {
        flex-direction: row;
    }
}

.access-map-box {
    flex: 1.5;
    /* Give map slightly more priority if space allows */
}

.access-map-img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: block;
}

.map-caption {
    font-size: 12.8px;
    color: #666;
    margin-top: 8px;
    text-align: right;
}

.access-info-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Fix for missing utility classes in Access Info */
.access-info-box h3 {
    font-weight: 700;
    font-size: 17.6px;
    margin-bottom: 8px;
    color: var(--color-text-main);
    border-left: 4px solid var(--color-orange);
    /* Add a nice accent */
    padding-left: 12.8px;
}

.access-info-box p,
.access-info-box ul {
    margin-bottom: 24px;
    font-size: 15.2px;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s;
}

.modal-content {
    margin: auto;
    display: block;
    width: auto;
    max-width: 90%;
    max-height: 90vh;
    /* Keep it within viewport height */
    margin-top: 5vh;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 10001;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.95)
    }

    to {
        transform: scale(1)
    }
}

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/* Modal Styles */
/* ... (existing modal styles) ... */

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/* Reservation & Contact Section (New) */
.reservation-box {
    border: 2px solid var(--color-orange);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 32px;
    background: #fff;
}

.reservation-header {
    background: var(--color-red);
    /* Keeping red for urgency/CTA as per common practice, or user orange? Image was red. Reference image had red. I will use Red for 'Emergency/Now' feeling but aligned with LP font/style. Actually style.css defines --color-red. */
    background: var(--color-orange);
    /* Let's stick to Orange to be safe with "design taste", it is the CTA color. */
    color: #fff;
    text-align: center;
    padding: 16px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.reservation-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 32px;
}

@media (min-width: 768px) {
    .reservation-content {
        flex-direction: row;
        gap: 48px;
    }
}

.reservation-cta-text {
    background: var(--color-red);
    /* Use Red here for the 'Point' highlight from the image */
    color: #fff;
    padding: 16px 24px;
    font-weight: 700;
    font-size: 17.6px;
    text-align: center;
    position: relative;
    /* Shape it like a tag or box */
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.reservation-cta-text i {
    margin-left: 8px;
}

.reservation-qr img {
    width: 180px;
    height: auto;
    border: 1px solid #ddd;
    padding: 5px;
    background: #fff;
}

/* Redesigned Contact Info */
.contact-simple {
    text-align: center;
    color: #333;
    max-width: 600px;
    margin: 0 auto;
}

.contact-simple-header {
    font-size: 19.2px;
    font-weight: 700;
    color: #8D5A98;
    /* Purple-ish from image? Or Orange? Image: Brown icon, Purple text. style.css: --color-pink #e95295? Let's use standard text or Orange. --color-orange */
    color: var(--color-orange);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contact-company {
    font-weight: 700;
    margin-bottom: 3.2px;
}

.contact-dept {
    font-weight: 700;
    font-size: 15.2px;
    margin-bottom: 24px;
}

.contact-separator {
    border: 0;
    border-top: 2px dotted #ccc;
    margin: 24px 0;
    width: 100%;
}

.contact-detail-row {
    font-size: 16px;
    margin-bottom: 8px;
    color: #555;
}

.contact-detail-row {
    font-size: 16px;
    margin-bottom: 8px;
    color: #555;
}

/* Contact Wrapper for PC Layout */
.contact-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 900px) {
    .contact-section-wrapper {
        flex-direction: row;
        align-items: center;
        /* Vertically align centers */
        justify-content: space-between;
    }

    .contact-section-wrapper .reservation-box {
        flex: 1;
        margin-bottom: 0;
        /* Ensure it doesn't get too wide or narrow */
    }

    .contact-section-wrapper .contact-simple {
        flex: 0.8;
        /* Give contact slightly less space or equal */
        margin: 0;
        padding-left: 32px;
        /* Spacing from left element */
        border-left: 1px dotted #ccc;
        /* Optional separation line */
        text-align: left;
    }

    .contact-simple .contact-simple-header {
        justify-content: center;
        /* Center header */
    }

    /* Adjust internal layout of reservation box for this split view */
    /* If the box becomes narrow, stack the QR code? */
    .reservation-content {
        gap: 24px;
        padding: 24px;
    }
}

/* 4 Points Expandable Logic */
.point-body-v2 {
    padding: 16px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.point-desc-wrapper {
    position: relative;
    max-height: 5em;
    /* Approximately 3 lines depending on line-height */
    line-height: 1.6;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    width: 100%;
}

.point-desc-wrapper.expanded {
    max-height: 1000px;
    /* High enough to show all text */
}

.point-text {
    font-size: 15.2px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

.point-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.point-desc-wrapper.expanded .point-gradient-overlay {
    opacity: 0;
}

.point-read-more-btn {
    background: transparent;
    border: 1px solid var(--color-orange);
    color: var(--color-orange);
    padding: 8px 32px;
    font-weight: 700;
    margin-top: 16px;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14.4px;
}

.point-read-more-btn:hover {
    background: var(--color-orange);
    color: #fff;
    transform: translateY(-2px);
}

.point-read-more-btn i {
    margin-left: 8px;
    transition: transform 0.3s;
}

.point-read-more-btn.expanded i {
    transform: rotate(180deg);
}

.footer {
    background: #333;
    color: #fff;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    font-size: 14.4px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.footer-links a {
    color: #ccc;
    text-decoration: underline;
}

.footer-banners {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.banner-placeholder {
    background: #fff;
    color: #333;
    width: 200px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.2px;
    border: 1px solid #ccc;
}

/* Temporary: Hide sponsor logos pending permission */
.sponsor-grid .sponsor-logo-box {
    display: none;
}

.sponsor-grid .sponsor-info {
    border-top: none;
}