/* ============================================================
   colorbox カスタムスタイル
   標準テーマ（スプライト画像）は使わず、style.css のトークンに合わせて
   最小限のスタイルのみ書く。core styleのコメント区間は変更しない。
   ============================================================ */

/* ---- Core Style（colorbox公式の注記通り、ここは変更しない） ---- */
#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

#cboxWrapper {
  max-width: none;
}

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft,
#cboxBottomLeft {
  clear: left;
}

#cboxContent {
  position: relative;
}

#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#cboxTitle {
  margin: 0;
}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
  cursor: pointer;
}

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--color-bg-white);
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
  box-sizing: content-box;
}

/* ---- ここからサイト独自のスタイル ---- */
#cboxOverlay {
  background: #111111;
}

#colorbox {
  outline: 0;
  animation: cboxFadeIn 0.2s ease-out;
}

@keyframes cboxFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#cboxContent {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
}

#cboxLoadingOverlay {
  background: var(--color-bg-white);
}

/* GIFスプライトの代わりに、シンプルなテキストで表示 */
#cboxLoadingGraphic::after {
  content: "読み込み中…";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-jp);
  font-size: var(--font-size-sm);
  color: var(--color-text-sub);
}

/* 閉じるボタン：40px四方・線で描いたシンプルな「×」（ホバーで線の色が変化） */
#cboxClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
  padding: 0;
}

#cboxClose::before,
#cboxClose::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background-color: var(--color-text);
  transition: background-color 0.2s ease;
}

#cboxClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#cboxClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#cboxClose:hover::before,
#cboxClose:hover::after {
  background-color: var(--color-black);
}

/* 前へ/次へ・スライドショーはstore一覧では使わないため非表示 */
#cboxPrevious,
#cboxNext,
#cboxSlideshow {
  display: none !important;
}

#cboxTopLeft,
#cboxTopRight,
#cboxBottomLeft,
#cboxBottomRight,
#cboxMiddleLeft,
#cboxMiddleRight,
#cboxTopCenter,
#cboxBottomCenter {
  width: 0;
  height: 0;
  background: none;
}