@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バッジ
   クリックに反応する範囲は rect そのもの（本文テキストを覆う想定）。
   バッジ画像は rect の「外」に出す。これは元からの仕様。

     通常 (-link)      … rect の下・右端揃え（下へ 98% ずらす）
     矢印右上 (-alt)   … rect の上・右端揃え（上へ 100% ずらす）

   大きさは rect に追従させず -lg / -md / -sm で固定する。
     見開き表示 … 誌面が表示領域の高さに追従するので vh で指定（誤差 ±3% 程度）
     拡大表示   … 誌面が常に 1400x1986px なので px で指定

   誌面に対する高さ: 大 1.41% / 中 1.09% / 小 0.87%
   （link-handlers.js の LINK_BADGE_SIZE と対応） */
._click-mark.-link {
  --_link-img: url("../img/btn/link-m.png");
  --_link-h-spread: 0.88vh;
  --_link-h-zoom: 22px;
  --_link-translate: 0 98%;
  display: grid !important;
  overflow: visible !important;
}

._click-mark.-link.-lg {
  --_link-img: url("../img/btn/link-l.png");
  --_link-h-spread: 1.14vh;
  --_link-h-zoom: 28px;
}
._click-mark.-link.-md {
  --_link-img: url("../img/btn/link-m.png");
  --_link-h-spread: 0.88vh;
  --_link-h-zoom: 22px;
}
._click-mark.-link.-sm {
  --_link-img: url("../img/btn/link-s.png");
  --_link-h-spread: 0.70vh;
  --_link-h-zoom: 17px;
}

/* 矢印が右上を向く版は rect の上へ出す */
._click-mark.-link.-alt { --_link-img: url("../img/btn/link-alt-m.png"); --_link-translate: 0 -100%; }
._click-mark.-link.-alt.-lg { --_link-img: url("../img/btn/link-alt-l.png"); }
._click-mark.-link.-alt.-md { --_link-img: url("../img/btn/link-alt-m.png"); }
._click-mark.-link.-alt.-sm { --_link-img: url("../img/btn/link-alt-s.png"); }

._click-mark.-link::before {
  place-self: end;
  aspect-ratio: 65 / 20;
  width: auto;
  background-image: var(--_link-img);
  translate: var(--_link-translate);
}

._click-mark.-link.-alt::before {
  align-self: start;
}

/* 見開き表示時 */
#canvas ._click-mark.-link::before { height: var(--_link-h-spread); }
/* 拡大時 */
#l_canvas ._click-mark.-link::before { height: var(--_link-h-zoom); }

._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,
._click-mark.-mail::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");
}

/* メールを送る（横長） */
._click-mark.-mail::before {
  background-image: url("../img/btn/mail.png");
}

/* メール（正方形アイコン） */
._click-mark.-mail-icon::before {
  aspect-ratio: 1;
  width: min(100%, 40px);
  height: min(100%, 40px);
  background-image: url("../img/btn/mail-icon.png");
}