/*
Theme Name: XWRITE child
Version: 1.0.0
Template: xwrite
*/

/* ===== フローティングボタン本体 ===== */
body .floating-side-buttons {
  position: fixed;
  top: 50%;
  right: -80px;               /* 右端寄り。もっと端にしたければ 8px などに調整OK */
  transform: translateY(-50%);
  width: 110px;               /* ボタンを少し大きめに */
  z-index: 99999;
}

/* コンテナ自体は動かさない（ホバーしても right は変えない） */


/* ===== 各ボタン ===== */
body .floating-side-buttons .floating-link {
  display: block;
  padding: 32px 0;           /* 高さアップ＝「ふたまり」大きく */
  margin-bottom: 10px;       /* TikTok と SHOP の間に余白 */
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  writing-mode: vertical-rl;
  border-radius: 9999px;     /* 4隅すべて丸角 */
  overflow: hidden;
  transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* 最後のボタンだけ下余白なし */
body .floating-side-buttons .floating-link:last-child {
  margin-bottom: 0;
}

/* ===== ボタンごとの色 ===== */

/* TikTokボタン（通常） */
body .floating-side-buttons .tiktok {
  background: #000000;
}

/* SHOPボタン（通常） */
body .floating-side-buttons .shop {
  background: #f19477;
}

/* ===== ボタンごとのホバー（独立して動く） ===== */

/* TikTokだけのホバー */
body .floating-side-buttons .tiktok:hover {
  background: #222222;       /* 少し明るめの黒に */
  transform: translateX(-12px);
}

/* SHOPだけのホバー */
body .floating-side-buttons .shop:hover {
  background: #f8a68a;       /* 少し明るめのゴールド */
  transform: translateX(-12px);
}

/* 共通でほんのり浮かせる感じ */
body .floating-side-buttons .floating-link:hover {
  opacity: 0.95;
}

/* ===== モバイルでは非表示 ===== */
@media (max-width: 768px) {
  body .floating-side-buttons {
    display: none;
  }
}