@charset "UTF-8";

/* Footer CTA */
.footer-cta-section {
    padding: 80px 0;
    text-align: center;
    background-color: #f9f9f9;
    background-image: url('../img/background_contact.jpg');
    background-size: cover;
    background-position: center;
}

.cta-title {
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: bold;
}

.footer-cta-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.footer-cta-btns .cta-btn {
    position: relative;
    /* For gloss effect */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 400px;
    /* Fixed width as per image suggestion */
    height: 80px;
    /* Large height */
    border-radius: 40px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    /* Clip gloss */
    transition: opacity 0.3s;
}

.footer-cta-btns .tel-btn {
    background-color: #ffbf00;
}

.footer-cta-btns .mail-btn {
    background-color: #27afa0;
}


.footer-cta-btns .icon {
    width: 30px;
    /* Set width for SVG */
    height: auto;
    margin-right: 15px;
    z-index: 1;
}

.footer-cta-btns .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 1;
    line-height: 1.2;
}

.footer-cta-btns .num {
    font-size: 32px;
}

.footer-cta-btns .hours {
    font-size: 11px;
    font-weight: normal;
}

.footer-cta-btns .mail-btn span:not(.icon) {
    font-size: 24px;
    z-index: 1;
}

.footer-cta-btns .cta-btn:hover {
    opacity: 0.9;
}

.cta-btn.green {
    background-color: #00cc99;
}



/* Decoration moved to .footer-grid-links */

.footer-banner.img-placeholder {
    height: 50px;
    background-color: #ffccdd;
    margin-bottom: 20px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.footer.map-img.img-placeholder {
    width: 100%;
    height: 200px;
    background-color: #eee;
    margin-bottom: 20px;
    border-radius: 10px;
}


.footer-link.img-placeholder {
    width: 100px;
    height: 40px;
    background-color: #eee;
    border-radius: 20px;
}

.footer-logo img {
    width: 180px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}

.copyright {
    text-align: center;
    color: #999;
}


/* Footer Bottom Area */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    /* Align bottom so logo and nav sit nicely */
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px 0;
}

.footer-nav-list {
    display: grid;
    grid-template-columns: auto auto;
    /* 2 columns */
    column-gap: 40px;
    row-gap: 15px;
    margin: 0;
    padding: 0;
}

.footer-nav-list li a {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

/* Colored Squares */
.footer-nav-list li a::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-color: #ccc;
    /* fallback */
}

/* Specific Colors */
/* 1. Home - Yellow */
.footer-nav-list li:nth-child(1) a::before {
    background-color: #f2cb10;
}

/* 2. Service - Blue */
.footer-nav-list li:nth-child(2) a::before {
    background-color: #00abff;
}

/* 3. Eiken - Green */
.footer-nav-list li:nth-child(3) a::before {
    background-color: #7fd628;
}

/* 4. Fees - Orange/Beige */
.footer-nav-list li:nth-child(4) a::before {
    background-color: #faaa80;
}

/* 5. Facilities - Pink */
.footer-nav-list li:nth-child(5) a::before {
    background-color: #fa9cbb;
}

/* 6. Online - Gold/Yellow */
.footer-nav-list li:nth-child(6) a::before {
    background-color: #f2cb10;
}


/* Back to Top Button */
.to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #d95a48;
    /* Reddish */
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    font-weight: bold;
    margin-left: 20px;
    /* Space from nav */
    transition: opacity 0.3s;
}

/* FontAwesome is not loaded, so using simple unicode chevron or custom css arrow if needed. 
   Using text '↑' or similar for now or css arrow.
   Let's use a CSS arrow for cleaner look */
.to-top {
    font-size: 0;
    /* Hide text */
}

.to-top::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(45deg);
    margin-top: 4px;
    /* Optical center adjustment */
}

.to-top:hover {
    opacity: 0.8;
}

/* Footer Link Grid System */
.footer-grid-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 40px;
    /* Increased bottom margin for decoration */
    position: relative;
    /* For pseudo-element */
}

/* Decoration line below buttons */
.footer-grid-links::after {
    content: '';
    position: absolute;
    bottom: -45px;
    /* Position in the margin space */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    /* Full viewport width */
    height: 10px;
    background: url('../img/treat.svg') repeat-x center top;
    background-size: auto 10px;
}

.grid-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    background-color: #fff;
    border: 4px solid #ccc;
    /* Thicker border */
    border-radius: 25px;
    /* More rounded */
    padding: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    color: #333;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, opacity 0.3s;
}

.grid-link:hover {
    transform: translateY(-3px);
    opacity: 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.grid-link-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Corner Decoration (Triangle only) */
.grid-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background: linear-gradient(to top left, currentColor 50%, transparent 50%);
    pointer-events: none;
}


/* Color Modifiers */
/* Yellow */
.grid-link.bg-yellow {
    border-color: #dfa300;
    color: #dfa300;
}

/* Orange */
.grid-link.bg-orange {
    border-color: #ff9933;
    color: #ff9933;
}

/* Green */
.grid-link.bg-green {
    border-color: #4fab21;
    color: #4fab21;
}

/* Blue */
.grid-link.bg-blue {
    border-color: #0099ff;
    color: #0099ff;
}

/* Gray */
.grid-link.bg-gray {
    border-color: #a0a0a0;
    color: #a0a0a0;
}

/* Yellow-Green */
.grid-link.bg-yellow-green {
    border-color: #9eb80d;
    color: #9eb80d;
}

/* Responsive Footer Styles */
@media (max-width: 768px) {
    .footer-cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .footer-grid-links {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        padding: 0 20px;
    }

    .grid-link {
        /* Reduced from 18px */
        padding: 5px;
        /* Ensure flex wrap if needed, though ib strategy handles it */
        flex-wrap: wrap;
    }

    .footer-nav-list {
        column-gap: 20px;
        /* Reduce gap */
    }

    /* Footer Bottom Mobile */
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding-top: 30px;
    }

    .footer-nav-list {
        grid-template-columns: 1fr;
        /* Single column */
        text-align: center;
    }
}