/* 追従ポップアップ（フロント）。
   箱のサイズ・色・位置は管理画面の設定をCSS変数で受け取る。
   中身は箱に対する％で絶対配置するので、箱を縮小すればそのまま追従する。 */

.swcp-outer[hidden] {
  /* hidden属性はUA側の display:none だが、下のレイアウト指定に上書きされる。
     出現前に見えてしまうため明示的に打ち消す。 */
  display: none !important;
}

.swcp {
  position: fixed;
  z-index: 9990;
  /* 枠線を内側に含める。テーマ側の指定に任せると、管理画面（content-box）と
     公開ページ（border-box）で箱の実寸が2pxずれ、％で置いた要素の位置も食い違う。 */
  box-sizing: border-box;
  width: var(--swcp-w, 320px);
  height: var(--swcp-h, 220px);
  background: var(--swcp-bg, #fff);
  border-radius: var(--swcp-radius, 12px);
  border: 1px solid #e6e9ee;
  box-shadow: 0 8px 28px rgba(11, 61, 122, .14);
  opacity: 0;
  pointer-events: none;
  /* 出現アニメーションとスマホ用の縮小を1つのtransformで合成する。
     別々に指定すると後勝ちで片方が消えるため。 */
  transform: translateY(var(--swcp-ty, 10px)) scale(var(--swcp-scale, 1));
  transition: opacity .25s ease, transform .25s ease;
}

.swcp--no-shadow { box-shadow: none; }
.swcp--no-border { border: none; }

.swcp--bottom-right { right: var(--swcp-x, 16px); bottom: var(--swcp-y, 16px); transform-origin: bottom right; }
.swcp--bottom-left  { left:  var(--swcp-x, 16px); bottom: var(--swcp-y, 16px); transform-origin: bottom left; }

.swcp--anim-slide { --swcp-ty: 24px; }
.swcp--anim-none  { --swcp-ty: 0px; transition: opacity .01s linear; }

.swcp.is-visible {
  --swcp-ty: 0px;
  opacity: 1;
  pointer-events: auto;
}

/* --- 中身 --- */
.swcp__el {
  position: absolute;
  box-sizing: border-box;
  /* 回転は --el-rot（要素ごとにインラインで入る）を使う。
     ホバーやアニメーションのtransformにも必ず挟んで、回転が消えないようにする。 */
  transform: rotate(var(--el-rot, 0deg));
}

.swcp__el--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 高さは指定せず、文字量に合わせる。枠や背景が文字から離れないようにするため。 */
.swcp__el--text {
  margin: 0;
  word-break: break-word;
}

.swcp__el--shape { pointer-events: none; }

.swcp__el--button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* アイコンは文字サイズに合わせる。ボタンを大きくしても釣り合いが崩れない。 */
.swcp__ic {
  width: 1.35em;
  height: 1.35em;
  flex: none;
}

.swcp__ic--img { object-fit: contain; }

.swcp__el--ic-right { flex-direction: row-reverse; }

/* --- マウスを乗せたときの動き。回転を必ず挟んで、傾きが消えないようにする。 --- */
.swcp__el--hv-lift:hover {
  transform: rotate(var(--el-rot, 0deg)) translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
}

.swcp__el--hv-grow:hover { transform: rotate(var(--el-rot, 0deg)) scale(1.04); }
.swcp__el--hv-press:hover { transform: rotate(var(--el-rot, 0deg)) translateY(2px); }
.swcp__el--hv-bright:hover { filter: brightness(1.12); }

/* 乗せたときだけ光を走らせる */
.swcp__el--hv-shine { overflow: hidden; }

.swcp__el--hv-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, .35);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

.swcp__el--hv-shine:hover::before {
  opacity: 1;
  animation: swcp-shine .7s ease-out;
}

/* --- ボタンのアニメーション --- */
.swcp__el--anim-pulse { animation: swcp-pulse 1.8s ease-in-out infinite; }
.swcp__el--anim-shake { animation: swcp-shake 2.4s ease-in-out infinite; }
.swcp__el--anim-shine { overflow: hidden; }

@keyframes swcp-pulse {
  0%, 100% { transform: rotate(var(--el-rot, 0deg)) scale(1); }
  50%      { transform: rotate(var(--el-rot, 0deg)) scale(1.05); }
}

@keyframes swcp-shake {
  0%, 88%, 100% { transform: rotate(var(--el-rot, 0deg)); }
  91%           { transform: rotate(calc(var(--el-rot, 0deg) - 2deg)); }
  95%           { transform: rotate(calc(var(--el-rot, 0deg) + 2deg)); }
}

/* 光が左から右へ走る。地色の上を白い帯が通過するだけで、地色自体は変えない。 */
.swcp__el--anim-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, .35);
  transform: skewX(-20deg);
  animation: swcp-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes swcp-shine {
  0%       { left: -60%; }
  45%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .swcp__el--anim-pulse,
  .swcp__el--anim-shake,
  .swcp__el--anim-shine::after { animation: none; }
}

/* --- 閉じるボタン --- */
.swcp__close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #e6e9ee;
  border-radius: 50%;
  background: #fff;
  color: #5b6675;
  cursor: pointer;
  z-index: 100;
}

.swcp__close:hover { color: #1a2330; }
.swcp__close--top-left  { top: 7px; left: 7px; }
.swcp__close--top-right { top: 7px; right: 7px; }

/* --- スマートフォン --- */
@media (max-width: 767px) {
  /* 箱ごと縮小する。--swcp-scale はJSが画面幅から決める。 */
  .swcp--sp-hide { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .swcp { transition: opacity .01s linear; }
}