/*
 * Instagram + note：各ページ共通
 * 各HTMLで css/style.css の後に読み込んでください。
 */

.site-socials {
  --site-social-icon-size: 20px;
  --site-social-link-size: 21px;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;

  margin: 0;
  padding: 0;
  border: 0;
}

.site-socials > a {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: var(--site-social-link-size) !important;
  height: var(--site-social-link-size) !important;
  flex: 0 0 var(--site-social-link-size) !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1;
  text-decoration: none;
}

.site-socials > a > img {
  display: block !important;
  width: var(--site-social-icon-size) !important;
  height: var(--site-social-icon-size) !important;
  max-width: none;
  object-fit: contain;
}

/* noteのPNGを元の色で表示 */
.site-socials .site-socials__note,
.site-socials .site-socials__note img {
  background: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* HOMEでこの共通HTMLを使う場合も、Instagramは従来どおり白色 */
.home-page-v2 .site-socials--desktop .site-socials__instagram img {
  filter: brightness(0) invert(1);
}

/* PCではスマホメニュー用のSNSを非表示 */
.site-socials.site-socials--mobile {
  display: none;
}

/* 展覧会詳細ページ：既存の右上固定位置と画像サイズに合わせる */
.exhibition-detail-v2-page .site-socials--desktop {
  --site-social-icon-size: 25px;
  --site-social-link-size: 25px;

  position: fixed;
  top: 27px;
  right: clamp(24px, 3.2vw, 52px);
  z-index: 900;
}

.exhibition-detail-v3-page .site-socials--desktop {
  --site-social-icon-size: 23px;
  --site-social-link-size: 23px;

  position: fixed;
  top: 20px;
  right: clamp(24px, 3.2vw, 52px);
  z-index: 900;
}

@media (max-width: 760px) {
  .site-socials.site-socials--desktop {
    display: none !important;
  }

  .site-socials.site-socials--mobile {
    --site-social-icon-size: 23px;
    --site-social-link-size: 30px;

    display: flex;
    margin-top: 28px;
  }
}