/* サイト全体のボタンを、四季の会のページのテイスト（角丸・朱・墨、余白）にそろえる。
   文字サイズは onmyodo-typography.css が管理しているので、ここでは形・色・余白だけ扱う。 */
:root {
  --onmyodo-btn-ink: #1a1a1a;
  --onmyodo-btn-accent: #bf3823;
  --onmyodo-btn-radius: 8px;
  /* 四季の会のボタン：PCは高さ66px・左右32px・文字と矢印の間24px、スマホは高さ56px・左右24px・間16px */
  --onmyodo-btn-height: 66px;
  --onmyodo-btn-pad-x: 32px;
  --onmyodo-btn-gap: 24px;
  --onmyodo-btn-min-width: 215px;
}

@media screen and (max-width: 767px) {
  :root {
    --onmyodo-btn-height: 56px;
    --onmyodo-btn-pad-x: 24px;
    --onmyodo-btn-gap: 16px;
  }
}

/* 高さは typography 側が @layer の中で !important で決めている。
   !important どうしは先に宣言されたレイヤーが勝つので、typography より先に読み込むこのファイルでレイヤーを作って上書きする */
@layer onmyodo-buttons {
  body :is(.c-btn, .c-submit-btn, input[type=submit]) {
    min-height: var(--onmyodo-btn-height) !important;
  }
}

/* ---------- ページ遷移のボタン（墨の線、透明の塗り、右に矢印） ---------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--onmyodo-btn-gap);
  min-width: var(--onmyodo-btn-min-width);
  padding-right: var(--onmyodo-btn-pad-x);
  padding-left: var(--onmyodo-btn-pad-x);
  border: 1px solid var(--onmyodo-btn-ink);
  border-radius: var(--onmyodo-btn-radius);
  background: transparent;
  color: var(--onmyodo-btn-ink);
  transition: background-color .2s, color .2s, border-color .2s;
}

.c-btn span { padding: 0; }

.c-btn:hover {
  background: var(--onmyodo-btn-ink);
  color: #fff;
}

/* 矢印は四季の会の矢印に差し替え、文字のすぐ右に置く（文字色で塗るので、ホバーで反転しても見える） */
.c-btn > svg { display: none; }

.c-btn:has(> svg)::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("../img/shikinokai/figma/arrow.svg") no-repeat center / contain;
  mask: url("../img/shikinokai/figma/arrow.svg") no-repeat center / contain;
}

/* 天社宮ページの横並びのボタンは幅が決まっていて文字が折り返すので、余白を詰める */
.tensha-renew-link-block__actions .c-btn {
  gap: 8px;
  padding-right: 16px;
  padding-left: 16px;
}

/* テンプレート内の style が文字に余白を足しているので打ち消す */
.tensha-renew-link-block__actions .c-btn span { padding: 0 !important; }

/* 写真の上に置く白抜きのボタン */
.c-btn--transparent {
  border-color: #fff;
  background: rgba(26, 26, 26, .3);
  color: #fff;
}

.c-btn--transparent:hover {
  background: #fff;
  color: var(--onmyodo-btn-ink);
}

/* ---------- 送信のボタン（朱の塗り、矢印なし） ---------- */
.c-submit-btn,
input[type=submit] {
  width: auto;
  min-width: var(--onmyodo-btn-min-width);
  padding-right: var(--onmyodo-btn-pad-x);
  padding-left: var(--onmyodo-btn-pad-x);
  border: 1px solid var(--onmyodo-btn-accent);
  border-radius: var(--onmyodo-btn-radius);
  background: var(--onmyodo-btn-accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: .1em;
  cursor: pointer;
  transition: opacity .2s;
}

.c-submit-btn:hover,
input[type=submit]:hover { opacity: .85; }

/* 訂正する・ログアウトなどの控えめなボタン（墨の線、透明の塗り） */
.c-submit-btn--gray,
.c-submit-btn--white {
  border-color: var(--onmyodo-btn-ink);
  background: transparent;
  color: var(--onmyodo-btn-ink);
  font-weight: 400;
}

.c-submit-btn--gray--black {
  border-color: var(--onmyodo-btn-ink);
  background: var(--onmyodo-btn-ink);
}

.c-btn:focus-visible,
.c-submit-btn:focus-visible,
input[type=submit]:focus-visible {
  outline: 2px solid var(--onmyodo-btn-accent);
  outline-offset: 3px;
}