/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:08:41 */
/* ================================================
   香LIG | SNSシェアボタン ブランドデザイン v4
   CSS — WPCode「CSS スニペット」に貼付
   タイトル: CSS | 全ページ共通 | SNSシェアボタン ブランドデザイン
   表示条件: サイト全体
   最終更新: 2026-05-04
   ================================================ */

/* ────────────────────────────────────────────────
   コンテナ
──────────────────────────────────────────────── */
.sns-btn.sns-dif,
.sns-btn-dif {
  background: #FDFAF6 !important;
  border: 1px solid #DDD0BC !important;
  border-top: 2px solid #A07850 !important;
  border-radius: 0 0 12px 12px !important;
  padding: 24px 20px 20px !important;
  margin: 36px 0 !important;
  position: relative !important;
  box-shadow: 0 4px 20px rgba(44, 35, 24, .06) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* 上部 "Share" バッジ */
.sns-btn.sns-dif::before,
.sns-btn-dif::before {
  content: 'Share' !important;
  position: absolute !important;
  top: -1px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #A07850 !important;
  color: #FDFAF6 !important;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: .38em !important;
  padding: 3px 20px 3px 24px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ────────────────────────────────────────────────
   既存タイトルを非表示
──────────────────────────────────────────────── */
.sns-btn.sns-dif .sns-btn__title,
.sns-btn-dif .sns-btn__title,
.sns-btn.sns-dif .dfont,
.sns-btn.sns-dif .sns-btn__title * {
  display: none !important;
}

/* ────────────────────────────────────────────────
   テキストラベルを全サイズで非表示
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul li a .share_txt,
.sns-btn-dif ul li a .share_txt,
.sns-btn.sns-dif ul li a span,
.sns-btn-dif ul li a span,
.sns-btn.sns-dif .sns-btn__item a span,
.sns-btn-dif .sns-btn__item a span {
  display: none !important;
}

/* ────────────────────────────────────────────────
   ボタンリスト
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul,
.sns-btn-dif ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sns-btn.sns-dif ul li,
.sns-btn-dif ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

/* ────────────────────────────────────────────────
   ボタン本体：アイコンのみ正方形
   SangoのCSSが width:55px を強制するのを上書き
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul li a,
.sns-btn-dif ul li a,
.sns-btn.sns-dif .sns-btn__item a,
.sns-btn-dif .sns-btn__item a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: #F3EDE4 !important;
  border: 1px solid #DDD0BC !important;
  color: #5C4E38 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.sns-btn.sns-dif ul li a:hover,
.sns-btn-dif ul li a:hover {
  background: #EDE1CF !important;
  border-color: #A07850 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(160, 120, 80, .2) !important;
}

/* ────────────────────────────────────────────────
   アイコン画像
   Sangoの 32px・margin: 11px auto を完全上書き
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul li a img,
.sns-btn-dif ul li a img,
.sns-btn.sns-dif .sns-btn__item a img,
.sns-btn-dif .sns-btn__item a img,
.sns-dif .sns-btn__item img {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  outline: none !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* ────────────────────────────────────────────────
   Sangoの赤点線アウトライン除去
──────────────────────────────────────────────── */
body .sns-btn.sns-dif a img,
body .sns-btn.sns-dif a[rel] img {
  outline: none !important;
  border: none !important;
}

/* ────────────────────────────────────────────────
   プラットフォーム別 ホバーカラー
──────────────────────────────────────────────── */
.sns-btn.sns-dif ul li.tw a:hover {
  background: #EEEEEC !important;
  border-color: #888 !important;
}
.sns-btn.sns-dif ul li.fb a:hover {
  background: #EBF0FA !important;
  border-color: #7A90CC !important;
}
.sns-btn.sns-dif ul li.hatebu a:hover {
  background: #EBF0FA !important;
  border-color: #6680BB !important;
}
.sns-btn.sns-dif ul li.line a:hover {
  background: #EAFAEA !important;
  border-color: #4AAA4A !important;
}