/* =========================================================
   SNSリンク _a（小さい丸型）
========================================================= */
.sns-links-wrapper-a {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.sns-links-wrapper-a a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-a a.sns-link svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.sns-links-wrapper-a a.sns-link:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* =========================================================
   SNSリンク _b（やや大きめ丸型）
========================================================= */
.sns-links-wrapper-b {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.sns-links-wrapper-b a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-b a.sns-link svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.sns-links-wrapper-b a.sns-link:hover {
  transform: scale(1.1);
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}


/* =========================================================
   SNSリンク _c（中くらい丸型）
========================================================= */
.sns-links-wrapper-c {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}

.sns-links-wrapper-c a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-c a.sns-link svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

.sns-links-wrapper-c a.sns-link:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}


/* =========================================================
   SNSリンク _d（大きめ丸型）
========================================================= */
.sns-links-wrapper-d {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.sns-links-wrapper-d a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-d a.sns-link svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}

.sns-links-wrapper-d a.sns-link:hover {
  transform: scale(1.1);
  box-shadow: 0 7px 14px rgba(0,0,0,0.25);
}


/* =========================================================
   SNSリンク _e（最大丸型）
========================================================= */
.sns-links-wrapper-e {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 36px;
}

.sns-links-wrapper-e a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-e a.sns-link svg {
  width: 36px;
  height: 36px;
  fill: #fff;
}

.sns-links-wrapper-e a.sns-link:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}


