/* sticky-cta.css — ベースライン(自動読込)。最低限の見た目を保証する。
   上書き・拡張はページ側/custom側で行い、このファイルと同名クラスをゼロから書き直さないこと。
   色・フォントは必ず var(--color-*) / var(--font-*) を参照(生hex禁止=契約C3)。
   最小要件: position:fixed / bottom:0 / 既定は隠れていて .is-visible で出る / モバイルで指が届く高さ。 */

.sticky-cta {
  display: block;  /* common.css の平置き防止(既定none)を上書き=CSSが読めた時だけ表示 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* .site-header=100 / .site-nav=99 より下。モバイルナビが開いたら背面へ回る。 */
  z-index: 90;
  background: var(--color-primary);
  color: var(--color-on-primary);
  /* 既定は隠す。sticky-cta.js が .is-visible を付けたら出る。 */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.sticky-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

.sticky-cta-inner {
  max-width: 62rem;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

/* リード文: モバイルでは隠す(★別マークアップを持たず CSS で出し分ける) */
.sticky-cta-lead {
  flex: 1;
  margin: 0;
  align-self: center;
  padding: 0 1.25rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.5;
}
.sticky-cta-lead span {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  opacity: .85;
}

.sticky-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.5rem;
  color: var(--color-on-primary);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.3;
  border-left: 1px solid color-mix(in srgb, var(--color-on-primary) 30%, transparent);
  transition: background .2s;
}
.sticky-cta-btn:hover { background: color-mix(in srgb, var(--color-on-primary) 12%, transparent); }
.sticky-cta-btn:focus-visible { outline: 2px solid var(--color-on-primary); outline-offset: -3px; }

/* 差し色でメインCTAを一段強くする案(案ごとに変える軸のひとつ) */
.sticky-cta-mail { background: var(--color-accent); color: var(--color-on-accent); }
.sticky-cta-mail:hover { background: color-mix(in srgb, var(--color-accent) 85%, var(--color-text)); }

.sticky-cta-btn svg { width: 1.15rem; height: 1.15rem; flex: none; }

.sticky-cta-label { display: flex; flex-direction: column; }
.sticky-cta-label b { font-size: 1.05rem; letter-spacing: .02em; }

@media (max-width: 768px) {
  .sticky-cta-lead { display: none; }              /* リード文はモバイルで隠す */
  .sticky-cta-btn {
    flex: 1;
    flex-direction: column;
    gap: .2rem;
    padding: .6rem .5rem;
    font-size: .8rem;
    min-height: 3.4rem;                            /* 指で押せる高さを確保 */
  }
  .sticky-cta-label b { font-size: .95rem; }
  .sticky-cta-btn:first-child { border-left: 0; }
}

/* 電話ボタン。メールボタン(.sticky-cta-mail)と差をつける場合はここで。
   差をつけないなら .sticky-cta-btn だけで足りるので、この定義は消してよい。 */
.sticky-cta-tel {
  background: transparent;
}