/*
  共通ボタン(.tv-btn)。TOP(css/top-lower.css .cta-band-btns a / .cta-btn-primary /
  .cta-btn-outline)と完全に同じ値(font-family / font-size / padding /
  border-radius / transition / hover)を再利用している。
  既存の .btn / .btn-primary / .btn-outline(style.css)は上書きしない
  (まだ新デザインへ移行していないページへの影響を避けるため)。
  今後ページを新デザインへ移行する際、そのページのCTAをこのクラスへ
  置き換えていく想定の共通部品。

  カード内画像のフレーム(.tv-photo-frame)も、TOPで実際に使用している値
  (.biz-photo / .svc-photo と同じ border-radius:14px、
   .story-photo(プライマリ)と同じ border-radius:20px、
   inset 0 0 0 1px rgba(255,255,255,.45))をそのまま再利用している。
  新しい固定値は作っていない。
*/

.tv-btn {
  font-family: var(--font-latin);
  font-size: 14px;
  padding: 14px 32px;
  border-radius: var(--radius-button);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--duration-hover) var(--easing), box-shadow var(--duration-hover), border-color var(--duration-hover);
}
.tv-btn-arrow { transition: transform var(--duration-hover) var(--easing); }
.tv-btn:hover .tv-btn-arrow { transform: translateX(4px); }

.tv-btn--primary { color: #fff; background: var(--gradient); }
.tv-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(80,98,191,.4); }

.tv-btn--outline { border: 1px solid var(--op-border); color: var(--navy); }
.tv-btn--outline:hover { border-color: var(--border-hover); transform: translateY(-2px); }

.tv-btn--lg { padding: 16px 36px; font-size: 15px; }

/* 旧.contact-cta-section(濃紺背景、style.css)の上で使う場合のコントラスト調整。
   同セクションの背景色自体は今回の対象外(--navy)のため、outlineボタンの
   色だけをその背景に合わせている。 */
.contact-cta-section .tv-btn--outline { color: #fff; border-color: rgba(255,255,255,.4); }
.contact-cta-section .tv-btn--outline:hover { border-color: rgba(255,255,255,.7); }

/* カード/セクション内画像のフレーム(TOPの.biz-photo/.svc-photoと同じ値) */
.tv-photo-frame { position: relative; border-radius: 14px; overflow: hidden; isolation: isolate; }
.tv-photo-frame img { display: block; width: 100%; object-fit: cover; }
.tv-photo-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); pointer-events: none; }
/* より大きい単体ビジュアル用(TOPの.story-photo(プライマリ)と同じ20px) */
.tv-photo-frame--lg { border-radius: 20px; }