/* SO⇄SS 相互移動ボタン / 移動失敗メッセージ (task 20260812134156)
 *
 * 既存の .so-ubtn / .so-top / #error-message には一切触れず、新クラスのみで完結
 * させる（§31 CSS 不変原則）。ZChain 準拠のため border-radius:0・影なし・
 * グラデーションなし。
 *
 * 配色は「遷移先のシステム色」を面で使う: SO ヘッダー(緑地)では SS ネイビー
 * #1A3A63、SS ヘッダー(紺地)では SO グリーン #0F5132。どちらも白文字なので
 * ヘッダー地色と確実にコントラストが付く。
 */

.so-xlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 14px;
  padding: 13px 18px;
  flex: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 0;
  box-shadow: none;
  background: #1A3A63;            /* SS navy — 遷移先 */
  transition: background .15s, border-color .15s;
}

.so-xlink:hover {
  color: #fff;
  background: #24507F;
  border-color: #fff;
}

.so-xlink svg {
  width: 20px;
  height: 20px;
  flex: none;
}

@media (max-width: 900px) {
  .so-xlink {
    margin-left: 8px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .so-xlink svg {
    width: 16px;
    height: 16px;
  }
}

/* ログイン画面に出す移動失敗メッセージ */
.so-xlogin-msg {
  margin: 0 auto 4px;
  max-width: 420px;
  padding: 10px 14px;
  border: 1px solid #1A3A63;
  border-radius: 0;
  box-shadow: none;
  background: #F2F5F9;
  color: #1A3A63;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}