/* ===================================================
   Colorbox の見た目を 125naroom にそろえる（飾り）。
   Colorbox の example1/colorbox.css のあとに読み込む。
   読者は使わなくても動きは同じ（背景・枠・ボタンの見た目だけ）。
   =================================================== */
#cboxOverlay { background: #f3efe6; }

/* 画像の枠（example1 の角の画像）は使わない */
#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight,
#cboxMiddleLeft, #cboxMiddleRight, #cboxTopCenter, #cboxBottomCenter {
  width: 0; height: 0; background: none;
}
#cboxMiddleLeft, #cboxMiddleRight { height: auto; }

#cboxContent {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 1px #e8e3d8, 0 12px 32px rgba(43, 42, 39, .12);
}
#cboxLoadedContent { margin-bottom: 52px; }
#cboxLoadingOverlay { background: #fff; }
#cboxLoadingGraphic { background: none; }
#cboxLoadingGraphic::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  margin: -12px 0 0 -12px;
  width: 24px; height: 24px;
  border: 2px solid #e8e3d8;
  border-top-color: #2b2a27;
  border-radius: 50%;
  animation: cbox125-spin .8s linear infinite;
}
@keyframes cbox125-spin { to { transform: rotate(360deg); } }

/* 下の帯：前へ・次へ・番号・タイトル・閉じる */
#cboxTitle, #cboxCurrent {
  bottom: 14px;
  font: 400 13px/24px "Jost", "Zen Kaku Gothic New", sans-serif;
  color: #6b675f;
}
#cboxTitle { left: 0; width: 100%; text-align: center; }
#cboxCurrent { left: 100px; }

#cboxPrevious, #cboxNext, #cboxClose {
  bottom: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #e8e3d8;
  text-indent: -9999px;
  transition: background .3s;
}
#cboxPrevious { left: 12px; }
#cboxNext { left: 52px; }
#cboxClose { right: 12px; }
#cboxPrevious:hover, #cboxNext:hover, #cboxClose:hover { background: #e8dc6a; }
#cboxPrevious:focus-visible, #cboxNext:focus-visible, #cboxClose:focus-visible,
#cboxSlideshow:focus-visible { outline: 2px solid #2b2a27; outline-offset: 2px; }
#cboxPrevious::before, #cboxNext::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid #2b2a27;
  border-right: 2px solid #2b2a27;
}
#cboxPrevious::before { transform: translate(-30%, -50%) rotate(-135deg); }
#cboxNext::before { transform: translate(-70%, -50%) rotate(45deg); }
#cboxClose::before, #cboxClose::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: #2b2a27;
  transform: translate(-50%, -50%) rotate(45deg);
}
#cboxClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* スライドショーの「start / stop」 */
#cboxSlideshow {
  bottom: 14px;
  right: 56px;
  padding: 0 10px;
  border-radius: 999px;
  font: 500 12px/24px "Jost", sans-serif;
  letter-spacing: .06em;
  color: #2b2a27;
  box-shadow: 0 0 0 1px #e8e3d8;
  transition: background .3s;
}
#cboxSlideshow:hover { background: #e8dc6a; }

/* せまい画面では、番号とタイトルが重なるのでタイトルを隠す */
@media (max-width: 600px) {
  #cboxTitle { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #cboxLoadingGraphic::after { animation-duration: 2.4s; }
  #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { transition: none; }
}