/* ===== ヘッダーCTAボタン v2.0.0 ===== */

:root {
  --hcta-btn-width:  90px;
  --hcta-btn-height: 60px;
  --hcta-font-size:  13px;
  --hcta-icon-size:  26px;
}

@keyframes hctaFadeIn {
  to { opacity: 1; }
}

/* =====================================================
   共通：position:fixed、フェードイン
   PC/モバイルで top/bottom を JS が切り替える
   ===================================================== */
#hcta-wrap {
  position: fixed !important;
  z-index: 100000 !important;
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  opacity: 0;
  animation: hctaFadeIn 0.3s ease 0.3s forwards;
}

/* --- PC：右上 --- */
#hcta-wrap.hcta-pc {
  top: 0 !important;
  bottom: auto !important;
  right: 0 !important;
  left: auto !important;
  width: auto !important;
}

/* WordPress 管理バー(32px) — PC */
.admin-bar #hcta-wrap.hcta-pc {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar #hcta-wrap.hcta-pc {
    top: 46px !important;
  }
}

/* --- モバイル：下部全幅 --- */
#hcta-wrap.hcta-mobile {
  top: auto !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  flex-direction: row !important;
}

/* =====================================================
   Snow Monkey ヘッダー右スペース確保（PC のみ）
   ===================================================== */
.l-header .c-header__inner,
.l-header .c-fluid-container,
.l-header .l-container,
.l-header .c-container {
  padding-right: calc(var(--hcta-btn-width) * 2 + 10px) !important;
  box-sizing: border-box !important;
}
.l-header {
  overflow: visible !important;
  position: relative !important;
}
@media (max-width: 767px) {
  .l-header .c-header__inner,
  .l-header .c-fluid-container,
  .l-header .l-container,
  .l-header .c-container {
    padding-right: 0 !important;
  }
}

/* =====================================================
   ボタン共通
   ===================================================== */
.hcta-btn {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: var(--hcta-btn-width);
  height: var(--hcta-btn-height);
  padding: 6px 14px;
  text-decoration: none !important;
  font-size: var(--hcta-font-size) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em;
  box-sizing: border-box;
  white-space: nowrap;
  border: none !important;
  outline: none;
  transition: filter 0.18s;
  font-family: inherit;
}
.hcta-btn:hover  { filter: brightness(1.1); text-decoration: none !important; }
.hcta-btn:active { filter: brightness(0.95); }
.hcta-btn:focus  { outline: 2px solid rgba(255,255,255,0.5); outline-offset: -2px; }

.hcta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hcta-icon-size);
  height: var(--hcta-icon-size);
  flex-shrink: 0;
}
.hcta-icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.hcta-icon-emoji { font-size: calc(var(--hcta-icon-size) * 0.85); line-height: 1; }
.hcta-label { white-space: nowrap; font-weight: 700; font-size: var(--hcta-font-size); }

/* =====================================================
   モバイル：ボタンを横並び全幅
   ===================================================== */
#hcta-wrap.hcta-mobile .hcta-btn {
  flex: 1 !important;
  flex-direction: row !important;
  height: 56px !important;
  min-width: 0 !important;
  gap: 8px !important;
  padding: 0 16px !important;
  justify-content: center !important;
}
#hcta-wrap.hcta-mobile .hcta-icon {
  width: 22px !important;
  height: 22px !important;
}

/* モバイル非表示オプション */
#hcta-wrap.hcta-hide-mobile {
  display: none !important;
}

/* スクロールコンパクトは無効化 */