@charset "Shift_JIS";

.socialLinks {
  width: 80%;
  margin: 0 auto;
}

.socialLinks__list {
  display: flex;
  justify-content: space-around;
}

.socialLinks__item {
  transition: .3s;
}

.socialLinks__item:hover {
  opacity: 0.8;
}

.socialLinks a {
  position: relative;
  width: 9vw;
  height: 9vw;
  font-size: 8vw;
  border-radius: 50%;
  text-align: center;
  display: block;
  color: #fff;
}

.fab {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'font awesome 5 brands';
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  font-size: calc(12px + 30 * (100vw - 320px) / 447);
}

.facebook {
}

.instagram {
}

.twitter {
}

.socialLinks .youtube {
  display: flex;
  align-items: center;
}

.socialLinks .youtube img {
  height: 80%;
  width: auto;
}

@media screen and (min-width: 768px) {
  .socialLinks {
    width: 50%;
    margin: 0 auto;
    padding-top: 5vw;
  }

  .socialLinks a {
    width: 5vw;
    height: 5vw;
  }

  .fab {
    font-size: calc(15px + 30 * (100vw - 767px) / 673);
  }
}