@charset "UTF-8";

/* =====================================================
  COMPONENTS – MYTHOS CORE
  - CTA（リンク/ボタン）を全ページで統一
===================================================== */

:root{
  /* CTA tokens（ブランド差分は子テーマで上書きOK） */
  --cta-ink: rgba(0,0,0,.78);
  --cta-accent: var(--brand-accent, #9c7a2f);

  /* ラインを “少し細く” */
  --cta-line-h: 0.75px;

  /* “テキストより少し出る” */
  --cta-overhang: 12px;
  --cta-overhang-hover: 18px;

  /* underline の濃さ（安定のため “色” として保持） */
  --cta-line-color: color-mix(in srgb, var(--cta-accent) 36%, transparent);
  --cta-line-color-hover: color-mix(in srgb, var(--cta-accent) 50%, transparent);

  /* motion */
  --cta-dur: 520ms;
  --cta-ease: cubic-bezier(.16,1,.30,1);
  --cta-underline-dur: 700ms;
}

/* =====================================================
  CTA base（a / button / input）
===================================================== */

a.vip-btn,
a.system-summary__cta,
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
form input[type="submit"],
form button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-family: var(--font-en,"Cinzel",serif);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;

  color: var(--cta-ink);
  background-color: transparent;
  border: 0;
  box-shadow: none;

  /* “線はbackgroundで描く”ので、下の余白だけ確保 */
  padding: 10px 0 12px;

  position: relative;
  text-decoration: none;
  cursor: pointer;

  /* underline（inputでも効く） */
  background-image: linear-gradient(var(--cta-line-color), var(--cta-line-color));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: calc(100% + var(--cta-overhang)) var(--cta-line-h);

  transition:
    opacity var(--cta-dur) var(--cta-ease),
    transform var(--cta-dur) var(--cta-ease),
    background-size var(--cta-underline-dur) var(--cta-ease),
    background-image var(--cta-dur) var(--cta-ease);
}

/* link states（色が勝手に変わらないように） */
a.vip-btn:link,
a.vip-btn:visited,
a.vip-btn:hover,
a.vip-btn:active,
a.system-summary__cta:link,
a.system-summary__cta:visited,
a.system-summary__cta:hover,
a.system-summary__cta:active{
  color: var(--cta-ink);
}

/* hover */
a.vip-btn:hover,
a.system-summary__cta:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover,
form input[type="submit"]:hover,
form button[type="submit"]:hover{
  opacity: .72;
  transform: translateY(1px);

  background-image: linear-gradient(var(--cta-line-color-hover), var(--cta-line-color-hover));
  background-size: calc(100% + var(--cta-overhang-hover)) var(--cta-line-h);
}

/* focus */
a.vip-btn:focus-visible,
a.system-summary__cta:focus-visible,
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible,
form input[type="submit"]:focus-visible,
form button[type="submit"]:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--cta-accent) 55%, transparent);
  outline-offset: 6px;
}

/* =====================================================
  Optional: 既存の border-bottom 実装が残っている場合の保険
===================================================== */
a.vip-btn,
a.system-summary__cta,
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
form input[type="submit"],
form button[type="submit"]{
  border-bottom: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  a.vip-btn,
  a.system-summary__cta,
  .wpcf7 input[type="submit"],
  .wpcf7 button[type="submit"],
  form input[type="submit"],
  form button[type="submit"]{
    transition: none !important;
    transform: none !important;
  }
}