/* ==========================================================================
   戻るボタン離脱防止モーダル
   - JS: /js/back-intercept.js
   - 命名空間: cp-back-intercept (既存サイト CSS との衝突回避)
   ========================================================================== */

.cp-back-intercept {
  position: fixed;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.cp-back-intercept--visible {
  display: flex;
  animation: cp-back-intercept-fade 0.18s ease-out;
}

@keyframes cp-back-intercept-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cp-back-intercept__dialog {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 460px;
  border-radius: 10px;
  padding: 44px 24px 24px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  font-family: inherit;
  color: #212121;
}

.cp-back-intercept__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 0;
}

.cp-back-intercept__close:hover,
.cp-back-intercept__close:focus {
  color: #212121;
  outline: none;
}

.cp-back-intercept__text {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
}

.cp-back-intercept__highlight {
  color: #ea301b;
  font-weight: 700;
  font-size: 1.18em;
  margin: 0 0.05em;
}

.cp-back-intercept__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-back-intercept__cta {
  display: block;
  text-align: center;
  background: #06c755;
  color: #fff;
  padding: 14px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.cp-back-intercept__cta:hover,
.cp-back-intercept__cta:focus {
  background: #05a648;
  color: #fff;
  text-decoration: none;
  outline: none;
}

@media (max-width: 480px) {
  .cp-back-intercept__dialog {
    padding: 40px 18px 20px;
  }
  .cp-back-intercept__text {
    font-size: 15px;
  }
  .cp-back-intercept__cta {
    padding: 13px 16px;
    font-size: 14.5px;
  }
}