@charset "UTF-8";

/* ============================================
   ポップアップ オーバーレイ
   ============================================ */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.popup-overlay.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 1;
}

/* ============================================
   ポップアップ コンテナ（300×300px）
   Figma: x=39, y=191, w=300, h=300
   ============================================ */
.popup-inner {
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-transform: scale(0.92);
          transform: scale(0.92);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

@media screen and (min-width: 1100px) {
    .popup-inner {
        width: 100%;
        max-width: 30%;
        height: auto;
    }
}

.popup-overlay.is-open .popup-inner {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* ============================================
   ポップアップ 画像
   ============================================ */
.popup-img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.popup-img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ============================================
   閉じるボタン（52×42px）
   Figma: close button at x=303, y=169 (relative to popup: top=-22px, right=-16px)
   ============================================ */
.popup-close {
  position: absolute;
  top: -22px;
  right: -16px;
  width: 52px;
  height: 42px;
  background: #fff;
  border: none;
  padding: 0;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  border-radius: 50%;
}

.popup-close:hover {
  opacity: 0.7;
}

/* X アイコン（23×12px, ±28°）
   Figma: icon 22.96×12.41, stroke #000, weight 1px
   ============================================ */
.popup-close-icon {
  position: relative;
  width: 23px;
  height: 12px;
  display: block;
}

.popup-close-icon::before,
.popup-close-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
}

.popup-close-icon::before {
  -webkit-transform: translateY(-50%) rotate(28deg);
          transform: translateY(-50%) rotate(28deg);
}

.popup-close-icon::after {
  -webkit-transform: translateY(-50%) rotate(-28deg);
          transform: translateY(-50%) rotate(-28deg);
}

/* ============================================
   detail-img クリック可能スタイル
   ============================================ */
.detail-img {
  cursor: pointer;
}