@charset "UTF-8";

.torikago svg {
  display: block;
  width: 100%;
  height: auto;
}

.torikago .torikagoButton {
  transition: opacity 0.3s ease;
}

/* hover / off は基本的にCSS側で制御する */
.torikago [id$="_hover"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* クリック判定用。見た目には出さない */
.torikago [id$="_hit"],
.torikago [id$="_hit"] * {
  fill: transparent !important;
  opacity: 0 !important;
  pointer-events: all;
}

/* クリック可能ボタン */
.torikago .torikagoButton.is-clickable {
  cursor: pointer;
  pointer-events: all;
}

/* hover時はhover背景を表示 */
.torikago .torikagoButton.is-clickable:hover [id$="_hover"],
.torikago .torikagoButton.is-clickable:focus [id$="_hover"],
.torikago .torikagoButton.is-clickable.is-hover [id$="_hover"] {
  opacity: 1;
}

/* OFFボタン */
.torikago .torikagoButton.is-disabled {
  cursor: default;
  pointer-events: none;
}

.torikago .torikagoButton.is-disabled [id$="_hover"],
.torikago .torikagoButton.is-disabled [id$="_hit"] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* B */
.torikago #b_tr #b_tr_normal rect,
.torikago #b_tr #b_tr_normal path,
.torikago #b_tr #b_tr_normal polygon,
.torikago #b_tr #b_tr_normal circle,
.torikago #b_tr #b_tr_normal ellipse {
  fill: #D1DCE1 !important;
  transition: fill 0.3s ease, opacity 0.3s ease;
}

.torikago #b_tr #b_tr_hover rect,
.torikago #b_tr #b_tr_hover path,
.torikago #b_tr #b_tr_hover polygon,
.torikago #b_tr #b_tr_hover circle,
.torikago #b_tr #b_tr_hover ellipse {
  fill: #E8EDF0 !important;
  transition: fill 0.3s ease, opacity 0.3s ease;
}

/* C2 */
.torikago #c2_tr #c2_tr_normal rect,
.torikago #c2_tr #c2_tr_normal path,
.torikago #c2_tr #c2_tr_normal polygon,
.torikago #c2_tr #c2_tr_normal circle,
.torikago #c2_tr #c2_tr_normal ellipse {
  fill: #E2DDCB !important;
  transition: fill 0.3s ease, opacity 0.3s ease;
}

.torikago #c2_tr #c2_tr_hover rect,
.torikago #c2_tr #c2_tr_hover path,
.torikago #c2_tr #c2_tr_hover polygon,
.torikago #c2_tr #c2_tr_hover circle,
.torikago #c2_tr #c2_tr_hover ellipse {
  fill: #F0EEE4 !important;
  transition: fill 0.3s ease, opacity 0.3s ease;
}

/* E */
.torikago #e_tr #e_tr_normal rect,
.torikago #e_tr #e_tr_normal path,
.torikago #e_tr #e_tr_normal polygon,
.torikago #e_tr #e_tr_normal circle,
.torikago #e_tr #e_tr_normal ellipse {
  fill: #877F62 !important;
  transition: fill 0.3s ease, opacity 0.3s ease;
}

.torikago #e_tr #e_tr_hover rect,
.torikago #e_tr #e_tr_hover path,
.torikago #e_tr #e_tr_hover polygon,
.torikago #e_tr #e_tr_hover circle,
.torikago #e_tr #e_tr_hover ellipse {
  fill: #A29B82 !important;
  transition: fill 0.3s ease, opacity 0.3s ease;
}