@charset "utf-8";

/* リンクコンテンツにアイコンなどの画像を配置する
---------------------------------------------------------------*/

/* 既存クラスの上書き */
.linkmapclass {
  opacity: 1 !important;
  background-color: rgb(from #337733 r g b / 0.1);
}
._clickhover {
  background-color: rgb(from #5eadc7 r g b / 0.3);
}
._mclickhover {
  background-color: rgb(0 0 0 / 0.3);
}

/* 画像配置 - 共通　*/
._click-mark::before {
  content: "";
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

._click-mark:hover::before {
  opacity: 0.8;
}

/* LINKバッジ */
._click-mark.-link {
  --_height-pct: 44%;
  --_translate: 0 98%;
  display: grid !important;
  overflow: visible !important;
}

._click-mark.-link.-h37 {
  --_height-pct: 37%;
  --_translate: 0 88%;
}

._click-mark.-link::before {
  place-self: end;
  aspect-ratio: 65 / 20;
  background-image: url("../img/btn/link.png");
  translate: var(--_translate);
}

._click-mark.-link.-alt::before {
  --_height-pct: 63%;
  --_translate: 0 -100%;
  align-self: start;
  background-image: url("../img/btn/link-alt.png");
}
/* 見開き表示時 */
#canvas ._click-mark.-link::before {
  height: var(--_height-pct);
  max-height: 100%;
}
/* 拡大時 */
#l_canvas ._click-mark.-link::before {
  height: 20px;
  width: auto;
  max-width: 65px;
}

._click-mark.-pdf::before,
._click-mark.-pdf-3-2::before,
._click-mark.-pdf-4-1::before {
  aspect-ratio: 240 / 48;
  width: min(100%, 240px);
  height: min(100%, 48px);
}

/* PDFダウンロード */
._click-mark.-pdf::before {
  background-image: url("../img/btn/pdf_download.png");
}
._click-mark.-pdf-3-2::before {
  background-image: url("../img/btn/pdf-3-2.png");
}

._click-mark.-pdf-4-1::before {
  background-image: url("../img/btn/pdf-4-1.png");
}

._click-mark.-pdf-3-1::before {
  aspect-ratio: 280 / 48;
  width: min(100%, 280px);
  height: min(100%, 48px);
  background-image: url("../img/btn/pdf-3-1.png");
}

/* 内観を見る (カメラアイコン) */
._click-mark.-photo::before {
  aspect-ratio: 1;
  width: min(100%, 40px);
  height: min(100%, 40px);
  background-image: url("../img/btn/photo.png");
}

._click-mark.-map::before,
._click-mark.-slide::before {
  aspect-ratio: 310 / 60;
  width: min(100%, 310px);
  height: min(100%, 60px);
}

/* 地図を見る */
._click-mark.-map::before {
  background-image: url("../img/btn/map.png");
}

/* スライドを見る */
._click-mark.-slide::before {
  background-image: url("../img/btn/slide.png");
}