/* 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;
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-text);
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  box-shadow: 0 -2px 16px rgba(74, 124, 89, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s ease, opacity .3s 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;
  justify-content: center;
}

/* リード文: モバイルでは隠す(★別マークアップを持たず CSS で出し分ける) */
.sticky-cta-lead {
  flex: 1;
  margin: 0;
  align-self: center;
  padding: 0 1.5rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
}
.sticky-cta-lead span {
  display: block;
  font-family: var(--font-body);
  font-size: .78rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.sticky-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.75rem;
  color: var(--color-text);
  text-decoration: none;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  line-height: 1.3;
  border-left: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  transition: background .2s, color .2s;
}
.sticky-cta-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  opacity: 1;
}
.sticky-cta-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -3px; }

/* 電話ボタン: 薄いグリーンで控えめに */
.sticky-cta-tel {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-primary);
}
.sticky-cta-tel:hover {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
  color: var(--color-primary-dark);
}

/* お問い合わせボタン: 白地に枠線でシンプルに */
.sticky-cta-mail {
  background: transparent;
  color: var(--color-primary);
  border-left: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.sticky-cta-mail:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary-dark);
}

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

.sticky-cta-label { display: flex; flex-direction: column; font-family: 'Noto Serif JP', serif; }
.sticky-cta-label b { font-size: 1rem; letter-spacing: .05em; font-weight: 500; }

@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: .9rem; }
  .sticky-cta-btn:first-child { border-left: 0; }
}