:root{--sns-color:rgb(255, 255, 255)}.sns{width:100%;margin-top:clamp(18px, 3.5vw, 40px);color:#fff;display:flex;justify-content:center;align-items:center;position:relative;z-index:1;transition-delay:800ms}.sns ul{width:100%;max-width:320px;padding:clamp(12px, 3vw, 20px) 0;display:flex;justify-content:space-between;align-items:center}.sns ul li{width:26%;opacity:1;transition:.25s ease;border-radius:50%;position:relative}.sns ul li::after{content:'';width:98%;aspect-ratio:1/1;display:block;background-color:rgba(90, 110, 120, 1);position:absolute;top:1%;left:1%;z-index:-1;border-radius:50%;transition:0.25s ease;pointer-events:none}@media (hover){.sns ul li:nth-of-type(1):hover::after{background-color:rgba(66, 103, 178, 1)}.sns ul li:nth-of-type(2):hover::after{background-color:rgba(255, 0, 0, 1)}.sns ul li:nth-of-type(3):hover::before,.sns ul li:hover::after{opacity:1}}.sns ul li a{width:100%;height:auto;aspect-ratio:1/1;display:block;font-size:0;line-height:0;background-color:var(--sns-color);mask-repeat:no-repeat;mask-position:center;mask-size:100% 100%;position:relative}.sns ul li:nth-child(1) a{mask-image:url(../images/sns/sns_04.svg)}@media (max-width:500px){.sns{transition-delay:1000ms}}@media (max-width:430px){.sns ul{width:70%;padding-top:3.5vw}/* .sns ul li{width:29%;} */}