/* =========================================
   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:
        #fff3c8;

    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;
}