/* Diagonal Fill Button — 単独で使える、CSSだけのボタン演出。 */
.diagonal-fill-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.25em;
  box-sizing: border-box;
  inline-size: 18rem;
  max-inline-size: 100%;
  min-block-size: 3.75rem;
  padding: .875rem 1.5rem;
  overflow: hidden;
  appearance: none;
  border: 1px solid var(--dfb-color, #213aba);
  border-radius: var(--dfb-radius, 999px);
  background: var(--dfb-background, #fff);
  color: var(--dfb-color, #213aba);
  font: inherit;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
  transition: color var(--dfb-duration, .5s) ease;
}
.diagonal-fill-button::before {
  content: "";
  position: absolute;
  /* 傾けた上端が通常時に見えず、角丸の隅まで塗り切れる大きさ。 */
  inset: -100% -2px;
  z-index: 0;
  background: var(--dfb-fill, var(--dfb-color, #213aba));
  pointer-events: none;
  transform: translateY(100%) skewY(-12deg);
  transition: transform var(--dfb-duration, .5s) ease;
}
.diagonal-fill-button__label,
.diagonal-fill-button__arrow { position: relative; z-index: 1; }
.diagonal-fill-button__label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  letter-spacing: .04em;
  transition: letter-spacing var(--dfb-duration, .5s) ease;
}
.diagonal-fill-button__arrow { flex: 0 0 auto; letter-spacing: 0; }
.diagonal-fill-button:not(:disabled):is(:hover, :focus-visible) { color: var(--dfb-active-text, #fff); }
.diagonal-fill-button:not(:disabled):is(:hover, :focus-visible)::before { transform: translateY(0) skewY(-12deg); }
.diagonal-fill-button:not(:disabled):is(:hover, :focus-visible) .diagonal-fill-button__label { letter-spacing: .14em; }
.diagonal-fill-button:focus-visible { outline: 3px solid var(--dfb-color, #213aba); outline-offset: 4px; }
.diagonal-fill-button:disabled { opacity: .5; cursor: not-allowed; }

/* 動きを減らす場合は、ホバー前から「塗り終わった状態」を表示する。 */
@media (prefers-reduced-motion: reduce) {
  .diagonal-fill-button { color: var(--dfb-active-text, #fff); transition: none; }
  .diagonal-fill-button::before { transform: translateY(0) skewY(-12deg); transition: none; }
  .diagonal-fill-button .diagonal-fill-button__label { letter-spacing: .14em; transition: none; }
}
html.reduced .diagonal-fill-button { color: var(--dfb-active-text, #fff); transition: none; }
html.reduced .diagonal-fill-button::before { transform: translateY(0) skewY(-12deg); transition: none; }
html.reduced .diagonal-fill-button .diagonal-fill-button__label { letter-spacing: .14em; transition: none; }