/* =========================================
   EC FOOTER
========================================= */

.site-footer {
    position: relative;

    width: 100%;
    min-height: 500px;

    padding: 0 20px 35px;

    background: #fff;

    color: #111;

    overflow: hidden;

    isolation: isolate;

    /* 上側の円弧を作るための余白 */
    margin-top: 120px;
}


/* =========================================
   上端の大きな円
========================================= */

.site-footer::before {
    content: "";

    position: absolute;

    z-index: -2;

    left: 50%;
    top: -180px;

    width: 135%;
    height: 360px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background: #fff;

    pointer-events: none;
}


/* =========================================
   フッター背景の光
========================================= */

.site-footer::after {
    content: "";

    position: absolute;

    z-index: -3;

    left: 50%;
    top: -180px;

    width: 135%;
    height: 360px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        linear-gradient(100deg,
            rgba(20, 185, 198, 0.22),
            rgba(255, 255, 255, 0) 38%,
            rgba(242, 211, 91, 0.25) 100%);

    filter: blur(30px);

    pointer-events: none;
}

.site-footer {
    background: #fff;
    overflow: visible;
}


/* 円弧の色付き部分 */
.site-footer::before {
    top: -240px;

    width: 150%;
    height: 430px;

    background:
        #fff;

    border-radius: 50%;

    z-index: -2;
}


/* 白いフッターを上から被せる */
.site-footer::after {
    top: -125px;

    width: 145%;
    height: 330px;

    background: #fff;

    border-radius: 50%;

    filter: none;

    z-index: -1;
}


/* =========================================
INNER
========================================= */

.footer-inner {

    position: relative;

    z-index: 2;

    width: min(900px, 100%);

    margin: 0 auto;

    text-align: center;

}


/* =========================================
FOLLOW US
========================================= */

.footer-follow h2 {

    margin: 0;

    font-size:
        clamp(38px, 5vw, 60px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: .08em;

    color: #0caeb8;
}


.footer-follow p {

    margin-top: 12px;

    font-size: 14px;

    letter-spacing: .08em;

    color: #0caeb8;
}


/* =========================================
SNS
========================================= */

.footer-sns {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 22px;
}


.sns-button {

    width: 48px;
    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #0caeb8;

    color: #fff;

    transition:
        transform .35s ease,
        background .35s ease;
}


.sns-button span {

    font-size: 20px;

    line-height: 1;
}


.sns-button:hover {

    transform:
        translateY(-5px);

    background: #0b98a1;
}


/* =========================================
FOOTER BRAND
========================================= */

.footer-brand {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-top: 65px;

    color: #0caeb8;
}


.footer-logo-text {

    font-size: 46px;

    font-weight: 500;

    letter-spacing: .25em;

    line-height: 1;
}


.footer-logo-mark {

    position: relative;

    width: 30px;
    height: 48px;
}


.footer-logo-mark i {

    position: absolute;

    width: 18px;
    height: 40px;

    display: block;

    border-radius:
        10px 4px 10px 4px;
}


.footer-logo-mark i:first-child {

    left: 0;
    top: 0;

    background: #0caeb8;

    transform:
        skewY(45deg);
}


.footer-logo-mark i:last-child {

    right: 0;
    bottom: 0;

    background: #e7c75d;

    transform:
        skewY(45deg);
}


/* =========================================
INFO
========================================= */

.footer-info {

    margin-top: 25px;
}


.footer-info p {

    margin: 0;

    font-size: 13px;

    line-height: 2;

    letter-spacing: .16em;

    color: #777;
}


/* =========================================
NAV
========================================= */

.footer-nav {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 12px 35px;

    margin-top: 55px;
}


.footer-nav a {

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .12em;

    color: #555;

    transition:
        color .3s ease;
}


.footer-nav a:hover {

    color: #0caeb8;
}


/* =========================================
COPYRIGHT
========================================= */

.footer-copy {

    margin-top: 70px;

    padding-top: 25px;

    border-top:
        1px solid #ececec;

    font-size: 9px;

    letter-spacing: .08em;

    color: #aaa;
}

/* =========================================================
SNS FOOTER - MOVING GLOW
上側にはみ出して自然につながる版
========================================================= */

.site-footer {
    position: relative;
    z-index: 1;

    /* ここ重要：ぼかしを上にはみ出させる */
    overflow: visible;

    isolation: isolate;
}


/* =========================================
左：ターコイズ
========================================= */

.site-footer::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: -300px;

    /* フッター上端をまたぐ */
    top: -330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(10, 190, 200, .48) 0%,
            rgba(10, 180, 193, .28) 32%,
            rgba(10, 180, 193, .12) 50%,
            rgba(10, 180, 193, .04) 62%,
            transparent 76%
        );

    filter: blur(45px);

    pointer-events: none;

    z-index: -1;

    animation:
        snsFooterBlueFloat
        14s ease-in-out infinite;
}


/* =========================================
右：イエロー
========================================= */

.site-footer::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -300px;

    /* フッター上端をまたぐ */
    top: -350px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 218, 90, .48) 0%,
            rgba(240, 214, 106, .27) 32%,
            rgba(240, 214, 106, .11) 50%,
            rgba(240, 214, 106, .04) 62%,
            transparent 76%
        );

    filter: blur(45px);

    pointer-events: none;

    z-index: -1;

    animation:
        snsFooterYellowFloat
        18s ease-in-out infinite;
}


/* =========================================
FOOTER CONTENT
========================================= */

.site-footer .footer-inner {
    position: relative;
    z-index: 2;
}


/* =========================================
BLUE
========================================= */

@keyframes snsFooterBlueFloat {

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

    25% {
        transform:
            translate(60px, -15px)
            scale(1.08);
    }

    50% {
        transform:
            translate(110px, 20px)
            scale(1.15);
    }

    75% {
        transform:
            translate(40px, 30px)
            scale(1.05);
    }
}


/* =========================================
YELLOW
========================================= */

@keyframes snsFooterYellowFloat {

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

    25% {
        transform:
            translate(-55px, 25px)
            scale(1.08);
    }

    50% {
        transform:
            translate(-100px, 45px)
            scale(.98);
    }

    75% {
        transform:
            translate(-40px, 15px)
            scale(1.1);
    }
}


/* =========================================================
SP
========================================================= */

@media (max-width: 700px) {

    /*
    body側で横スクロールだけ防止
    footerはoverflow:hiddenにしない！
    */
    html,
    body {
        overflow-x: hidden;
    }


    /* =========================================
    BLUE
    ========================================= */

    .site-footer::before {
        width: 440px;
        height: 440px;

        left: -245px;
        top: -180px;

        filter: blur(32px);
    }


    /* =========================================
    YELLOW
    ========================================= */

    .site-footer::after {
        width: 440px;
        height: 440px;

        right: -245px;
        top: -190px;

        filter: blur(32px);
    }
}


/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-footer::before,
    .site-footer::after {
        animation: none;
    }
}