@charset "UTF-8";

/* ==========================================================================
   キャメラを持った男たちQ&A ページ専用CSS
   ========================================================================== */

body {
  background-color: #f5efe6 !important;
}

#lightboxModal.p-lightbox-modal {
  background-color: #000000 !important;
}

/* ツールチップのスタイル */
.c-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  flex-shrink: 0;
}

.c-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 10px;
  font-size: 0.8rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.c-tooltip::before {
  content: "";
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%) translateY(0px);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  z-index: 10;
}

.c-tooltip:hover::after,
.c-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* アイコン画像を少し大きく調整 */
.c-tooltip img[src="p.png"],
.c-tooltip img[src="d.png"] {
  width: 56px !important;
}