/* =========================================
   Footer Component Styles
   ========================================= */

/* --- ANIMATIONS (PC & SP共通) --- */
@keyframes elasticReveal {
    0% { transform: translateY(40px); opacity: 0; }
    60% { transform: translateY(-5px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes flowArrow {
    0% { transform: translateX(0); opacity: 0.8; }
    50% { transform: translateX(8px); opacity: 1; }
    100% { transform: translateX(0); opacity: 0.8; }
}

@keyframes softGlow {
    0% { text-shadow: 0 0 5px rgba(255,255,255,0); }
    50% { text-shadow: 0 0 20px rgba(255,255,255,0.5); }
    100% { text-shadow: 0 0 5px rgba(255,255,255,0); }
}

/* PC Styles (Min-width: 769px) */
@media (min-width: 769px) {
    .custom-footer {
        background-color: var(--color-navy, #263743);
        color: var(--color-white, #ffffff);
        padding: 10.5vw 7vw 0 7vw;
        font-family: var(--font-japanese, "Noto Sans JP", sans-serif);
    }

    .custom-footer-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    /* Left Column */
    .custom-footer-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 15vw;
    }

    .custom-contact-us {
        display: flex;
        align-items: center;
        line-height: 1;
    }

    .custom-contact-text {
        position: relative;
        font-size: 6.2vw;
        font-family: var(--font-archetype, "Archetype", sans-serif);
        letter-spacing: 0.8rem;
        line-height: 1;
        font-weight: 500;
        color: var(--color-white, #ffffff);
        animation: elasticReveal 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                   softGlow 3s ease-in-out infinite alternate;
    }

    .custom-contact-text::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: var(--color-white, #ffffff);
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .custom-arrow-image {
        margin-left: 12px;
        width: 7vw;
        height: auto;
        animation: flowArrow 1.5s ease-in-out infinite;
    }

    .custom-footer-message {
        text-align: left;
        font-size: 0.94vw;
        color: var(--color-white, #ffffff);
        line-height: 20px;
        margin-top: 16px;
    }

    .custom-footer-message p {
        font-weight: 300; /* 一段階下げる（400 → 300） */
        animation: elasticReveal 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
        opacity: 0;
    }

    /* Right Column */
    .custom-footer-right {
        display: flex;
        flex-direction: column;
    }

    .custom-follow-us {
        margin-bottom: 20px;
    }

    .custom-follow-us span {
        font-size: 1.8vw;
        font-family: var(--font-archetype, "Archetype", sans-serif);
        margin-bottom: 8px;
        display: block;
        font-weight: 500;
        letter-spacing: 0.05em;
        color: var(--color-white, #ffffff);
    }

    .custom-sns-icons {
        list-style: none;
        display: flex;
        padding: 0;
        margin: 0;
    }

    .custom-sns-icons li {
        margin-right: 1.9vw;
    }

    .custom-sns-icons li a {
        color: var(--color-white, #ffffff);
        font-size: 1.8vw;
        text-decoration: none;
    }

    .custom-sns-icons li a:hover {
        color: var(--color-white, #ffffff);
    }

    /* Office Section */
    .custom-office span {
        font-size: 1.8vw;
        font-family: var(--font-archetype, "Archetype", sans-serif);
        margin-bottom: 8px;
        display: block;
        font-weight: 500;
        letter-spacing: 0.05em;
        color: var(--color-white, #ffffff);
    }

    .custom-office p {
        font-size: 0.94vw;
        line-height: 20px;
        margin: 0;
        color: var(--color-white, #ffffff);
    }

    /* Office List (Refined from HashHack/Touryumon) */
    .hh-office-list {
        margin-top: 15px;
    }

    .hh-office-item {
        margin-bottom: 20px;
    }

    .hh-office-item:last-child {
        margin-bottom: 0;
    }

    .hh-office-name {
        font-family: var(--font-archetype, "Archetype", sans-serif);
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 5px;
        color: var(--color-white, #ffffff);
        display: flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.05em;
    }

    .hh-office-name i {
        color: var(--color-white, #ffffff);
    }

    .hh-office-address {
        font-family: var(--font-japanese, "Noto Sans JP", sans-serif);
        font-weight: 400; /* 一段階下げる（700 → 400） */
        font-size: 13px;
        margin: 0;
        padding-left: 22px;
        line-height: 1.6;
        color: var(--color-white, #ffffff);
    }

    .custom-office .hh-office-address {
        font-weight: 400; /* 一段階下げる（700 → 400） */
    }

    /* Bottom Area */
    .custom-footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--color-white, #ffffff);
        padding-top: 16px;
        margin-top: 20px;
        height: 8.2vw;
    }

    .custom-footer-bottom .custom-footer-logo img {
        height: 1.7vw;
    }

    .custom-footer-links {
        text-align: right;
        font-size: 1.04vw;
    }

    .custom-footer-links .custom-privacy-policy {
        text-decoration: none;
        color: var(--color-white, #ffffff);
        margin-right: 16px;
        font-family: var(--font-archetype, "Archetype", sans-serif);
        font-weight: 500;
        letter-spacing: 0.05em;
    }

    .custom-footer-links span {
        margin-left: 12.6vw;
        font-family: var(--font-archetype, "Archetype", sans-serif);
        font-weight: 500;
        letter-spacing: 0.05em;
        color: var(--color-white, #ffffff);
    }

    .custom-sp-only {
        display: none;
    }

    .custom-pc-only {
        display: block;
    }
}

/* --------------------------------------------------
   SP Responsive Styles
   -------------------------------------------------- */
@media (max-width: 768px) {
    /* ANIMATIONSは共通定義に移動済み */

    .custom-footer {
        background-color: var(--color-navy, #263743);
        color: var(--color-white, #ffffff);
        padding: 10.5vw 7vw 40px 7vw;
        font-family: var(--font-japanese, "Noto Sans JP", sans-serif);
    }

    .custom-footer-top {
        margin-bottom: 4vw;
    }

    .custom-footer-left {
        margin-bottom: 15vw;
    }

    /* 1. CONTACT US - Animated & Huge (Ultra Compact) */
    .custom-contact-link {
        display: block;
        text-decoration: none;
        color: inherit;
        position: relative;
        width: 100%;
    }

    .custom-contact-text {
        font-family: var(--font-archetype, "Archetype", sans-serif);
        font-size: 13vw;
        line-height: 0.8;
        letter-spacing: 0.02em;
        font-weight: 500; /* Archetype Renner Medium */
        display: block;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.4);
        padding-bottom: 5px;
        margin-bottom: 5px;
        position: relative;
        color: #fff;
        animation: elasticReveal 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                   softGlow 3s ease-in-out infinite alternate;
    }
    
    .custom-contact-text::after {
        display: none;
    }
    
    /* 矢印調整 */
    .custom-contact-us {
        display: block;
        position: relative;
        margin-bottom: 8px;
        border-bottom: none;
    }
    
    .custom-arrow-image {
        position: absolute;
        right: 0;
        top: 2vw;
        width: 10vw;
        margin: 0;
        animation: flowArrow 1.5s ease-in-out infinite;
    }

    /* 2. Message - Ultra Compact */
    .custom-footer-message p {
        font-size: 13px;
        font-weight: 300;
        line-height: 1.5;
        opacity: 0;
        margin-top: 0;
        margin-bottom: 24px;
        animation: elasticReveal 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
    }

    /* 3. FOLLOW US / OFFICE - Ultra Compact */
    .custom-follow-us span,
    .custom-office span {
        font-family: var(--font-archetype, "Archetype", sans-serif);
        font-size: 26px;
        margin-bottom: 5px;
        font-weight: 500; /* Archetype Renner Medium */
        display: block;
    }

    .custom-sns-icons {
        list-style: none;
        display: flex;
        padding: 0;
        margin: 0;
        margin-top: 0;
        gap: 15px;
    }

    .custom-sns-icons li {
        margin-right: 0;
    }

    .custom-sns-icons li a {
        color: var(--color-white, #ffffff);
        font-size: 24px;
        text-decoration: none;
    }

    .custom-follow-us {
        margin-bottom: 24px;
    }

    .custom-office {
        margin-bottom: 0;
    }
    
    .hh-office-item {
        margin-bottom: 15px;
    }

    /* Office Address - Small & Balanced */
    .hh-office-name {
        font-family: var(--font-archetype, "Archetype", sans-serif);
        font-size: 14px;
        font-weight: 500; /* Archetype Renner Medium */
        margin-bottom: 2px;
    }
    
    .hh-office-address {
        font-size: 11px;
        font-weight: 200; /* 一段階下げる（300 → 200） */
        line-height: 1.6;
        opacity: 0.8;
    }

    /* 4. Footer Bottom - Ultra Compact */
    .custom-footer-bottom.custom-sp-only {
        display: flex;
        flex-direction: column;
        padding-top: 0;
        padding-bottom: 20px;
        border-top: none;
        margin-top: 24px;
        visibility: visible;
        opacity: 1;
        width: 100%;
        box-sizing: border-box;
    }

    .custom-footer-links {
        width: 100%;
        text-align: right;
        border-top: 1px solid rgba(255,255,255,0.4);
        padding-top: 10px;
        margin-bottom: 24px;
    }

    .custom-privacy-policy {
        font-family: var(--font-archetype, "Archetype", sans-serif);
        font-size: 14px;
        font-weight: 500; /* Archetype Renner Medium */
    }

    /* Logo & Copyright */
    .custom-footer-logo {
        margin-bottom: 15px;
        text-align: center;
    }
    
    .custom-footer-logo img {
        height: 25px;
    }

    .custom-sp-privacy {
        font-size: 11px;
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-weight: 400;
        opacity: 0.6;
        text-align: center;
        letter-spacing: 0.05em;
    }

    .custom-pc-only {
        display: none;
    }
    
    .custom-sp-only {
        display: block;
    }
}