/* ===== モーダル全体（画面いっぱいに固定） ===== */
.spa-notice {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;            /* ヘッダー等より手前に出す。隠れる場合は数値を上げる */
  display: flex;
  align-items: center;       /* 上下中央 */
  justify-content: center;   /* 左右中央 */
  padding: 16px;             /* 画面端との余白 */
  box-sizing: border-box;
}

/* 非表示状態 */
.spa-notice[hidden] {
  display: none;
}

/* ===== 背景の黒い半透明（クリックで閉じる） ===== */
.spa-notice__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);   /* 0.6 = 濃さ（0〜1） */
  cursor: pointer;
}

/* ===== 画像を入れる箱 ===== */
.spa-notice__box {
  position: relative;
  width: 100%;
  max-width: 600px;          /* PCでの最大幅 */
}

/* 画像（画面からはみ出さないよう高さも制限） */
.spa-notice__box img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 80px);
  object-fit: contain;
}

/* ===== 閉じるボタン（右上の丸い×） ===== */
.spa-notice__close {
  position: absolute;
  top: -14px;                /* 画像の上端から少しはみ出させる */
  right: -14px;              /* 画像の右端から少しはみ出させる */
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;        /* 丸くする */
  background: #000;
  color: #fff;
  font-size: 26px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}

/* マウスを乗せたとき */
.spa-notice__close:hover {
  background: #333;
}

/* ===== スマホ（幅640px以下） ===== */
@media (max-width: 640px) {
  .spa-notice__close {
    top: -12px;
    right: -4px;             /* 画面外に出ないよう内側に寄せる */
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 30px;
  }
}