/*
 * 誕生月ページ（page-monthly-birth-flower.php）の比較表「詳細を見る」ボタン
 * 赤いボタン（Simple Custom CSS and JS のスニペット 2841）を、ショップの /c/gr43/gr45 と同じ白枠のボタンにする。
 * 2026-10 デジマケ追加（docs/requests/20261005-birth-month-button.md）。読み込みは functions.php の upell_enqueue_birth_flower_button()。
 *
 * このファイルはスニペットと本文内の <style> より先に読み込まれる。
 * 本文内の `.p-ranking-table .p-ranking-table__button:has(.c-icon)`（詳細度 0,3,0）に勝つよう、
 * セレクタは main.l-monthly-birth-flower から書く（0,3,1）。
 */
main.l-monthly-birth-flower .p-ranking-table .p-ranking-table__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 210px;
  padding: 14px 36px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #000;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-decoration: none;
}

main.l-monthly-birth-flower .p-ranking-table .p-ranking-table__button-text {
  padding: 0;
}

/* 白い PNG の矢印は白背景で見えなくなるため隠し、ショップと同じ「>」を右端に出す（読み上げはしない） */
main.l-monthly-birth-flower .p-ranking-table .p-ranking-table__button .c-icon {
  display: none;
}

main.l-monthly-birth-flower .p-ranking-table .p-ranking-table__button::after {
  content: ">";
  content: ">" / "";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

/* ホバー：薄くなる動き（opacity .8）はスニペットのまま。ショップと同じく下線を足す */
@media (any-hover: hover) {
  main.l-monthly-birth-flower .p-ranking-table .p-ranking-table__button:hover {
    text-decoration: underline;
  }
}

main.l-monthly-birth-flower .p-ranking-table .p-ranking-table__button:focus-visible {
  text-decoration: underline;
}