/* =========================================================
   SNS共通カラー
========================================================= */
.sns-links-wrapper-a a.sns-x,
.sns-links-wrapper-b a.sns-x,
.sns-links-wrapper-c a.sns-x,
.sns-links-wrapper-d a.sns-x,
.sns-links-wrapper-e a.sns-x { background-color: #111111; }

.sns-links-wrapper-a a.sns-facebook,
.sns-links-wrapper-b a.sns-facebook,
.sns-links-wrapper-c a.sns-facebook,
.sns-links-wrapper-d a.sns-facebook,
.sns-links-wrapper-e a.sns-facebook { background-color: #1877f2; }

.sns-links-wrapper-a a.sns-line,
.sns-links-wrapper-b a.sns-line,
.sns-links-wrapper-c a.sns-line,
.sns-links-wrapper-d a.sns-line,
.sns-links-wrapper-e a.sns-line { background-color: #00c300; }

.sns-links-wrapper-a a.sns-instagram,
.sns-links-wrapper-b a.sns-instagram,
.sns-links-wrapper-c a.sns-instagram,
.sns-links-wrapper-d a.sns-instagram,
.sns-links-wrapper-e a.sns-instagram { background-color: #e1306c; }

.sns-links-wrapper-a a.sns-youtube,
.sns-links-wrapper-b a.sns-youtube,
.sns-links-wrapper-c a.sns-youtube,
.sns-links-wrapper-d a.sns-youtube,
.sns-links-wrapper-e a.sns-youtube { background-color: #ff0000; }

.sns-links-wrapper-a a.sns-github,
.sns-links-wrapper-b a.sns-github,
.sns-links-wrapper-c a.sns-github,
.sns-links-wrapper-d a.sns-github,
.sns-links-wrapper-e a.sns-github { background-color: #333; }

.sns-links-wrapper-a a.sns-note,
.sns-links-wrapper-b a.sns-note,
.sns-links-wrapper-c a.sns-note,
.sns-links-wrapper-d a.sns-note,
.sns-links-wrapper-e a.sns-note { background-color: #4f4f4f; }



/* =========================================================
   SNSリンク _f（小さめ四角）
========================================================= */
.sns-links-wrapper-f {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.sns-links-wrapper-f a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px; /* 四角 */
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-f a.sns-link svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.sns-links-wrapper-f a.sns-link:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* =========================================================
   SNSリンク _g（やや大きめ四角）
========================================================= */
.sns-links-wrapper-g {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.sns-links-wrapper-g a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-g a.sns-link svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

.sns-links-wrapper-g a.sns-link:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}

/* =========================================================
   SNSリンク _h（中くらい四角）
========================================================= */
.sns-links-wrapper-h {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}

.sns-links-wrapper-h a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-h a.sns-link svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

.sns-links-wrapper-h a.sns-link:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* =========================================================
   SNSリンク _i（大きめ四角）
========================================================= */
.sns-links-wrapper-i {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.sns-links-wrapper-i a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 20px;
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-i a.sns-link svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}

.sns-links-wrapper-i a.sns-link:hover {
  transform: scale(1.12);
  box-shadow: 0 7px 14px rgba(0,0,0,0.25);
}

/* =========================================================
   SNSリンク _j（最大四角）
========================================================= */
.sns-links-wrapper-j {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 36px;
}

.sns-links-wrapper-j a.sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background-color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sns-links-wrapper-j a.sns-link svg {
  width: 36px;
  height: 36px;
  fill: #fff;
}

.sns-links-wrapper-j a.sns-link:hover {
  transform: scale(1.15);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}

/* =========================================================
   SNS共通カラー（_f～_j）
========================================================= */
.sns-links-wrapper-f a.sns-x,
.sns-links-wrapper-g a.sns-x,
.sns-links-wrapper-h a.sns-x,
.sns-links-wrapper-i a.sns-x,
.sns-links-wrapper-j a.sns-x { background-color: #111111; }

.sns-links-wrapper-f a.sns-facebook,
.sns-links-wrapper-g a.sns-facebook,
.sns-links-wrapper-h a.sns-facebook,
.sns-links-wrapper-i a.sns-facebook,
.sns-links-wrapper-j a.sns-facebook { background-color: #1877f2; }

.sns-links-wrapper-f a.sns-line,
.sns-links-wrapper-g a.sns-line,
.sns-links-wrapper-h a.sns-line,
.sns-links-wrapper-i a.sns-line,
.sns-links-wrapper-j a.sns-line { background-color: #00c300; }

.sns-links-wrapper-f a.sns-instagram,
.sns-links-wrapper-g a.sns-instagram,
.sns-links-wrapper-h a.sns-instagram,
.sns-links-wrapper-i a.sns-instagram,
.sns-links-wrapper-j a.sns-instagram { background-color: #e1306c; }

.sns-links-wrapper-f a.sns-youtube,
.sns-links-wrapper-g a.sns-youtube,
.sns-links-wrapper-h a.sns-youtube,
.sns-links-wrapper-i a.sns-youtube,
.sns-links-wrapper-j a.sns-youtube { background-color: #ff0000; }

.sns-links-wrapper-f a.sns-github,
.sns-links-wrapper-g a.sns-github,
.sns-links-wrapper-h a.sns-github,
.sns-links-wrapper-i a.sns-github,
.sns-links-wrapper-j a.sns-github { background-color: #333; }

.sns-links-wrapper-f a.sns-note,
.sns-links-wrapper-g a.sns-note,
.sns-links-wrapper-h a.sns-note,
.sns-links-wrapper-i a.sns-note,
.sns-links-wrapper-j a.sns-note { background-color: #4f4f4f; }


/* =========================================================
   レスポンシブ共通
========================================================= */
@media (max-width: 768px) {
  /* タブレット */
  .sns-links-wrapper-a a.sns-link { width: 32px; height: 32px; }
  .sns-links-wrapper-a a.sns-link svg { width: 16px; height: 16px; }
  .sns-links-wrapper-b a.sns-link { width: 40px; height: 40px; }
  .sns-links-wrapper-b a.sns-link svg { width: 20px; height: 20px; }
  .sns-links-wrapper-c a.sns-link { width: 50px; height: 50px; }
  .sns-links-wrapper-c a.sns-link svg { width: 24px; height: 24px; }
  .sns-links-wrapper-d a.sns-link { width: 60px; height: 60px; }
  .sns-links-wrapper-d a.sns-link svg { width: 28px; height: 28px; }
  .sns-links-wrapper-e a.sns-link { width: 70px; height: 70px; }
  .sns-links-wrapper-e a.sns-link svg { width: 32px; height: 32px; }

  .sns-links-wrapper-f a.sns-link { width: 32px; height: 32px; }
  .sns-links-wrapper-f a.sns-link svg { width: 16px; height: 16px; }
  .sns-links-wrapper-g a.sns-link { width: 40px; height: 40px; }
  .sns-links-wrapper-g a.sns-link svg { width: 20px; height: 20px; }
  .sns-links-wrapper-h a.sns-link { width: 50px; height: 50px; }
  .sns-links-wrapper-h a.sns-link svg { width: 24px; height: 24px; }
  .sns-links-wrapper-i a.sns-link { width: 60px; height: 60px; }
  .sns-links-wrapper-i a.sns-link svg { width: 28px; height: 28px; }
  .sns-links-wrapper-j a.sns-link { width: 70px; height: 70px; }
  .sns-links-wrapper-j a.sns-link svg { width: 32px; height: 32px; }

  /* ギャップも少し狭め */
  .sns-links-wrapper-a { gap: 8px; margin-top: 16px; }
  .sns-links-wrapper-b { gap: 10px; margin-top: 18px; }
  .sns-links-wrapper-c { gap: 12px; margin-top: 20px; }
  .sns-links-wrapper-d { gap: 14px; margin-top: 22px; }
  .sns-links-wrapper-e { gap: 16px; margin-top: 24px; }
  .sns-links-wrapper-f { gap: 8px; margin-top: 16px; }
  .sns-links-wrapper-g { gap: 10px; margin-top: 18px; }
  .sns-links-wrapper-h { gap: 12px; margin-top: 20px; }
  .sns-links-wrapper-i { gap: 14px; margin-top: 22px; }
  .sns-links-wrapper-j { gap: 16px; margin-top: 24px; }
}

@media (max-width: 480px) {
  /* スマホ */
  .sns-links-wrapper-a a.sns-link { width: 28px; height: 28px; }
  .sns-links-wrapper-a a.sns-link svg { width: 14px; height: 14px; }
  .sns-links-wrapper-b a.sns-link { width: 32px; height: 32px; }
  .sns-links-wrapper-b a.sns-link svg { width: 16px; height: 16px; }
  .sns-links-wrapper-c a.sns-link { width: 40px; height: 40px; }
  .sns-links-wrapper-c a.sns-link svg { width: 20px; height: 20px; }
  .sns-links-wrapper-d a.sns-link { width: 50px; height: 50px; }
  .sns-links-wrapper-d a.sns-link svg { width: 24px; height: 24px; }
  .sns-links-wrapper-e a.sns-link { width: 60px; height: 60px; }
  .sns-links-wrapper-e a.sns-link svg { width: 28px; height: 28px; }

  .sns-links-wrapper-f a.sns-link { width: 28px; height: 28px; }
  .sns-links-wrapper-f a.sns-link svg { width: 14px; height: 14px; }
  .sns-links-wrapper-g a.sns-link { width: 32px; height: 32px; }
  .sns-links-wrapper-g a.sns-link svg { width: 16px; height: 16px; }
  .sns-links-wrapper-h a.sns-link { width: 40px; height: 40px; }
  .sns-links-wrapper-h a.sns-link svg { width: 20px; height: 20px; }
  .sns-links-wrapper-i a.sns-link { width: 50px; height: 50px; }
  .sns-links-wrapper-i a.sns-link svg { width: 24px; height: 24px; }
  .sns-links-wrapper-j a.sns-link { width: 60px; height: 60px; }
  .sns-links-wrapper-j a.sns-link svg { width: 28px; height: 28px; }

  /* ギャップさらに縮小 */
  .sns-links-wrapper-a, .sns-links-wrapper-f { gap: 6px; margin-top: 12px; }
  .sns-links-wrapper-b, .sns-links-wrapper-g { gap: 8px; margin-top: 14px; }
  .sns-links-wrapper-c, .sns-links-wrapper-h { gap: 10px; margin-top: 16px; }
  .sns-links-wrapper-d, .sns-links-wrapper-i { gap: 12px; margin-top: 18px; }
  .sns-links-wrapper-e, .sns-links-wrapper-j { gap: 14px; margin-top: 20px; }
}
/* =========================================================
   SNSリンク 共通設定（a〜j）
========================================================= */
.sns-links-wrapper-a,
.sns-links-wrapper-b,
.sns-links-wrapper-c,
.sns-links-wrapper-d,
.sns-links-wrapper-e,
.sns-links-wrapper-f,
.sns-links-wrapper-g,
.sns-links-wrapper-h,
.sns-links-wrapper-i,
.sns-links-wrapper-j {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 横幅不足時に折り返す */
  margin-top: 20px;
}

.sns-links-wrapper-a a.sns-link { width: 40px; height: 40px; border-radius: 50%; }
.sns-links-wrapper-b a.sns-link { width: 50px; height: 50px; border-radius: 50%; }
.sns-links-wrapper-c a.sns-link { width: 60px; height: 60px; border-radius: 50%; }
.sns-links-wrapper-d a.sns-link { width: 70px; height: 70px; border-radius: 50%; }
.sns-links-wrapper-e a.sns-link { width: 80px; height: 80px; border-radius: 50%; }

.sns-links-wrapper-f a.sns-link { width: 40px; height: 40px; border-radius: 8px; }
.sns-links-wrapper-g a.sns-link { width: 50px; height: 50px; border-radius: 12px; }
.sns-links-wrapper-h a.sns-link { width: 60px; height: 60px; border-radius: 16px; }
.sns-links-wrapper-i a.sns-link { width: 70px; height: 70px; border-radius: 20px; }
.sns-links-wrapper-j a.sns-link { width: 80px; height: 80px; border-radius: 24px; }

.sns-links-wrapper-a a.sns-link svg,
.sns-links-wrapper-f a.sns-link svg { width: 20px; height: 20px; }
.sns-links-wrapper-b a.sns-link svg,
.sns-links-wrapper-g a.sns-link svg { width: 24px; height: 24px; }
.sns-links-wrapper-c a.sns-link svg,
.sns-links-wrapper-h a.sns-link svg { width: 28px; height: 28px; }
.sns-links-wrapper-d a.sns-link svg,
.sns-links-wrapper-i a.sns-link svg { width: 32px; height: 32px; }
.sns-links-wrapper-e a.sns-link svg,
.sns-links-wrapper-j a.sns-link svg { width: 36px; height: 36px; }

/* ギャップ設定 */
.sns-links-wrapper-a { gap: 12px; }
.sns-links-wrapper-b { gap: 16px; }
.sns-links-wrapper-c { gap: 20px; }
.sns-links-wrapper-d { gap: 24px; }
.sns-links-wrapper-e { gap: 28px; }

.sns-links-wrapper-f { gap: 12px; }
.sns-links-wrapper-g { gap: 16px; }
.sns-links-wrapper-h { gap: 20px; }
.sns-links-wrapper-i { gap: 24px; }
.sns-links-wrapper-j { gap: 28px; }

/* =========================================================
   レスポンシブ対応（タブレットまで）
========================================================= */
@media (max-width: 480px) {
  /* a〜e（丸型） */
  .sns-links-wrapper-a a.sns-link { width: 28px; height: 28px; }
  .sns-links-wrapper-a a.sns-link svg { width: 14px; height: 14px; }
  .sns-links-wrapper-b a.sns-link { width: 32px; height: 32px; }
  .sns-links-wrapper-b a.sns-link svg { width: 16px; height: 16px; }
  .sns-links-wrapper-c a.sns-link { width: 40px; height: 40px; }
  .sns-links-wrapper-c a.sns-link svg { width: 20px; height: 20px; }
  .sns-links-wrapper-d a.sns-link { width: 50px; height: 50px; }
  .sns-links-wrapper-d a.sns-link svg { width: 24px; height: 24px; }
  .sns-links-wrapper-e a.sns-link { width: 60px; height: 60px; }
  .sns-links-wrapper-e a.sns-link svg { width: 28px; height: 28px; }

  /* f〜j（四角型） */
  .sns-links-wrapper-f a.sns-link { width: 28px; height: 28px; }
  .sns-links-wrapper-f a.sns-link svg { width: 14px; height: 14px; }
  .sns-links-wrapper-g a.sns-link { width: 32px; height: 32px; }
  .sns-links-wrapper-g a.sns-link svg { width: 16px; height: 16px; }
  .sns-links-wrapper-h a.sns-link { width: 40px; height: 40px; }
  .sns-links-wrapper-h a.sns-link svg { width: 20px; height: 20px; }
  .sns-links-wrapper-i a.sns-link { width: 50px; height: 50px; }
  .sns-links-wrapper-i a.sns-link svg { width: 24px; height: 24px; }
  .sns-links-wrapper-j a.sns-link { width: 60px; height: 60px; }
  .sns-links-wrapper-j a.sns-link svg { width: 28px; height: 28px; }

  /* ギャップ縮小 */
  .sns-links-wrapper-a, .sns-links-wrapper-f { gap: 6px; margin-top: 12px; }
  .sns-links-wrapper-b, .sns-links-wrapper-g { gap: 8px; margin-top: 14px; }
  .sns-links-wrapper-c, .sns-links-wrapper-h { gap: 10px; margin-top: 16px; }
  .sns-links-wrapper-d, .sns-links-wrapper-i { gap: 12px; margin-top: 18px; }
  .sns-links-wrapper-e, .sns-links-wrapper-j { gap: 14px; margin-top: 20px; }
}