/*--------------------------------------------------------------------------
   室内仕様スライダー：画像ラベルオーバーレイ
   .slickphots 内の .photo-item[data-label] に対して
   ::after 擬似要素でラベルテキストを右下に表示する
---------------------------------------------------------------------------*/

/* ラベル付き写真アイテムの基準ボックス */
.slickphots .photo-item {
  position: relative;
  overflow: hidden;
  display: inline-block; /* slickが上書きするので position:relative だけ重要 */
}

/* ラベルテキスト本体 */
.slickphots .photo-item::after {
  content: attr(data-label);   /* data-label属性の値をそのまま表示 */
  position: absolute;
  bottom: 12px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 2px;
  letter-spacing: 0.05em;
  pointer-events: none;        /* クリックをリンクに通す */
  white-space: nowrap;
  z-index: 10;
}

/* スマホでは少し小さめに */
@media screen and (max-width: 767px) {
  .slickphots .photo-item::after {
    font-size: 10px;
    padding: 3px 6px;
    bottom: 8px;
    right: 6px;
  }
}