.sharebox{ display:flex; align-items:center; gap:10px; margin:24px 0; }
.share-native{ padding:.6em 1em; border:1px solid #ccc; border-radius:9999px; background:#ffffff; font-weight:600; }
.share-icons{ display:flex; gap:10px; flex-wrap:wrap; }
.sns{ display:inline-flex; align-items:center; gap:8px; padding:.6em 1em;
     border-radius:9999px; text-decoration:none; font-weight:700; line-height:1; border:1px solid transparent; }
.sns-x   { background:#000000; color:#ffffff; }
.sns-line{ background:#00a845; color:#ffffff; }
.sns-fb  { background:#0077c7; color:#ffffff; }
.sns-copy{ background:#ffffff;  color:#333333; border-color:#dddddd; }
.sns:focus-visible, .share-native:focus-visible{ outline:2px solid #7aa87a; outline-offset:2px; }

@media (max-width:768px){
  /* モバイルは原則ネイティブ共有のみ（未対応端末はJSでアイコン表示に切替） */
  .share-icons{ display:none; }
}
/* ブランド色ボタンの文字色を全状態で白に固定 */
.sharebox .sns-x,
.sharebox .sns-line,
.sharebox .sns-fb { color:#fff !important; text-decoration:none; }

.sharebox .sns-x:link,   .sharebox .sns-x:visited,
.sharebox .sns-x:hover,  .sharebox .sns-x:active,
.sharebox .sns-line:link, .sharebox .sns-line:visited,
.sharebox .sns-line:hover,.sharebox .sns-line:active,
.sharebox .sns-fb:link,   .sharebox .sns-fb:visited,
.sharebox .sns-fb:hover,  .sharebox .sns-fb:active {
  color:#fff !important; text-decoration:none !important;
}

/* 念のため：不透明＆装飾リセット */
.sharebox .sns { opacity:1 !important; text-shadow:none !important; }

/* コピーだけは黒文字のまま */
.sharebox .sns-copy { color:#333 !important; }
.sharebox{ justify-content: center; }  /* 全ページを中央寄せ */