/* SNSの並び。縦の帯（.sns-strip）と横並び（.sns-row）の2つ。 */

.sns-strip,
.sns-row { display: flex; gap: 14px; }

.sns-strip a,
.sns-row a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  box-shadow: 0 4px 14px rgba(0, 20, 60, .14);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.sns-strip svg,
.sns-row svg { width: 22px; height: 22px; display: block; }

.sns-strip a:hover,
.sns-row a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 20, 60, .22);
}

/* ロゴはそれぞれのブランドの色。塗りは sns.js 側で指定している。
   白い角丸の上に乗せるので、暗い背景でも明るい背景でも読める。 */

/* グラデーションを入れておくための箱。見えない */
.sns-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 枠なし。白い背景のページに置くとき用（フッターなど）。
   角丸の白い箱は、白地の上では影だけが浮いて見える。 */
.sns-bare a {
  width: 40px;
  height: 40px;
  background: transparent;
  box-shadow: none;
}
.sns-bare svg { width: 26px; height: 26px; }
.sns-bare a:hover {
  background: rgba(0, 0, 0, .05);
  box-shadow: none;
  transform: translateY(-2px);
}

/* 縦の帯：画面の右端に貼りつく */
.sns-strip {
  flex-direction: column;
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
}

/* 横並び：フッターなどに置く */
.sns-row { flex-direction: row; flex-wrap: wrap; }

/* スマホでは縦の帯を消す（指が届かない所に出ると邪魔になる） */
@media (max-width: 960px) {
  .sns-strip { display: none; }
}