@charset "UTF-8";
/* ===========================================================
   SNSシェアボタン / PC用
   =========================================================== */

.sns {
  position: relative;
  display: flex;
  gap: 8px;
  max-width: 640px;
  margin: 40px auto;
}

.sns > a,
.sns > button {
  flex: 1 1 0;
  min-width: 0;          /* 中身より小さく縮めるために必要 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease;
}

.sns > a:hover,
.sns > button:hover { filter: brightness(1.15); }

.sns > a:active,
.sns > button:active { filter: brightness(.9); }

.sns > a:focus-visible,
.sns > button:focus-visible {
  outline: 3px solid #111;
  outline-offset: 2px;
}

/* --- アイコン（CSSマスクで描画。色は currentColor に追従） --- */
.sns > a::before,
.sns > button::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
}

/* --- ラベル --- */
.sns > a::after,
.sns > button::after {
  content: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 幅が足りないときの詰め（481〜560px。ラッパーが狭い場合の保険） --- */
@media (max-width: 560px) {
  .sns { gap: 5px; }
  .sns > a,
  .sns > button { gap: 5px; padding: 0 5px; font-size: 12px; }
  .sns > a::before,
  .sns > button::before { width: 16px; height: 16px; }
}

/* --- 各サービス --- */
.sns-x {
  background: #000;
  --label: "ポスト";
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.8 7.8L23.2 22h-6.3l-4.9-6.5L6.3 22H3.2l7.3-8.3L2.1 2h6.4l4.4 5.9L18.9 2Zm-1.1 18h1.7L7.3 3.7H5.5L17.8 20Z'/%3E%3C/svg%3E");
}

.sns-fb {
  background: #1877F2;
  --label: "シェア";
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07Z'/%3E%3C/svg%3E");
}

.sns-line {
  background: #06C755;
  --label: "LINE";
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 5.69 2 10.23c0 4.07 3.55 7.48 8.35 8.12.32.07.77.21.88.49.1.25.07.65.03.9l-.14.85c-.04.25-.2.98.86.53s5.7-3.36 7.78-5.75C21.1 13.8 22 12.12 22 10.23 22 5.69 17.52 2 12 2ZM8.08 13.2h-2c-.29 0-.52-.24-.52-.53V8.7c0-.29.23-.53.52-.53s.53.24.53.53v3.45h1.47c.29 0 .53.23.53.52s-.24.53-.53.53Zm2.06-.53c0 .29-.24.53-.53.53s-.52-.24-.52-.53V8.7c0-.29.23-.53.52-.53s.53.24.53.53v3.97Zm4.78 0c0 .23-.14.43-.36.5a.51.51 0 0 1-.16.03.52.52 0 0 1-.42-.21l-2.04-2.78v2.46c0 .29-.23.53-.52.53a.53.53 0 0 1-.53-.53V8.7c0-.23.15-.43.36-.5a.54.54 0 0 1 .59.18l2.04 2.78V8.7c0-.29.24-.53.53-.53s.52.24.52.53v3.97Zm3.21-2.51c.29 0 .53.24.53.53s-.24.52-.53.52h-1.47v.94h1.47c.29 0 .53.23.53.52s-.24.53-.53.53h-2c-.28 0-.52-.24-.52-.53V8.7c0-.29.24-.53.52-.53h2c.29 0 .53.24.53.53s-.24.53-.53.53h-1.47v.93h1.47Z'/%3E%3C/svg%3E");
}

.sns-hatena {
  background: #00A4DE;
  --label: "はてブ";
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.4 12.8c-.5-.6-1.3-.9-2.2-1 .8-.2 1.4-.5 1.8-1 .4-.5.6-1.1.6-1.9 0-.6-.1-1.2-.4-1.6-.3-.5-.7-.8-1.2-1.1-.4-.2-1-.4-1.6-.5-.6-.1-1.7-.1-3.2-.1H3.4v12.6h4c1.5 0 2.6 0 3.3-.1.7-.1 1.2-.3 1.7-.5.6-.3 1-.7 1.3-1.2.3-.5.5-1.1.5-1.8 0-1-.3-1.8-.8-2.4ZM6.9 8.5h.8c1 0 1.6.1 1.9.3.3.2.5.6.5 1.1s-.2.8-.5 1c-.3.2-1 .3-2 .3h-.7V8.5Zm3.1 7.2c-.3.2-1 .3-1.9.3h-1.2v-2.9H8c1 0 1.7.1 2 .3.3.2.5.6.5 1.1 0 .6-.2 1-.5 1.2Zm7.5-1.4c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm-1.2-2.4h2.4V5.6h-2.4v6.3Z'/%3E%3C/svg%3E");
}

.sns-other {
  background: #4B5563;
  --label: "その他";
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08a2.9 2.9 0 0 0-1.96.77L8.9 12.7c.05-.23.1-.46.1-.7s-.05-.47-.1-.7l7.05-4.11c.5.47 1.17.77 1.91.77a2.8 2.8 0 1 0-2.8-2.8c0 .24.05.47.11.7L8.04 9.98a2.8 2.8 0 1 0 0 4.05l7.12 4.16c-.06.21-.1.43-.1.65a2.73 2.73 0 1 0 2.73-2.76Z'/%3E%3C/svg%3E");
}

/* ===========================================================
   「その他」メニュー / PCはボタン上のポップオーバー
   =========================================================== */

.sns-mask {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: transparent;
  visibility: hidden;
}
.sns-mask.is-on { visibility: visible; }

.sns-sheet {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 300;
  width: 264px;
  max-width: calc(100vw - 32px);
  padding: 6px 0;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.sns-sheet.is-on { opacity: 1; visibility: visible; transform: none; }

/* PCでは見出しと閉じるボタンは不要 */
.sns-sheet-ttl,
.sns-close { display: none; }

.sns-list { margin: 0; padding: 0; list-style: none; }

.sns-i {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sns-i:hover { background: #f4f4f5; }
.sns-i:focus-visible { outline: 2px solid #111; outline-offset: -2px; }

/* アイコンタイル：ブランド色の角丸＋白い記号（文字 or SVG） */
.sns-i::before {
  content: var(--glyph, "");
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--brand) var(--icon, none) no-repeat center / 15px 15px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.sns-i-threads   { --brand: #000;     --glyph: "@"; }
.sns-i-pinterest { --brand: #E60023;  --glyph: "P"; }
.sns-i-linkedin  { --brand: #0A66C2;  --glyph: "in"; }
.sns-i-tumblr    { --brand: #001935;  --glyph: "t"; }
.sns-i-evernote  { --brand: #00A82D;  --glyph: "E"; }
.sns-i-linkedin::before { font-size: 11px; }

.sns-i-bluesky {
  --brand: #0285FF;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 8.2C10.4 5.9 7.6 3.6 5.5 3.6 4 3.6 3.4 4.6 3.4 6.2c0 1.8.9 3.9 2.5 4.7-1.3.3-2.1 1-2.1 2.1 0 1.7 1.9 2.8 3.7 2.8 1.9 0 3.5-1.7 4.5-3.7 1 2 2.6 3.7 4.5 3.7 1.8 0 3.7-1.1 3.7-2.8 0-1.1-.8-1.8-2.1-2.1 1.6-.8 2.5-2.9 2.5-4.7 0-1.6-.6-2.6-2.1-2.6-2.1 0-4.9 2.3-6.5 4.6Z'/%3E%3C/svg%3E");
}

.sns-i-mail {
  --brand: #6B7280;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6Zm-2 0-8 5-8-5h16Zm0 12H4V8l8 5 8-5v10Z'/%3E%3C/svg%3E");
}

.sns-i-copy {
  --brand: #6B7280;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3.9 12a3.1 3.1 0 0 1 3.1-3.1h4V7H7a5 5 0 0 0 0 10h4v-1.9H7A3.1 3.1 0 0 1 3.9 12ZM8 13h8v-2H8v2Zm9-6h-4v1.9h4a3.1 3.1 0 0 1 0 6.2h-4V17h4a5 5 0 0 0 0-10Z'/%3E%3C/svg%3E");
}

.sns-i-native {
  --brand: #6B7280;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18 16.08a2.9 2.9 0 0 0-1.96.77L8.9 12.7c.05-.23.1-.46.1-.7s-.05-.47-.1-.7l7.05-4.11c.5.47 1.17.77 1.91.77a2.8 2.8 0 1 0-2.8-2.8c0 .24.05.47.11.7L8.04 9.98a2.8 2.8 0 1 0 0 4.05l7.12 4.16c-.06.21-.1.43-.1.65a2.73 2.73 0 1 0 2.73-2.76Z'/%3E%3C/svg%3E");
}

/* --- コピー完了の通知 --- */
.sns-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 400;
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 13px;
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.sns-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .sns > a,
  .sns > button,
  .sns-sheet,
  .sns-toast { transition: none; }
}