@charset "UTF-8";
/* support */
.support{
    width: calc((1000 / 1280) * 100%);
    max-width: 1000px;
    margin: 0 auto 50px;

    .support_text{
        margin: 0 0 30px 0;
    }

    .support_list{
        padding: 0 0 30px 0;
        margin: 0 0 30px 0;
        border-bottom: dotted 2px var(--color-gray-light);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .support_item{
        width: calc(32% + 40px);

        a{
            padding: 20px;
            margin: 0 20px;
            color: var(--color-white);
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            border-radius: 30px;
            display: block;
            transition: color cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s, background cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
        }
        span{
            width: 150px;
            height: 150px;
            margin: 0 auto 20px;
            background: var(--color-white);
            border-radius: 100vh;
            display: block;
            position: relative;
            transition: color cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s, background cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
        }
        .fa-solid{
            font-size: 60px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }  
        a:hover .fa-solid{
            color: var(--color-white);
        }
    }

    .support_item.link-sponsor{
        a{
            border: solid 3px var(--color-blue-dark);
            background: var(--color-blue-dark);
        }
        a:hover{
            color: var(--color-blue-dark);
            background: var(--color-white);
        }
        a:hover span{
            color: var(--color-white);
            background: var(--color-blue-dark);
        }
        .fa-solid{
            color: var(--color-blue-dark);
        }
    }

    .support_item.link-donation{
        a{
            border: solid 3px var(--color-red-light);
            background: var(--color-red-light);
        }
        a:hover{
            color: var(--color-red-light);
            background: var(--color-white);
        }
        a:hover span{
            color: var(--color-white);
            background: var(--color-red-light);
        }
        .fa-solid{
            color: var(--color-red-light);
        }
    }

    .support_item.link-club{
        a{
            border: solid 3px var(--sub-color);
            background: var(--sub-color);
        }
        a:hover{
            color: var(---sub-color);
            background: var(--color-white);
        }
        a:hover span{
            color: var(--color-white);
            background: var(--sub-color);
        }
        .fa-solid{
            color: var(--sub-color);
        }
    }

    .support_contact{
        width: 500px;
        margin: 0 auto;

        .contact_text{  
            margin: 0 0 20px 0;
            text-align: center;
            font-weight: 700;
        }
        .contact_dlist{
            text-align: center;
            border: solid 1px var(--color-gray-light);
        }
        .contact_dterm,
        .contact_ddesc{
            padding: 10px 20px;
        }
        .contact_dterm{
            background: var(--color-gray-light);
        }
        .contact_ddesc{
            background: var(--color-white);

            a{
                color: var(--main-color);
                font-weight: 700;
            }

            .fa-solid{
                margin: 0 5px 0 0;
                color: var(--main-color);
            }
        }
    }
}

@media screen and (max-width: 1024px){
    .support{
        width: calc((600 / 1024) * 100%);
        min-width: 500px;

        .support_list{
            flex-direction: column;
        }
        .support_item{
            width: 100%;
        }
        .support_item:not(:last-child){
            margin: 0 0 20px 0;
        }
    }
}


@media screen and (max-width: 600px){
    .support{
        width: 90%;
        min-width: inherit;
        
        .support_contact{
            width: 100%;

            .contact_text{
                font-size: 16px;
            }

            .contact_dterm,
            .contact_dlist{
                font-size: 14px;
            }
        }
    }
}