/*----------------------------------------------------------------------------
吹き出し全体
------------------------------------------------------------------------------*/
.tipsy {
  padding: 5px;
  position: absolute;
  z-index: 100000;
  cursor: default;
  
  /* IE6以下はmax-widthに対応していないので非表示 */
  _display: none;
}

/*----------------------------------------------------------------------------
吹き出しの枠
------------------------------------------------------------------------------*/
.tipsy-inner {
  padding: 5px;
  background-color: #333;
  color: white;
  word-break: break-all;
  word-wrap: break-word;
  text-align: left;
  overflow: hidden;
  max-width: 550px;
}

/*----------------------------------------------------------------------------
吹き出しの矢印
------------------------------------------------------------------------------*/
.tipsy-arrow {
  position: absolute;     /* 三角形の位置基準 */
  content: "";            /* 三角形のテキストを非表示 */
  line-height: 0;         /* 三角形を横にしたとき高さがおかしくなるのを防ぐ (IE6だけ？) */
  border: 6px solid #333; /* 三角形の幅 (tipsy.padding + 1) 色(tipsy-inner.background-color) */
}

.tipsy-n .tipsy-arrow, .tipsy-nw .tipsy-arrow, .tipsy-ne .tipsy-arrow {
  border-top: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

.tipsy-s .tipsy-arrow, .tipsy-sw .tipsy-arrow, .tipsy-se .tipsy-arrow {
  border-bottom: 0;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

.tipsy-e .tipsy-arrow {
  border-right: 0;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.tipsy-w .tipsy-arrow {
  border-left: 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.tipsy-n .tipsy-arrow {
  top: 0;
  left: 50%;
  margin-left: -6px;
}

.tipsy-nw .tipsy-arrow {
  top: 0;
  left: 10px;
}

.tipsy-ne .tipsy-arrow {
  top: 0;
  right: 10px;
}

.tipsy-s .tipsy-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -6px;
}

.tipsy-sw .tipsy-arrow {
  bottom: 0;
  left: 10px;
}

.tipsy-se .tipsy-arrow {
  bottom: 0;
  right: 10px;
}

.tipsy-e .tipsy-arrow {
  top: 50%;
  margin-top: -6px;
  right: 0;
}

.tipsy-w .tipsy-arrow {
  top: 50%;
  margin-top: -6px;
  left: 0;
}

/*----------------------------------------------------------------------------
吹き出しの装飾
------------------------------------------------------------------------------*/
.tipsy-inner {
  /* 枠の丸角の設定、非対応ブラウザだと鋭角に表示 (IE8以下非対応) */
  border-radius: 3px;
  -webkit-border-radius: 3px;

  /* 枠の影の設定、非対応ブラウザだと影なし表示 (IE8以下非対応) */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.tipsy-arrow {
  /* 矢印の影の設定、非対応ブラウザだと影なし表示 (IE11以下非対応) */
  filter: drop-shadow(0 0 1px #333);
}

/*----------------------------------------------------------------------------
吹き出しの枠内のHTML
------------------------------------------------------------------------------*/
.tipsy-inner p {
  margin: 0;
  padding: 0;
}

.tipsy-inner img {
  float: left;
  margin: 0;
  padding: 0;
  width: 94px;
  /* height: 70px; */
  background-color: #000;
}

.tipsy-inner .thumbnail {
  float: left;
  text-align: left;
  overflow: hidden;
  margin: 0 5px 0 0;
  padding: 0;
  width: 94px;
  height: 70px;
}

.tipsy-inner .only {
  margin: 0;
}

/* 画像フェード表示
.tipsy-inner img {
  animation: fadeIn 0.5s ease 0s 1 normal;
  -webkit-animation: fadeIn 0.5s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
} */

/*----------------------------------------------------------------------------
吹き出しのアニメーション
------------------------------------------------------------------------------*/
.tipsy.fade, .tipsy.scale, .tipsy.rotate, .tipsy.move {
  transition: transform 0.2s, opacity 0.2s;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
}

/* フェード */
.tipsy.fade {
  opacity: 0;
}

.tipsy.fade.active {
  opacity: 1;
}

/* 拡大 */
.tipsy.scale {
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
}

.tipsy.scale.active {
  transform: scale(1);
  -webkit-transform: scale(1);
}

/* 裏返す */
.tipsy.rotate {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.tipsy.rotate.active {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
}

/* 離れる */
.tipsy.move {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

.tipsy.move.active {
  transform: translateY(-0.5em);
  -webkit-transform: translateY(-0.5em);
}

.tipsy-w.move.active {
  transform: translateX(0.5em);
  -webkit-transform: translateX(0.5em);
}

.tipsy-e.move.active {
  transform: translateX(-0.5em);
  -webkit-transform: translateX(-0.5em);
}

.tipsy-n.move.active, .tipsy-nw.move.active, .tipsy-ne.move.active {
  transform: translateY(0.5em);
  -webkit-transform: translateY(0.5em);
}