@charset "UTF-8";
/* ===========================================================
   SNSシェアボタン / スマホ用（画面下部に常時固定）
   =========================================================== */

/* バーに隠れないよう本文の下に余白を確保 */
body {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

.sns {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  margin: 0;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sns > a,
.sns > button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: #666;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sns > a:active,
.sns > button:active { background: #f2f2f2; }

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

/* --- アイコン（CSSマスクで描画。色は各サービスのブランドカラー） --- */
.sns > a::before,
.sns > button::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-color: var(--brand);
  -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; }

/* --- 各サービス --- */
.sns-x {
  --brand: #000;
  --label: "X";
  --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 {
  --brand: #1877F2;
  --label: "Facebook";
  --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 {
  --brand: #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 {
  --brand: #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 {
  --brand: #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");
}

/* 開いている間は「その他」を選択中の見た目に */
.sns-other[aria-expanded="true"] { background: #f2f2f2; }

/* ===========================================================
   「その他」メニュー / スマホはバーの上にせり上がるシート
   =========================================================== */

.sns-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.sns-mask.is-on { opacity: 1; visibility: visible; }

.sns-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 10001;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  border-radius: 14px 14px 0 0;
  background: #fff;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .25s ease, visibility .25s;
}
.sns-sheet.is-on { transform: none; visibility: visible; }

.sns-sheet-ttl {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 16px 20px 10px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 700;
}

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

.sns-i {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 20px;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sns-i:active { background: #f2f2f2; }
.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: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--brand) var(--icon, none) no-repeat center / 17px 17px;
  color: #fff;
  font-size: 16px;
  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: 12px; }

.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-close {
  display: block;
  width: calc(100% - 40px);
  margin: 8px 20px 16px;
  padding: 13px 0;
  border: 0;
  border-radius: 10px;
  background: #f2f2f3;
  color: #333;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.sns-close:active { background: #e6e6e7; }

/* --- コピー完了の通知 --- */
.sns-toast {
  position: fixed;
  left: 50%;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 10002;
  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-sheet,
  .sns-mask,
  .sns-toast { transition: none; }
}