@charset "utf-8";

/* ==========================================================================
   Recruit LINE Button & Modal Styles (Refined & Loading Aware)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Common Variables & Animations
   -------------------------------------------------------------------------- */
:root {
    --line-green: #06C755;
    --line-green-dark: #05b34c;
    --line-shadow: rgba(6, 199, 85, 0.4);
    --modal-bg: rgba(0, 0, 0, 0.75);
    --text-color: #ffffff;
    --font-family-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --z-index-modal: 10000;
    --z-index-btn: 9999;
}

@keyframes pulse {
    0% {
        box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.15), 0 0 0 0 var(--line-shadow);
    }

    70% {
        box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.15), 0 0 0 10px rgba(6, 199, 85, 0);
    }

    100% {
        box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(6, 199, 85, 0);
    }
}

@keyframes shine {
    0% {
        left: -100%;
        opacity: 0;
    }

    50% {
        left: 100%;
        opacity: 0.6;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes slideInRight {
    from {
        transform: translateY(-50%) translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
        pointer-events: auto;
    }
}

@keyframes popIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    80% {
        transform: scale(1.05);
        opacity: 1;
        pointer-events: auto;
    }

    100% {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
    }
}

@keyframes btnFadeIn {
    to {
        opacity: 1;
        pointer-events: auto;
    }
}

/* --------------------------------------------------------------------------
   Floating Button (Base)
   -------------------------------------------------------------------------- */
.recruit-line-btn {
    position: fixed;
    z-index: var(--z-index-btn);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-family: var(--font-family-base);
    box-sizing: border-box;
    overflow: hidden;

    /* Initial hidden state for Loading */
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   PC Styles (Desktop) >= 769px
   ==========================================================================
   Slim, clean vertical label on the right edge.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
    .recruit-line-btn {
        display: none !important;
        /* PCでは非表示 */
        right: 0;
        top: 50%;
        transform: translateY(-50%) translateX(100%);
        /* Start off-screen right */
        width: 56px;
        height: auto;
        min-height: 160px;
        background: var(--line-green);
        border-radius: 8px 0 0 8px;
        flex-direction: column;
        padding: 20px 0;
        box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.15);

        /* Animation: slideInRight then pulse */
        animation: slideInRight 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 5.8s forwards, pulse 3s infinite 7s;
    }

    .recruit-line-btn:hover {
        animation-play-state: paused;
        background: var(--line-green-dark);
        width: 62px;
        box-shadow: -6px 6px 20px rgba(0, 0, 0, 0.2);
    }

    /* Shine Effect */
    .recruit-line-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        animation: shine 4s infinite 8s;
        pointer-events: none;
    }

    .recruit-line-btn .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        /* Slightly larger */
        height: 30px;
        /* Updated to a more accurate LINE logo shape */
        background-image: url("../images/line_logo_white.svg");
        z-index: 2;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-bottom: 15px;
        transition: transform 0.3s ease;

        /* Text Style for "LINE" inside icon */
        font-size: 7px;
        /* Smaller for more whitespace */
        font-weight: 900;
        color: var(--line-green);
        padding-top: 2px;
        /* Move text down to center */
        font-family: Arial, sans-serif;
        letter-spacing: -0.3px;
    }

    .recruit-line-btn:hover .icon {
        transform: scale(1.1);
    }

    .recruit-line-btn .text {
        color: var(--text-color);
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 1;
    }

    /* Modal Styles Removed */
}

/* --------------------------------------------------------------------------
   SP Styles (Mobile) <= 768px

   ==========================================================================
   Modern Floating Action Button (FAB) styles.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   SP Styles (Mobile) <= 768px
   ==========================================================================
   Capsule button with text.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .recruit-line-btn {
        left: 20px;
        bottom: 20px;
        width: 70px;
        /* Match Page Top svg width */
        min-width: unset;
        height: 70px;
        /* Match Page Top svg height */
        background: var(--line-green);
        border-radius: 5px;
        /* Match Page Top border radius */
        border: 2px solid #fff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        /* Stack vertically */
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 4px;

        /* Animation: Wait 5.8s for splash, then slide up and fade in */
        transform: translateY(20px);
        opacity: 0;
        animation: spSlideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 5.8s forwards,
            pulse 3s infinite 6.4s;
    }

    @keyframes spSlideUp {
        to {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
    }

    .recruit-line-btn:active {
        transform: scale(0.95);
        background: var(--line-green-dark);
    }

    /* Show text */
    .recruit-line-btn .text {
        display: block;
        color: #fff;
        font-size: 10px;
        /* Small text to fit */
        font-weight: bold;
        white-space: nowrap;
        writing-mode: horizontal-tb;
        letter-spacing: 0;
        line-height: 1.2;
    }

    .recruit-line-btn .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        /* Icon size */
        height: 32px;
        background-image: url("../images/line_logo_white.svg");
        z-index: 2;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: 0;

        /* Text Style for "LINE" inside icon (SP) */
        font-size: 8px;
        font-weight: 900;
        color: var(--line-green);
        padding-top: 3px;
        font-family: Arial, sans-serif;
        letter-spacing: -0.3px;
    }

    .recruit-modal {
        display: none !important;
    }
}