:root {
  --sns-color:rgb(255, 255, 255);
}

#sns_embed{width:100%; font-size: 0; line-height: 0}

.sns{
  width:100%; background-color: rgba(0, 0, 0, .9); color: #fff;
  display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}

.sns ul{
  width:80%; max-width:300px; padding:clamp(12px, 3vw, 20px) 0;
  display: flex; justify-content:space-between; align-items: center;
}

.sns ul li{ width:18%; max-width:46px; opacity:.45; transition: .25s ease;}

.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%;
}
.sns ul li:nth-child(1) a{mask-image: url(../../images/svg/sns/sns_01.svg);}
.sns ul li:nth-child(2) a{mask-image: url(../../images/svg/sns/sns_02.svg);}
.sns ul li:nth-child(3) a{mask-image: url(../../images/svg/sns/sns_03.svg);}
.sns ul li:nth-child(4) a{mask-image: url(../../images/svg/sns/sns_04.svg);}

@media (hover) {
  .sns ul li:hover{ opacity:.9;}
  }

@media (max-width:430px){
  .sns ul{width:65%; padding:4.5vw 0;}
}