/* フローティングバナーのラップ要素 */
#fixed_bottom_banner3
{
    /* 右端の上から20pxの位置に固定表示 */
    position:fixed;
    top: 84%;
    left: 2%;
    z-index:3;
}


/* 画像の共通設定 */
#fixed_bottom_banner3 > *
{
    /* アニメーション設定を追加。 */

    -webkit-transition: margin .2s ease;
    transition: margin .2s ease;
}

/* 2個目以降の画像の上部に余白を作る */
#fixed_bottom_banner3 > * ~ * { margin-top: 2px; }

/* リンク要素 */
#fixed_bottom_banner3 > a
{
    /* ブロック要素に変更 */
    display: block;
}

/* 吹き出し要素 */
#fixed_bottom_banner3 > * > span
{
    /* マウスオーバー時以外は非表示にする */
    display: none;
 
    /* 画像の左上に移動 */
    position: absolute;
    top: -2em;
    left: 2em;
 
    /* 画像の左上に移動 */
    padding: .5em 1em;
 
    /* 背景色 */
    background-color: #ffff00;
 
    /* 画像の左上に移動 */
    border-radius: 5px;
 
    /* テキストの設定 */
    color: #fff;
    font-size: .75em;
    text-align: center;
    white-space: nowrap;
}
 
/* 吹き出し要素の足部分 */
#fixed_bottom_banner3 > * > span::after
{
    content: '';
    position: absolute;
    top: 100%;
    left: 1em;
    z-index: 6;
    width: 0;
    height: 0;
    border-color: #ffff00 transparent transparent;
    border-style: solid;
    border-width: 5px;
}
 
/* マウスオーバーされたら吹き出しを表示 */
#fixed_bottom_banner3 > *:hover > span
{
    /* マウスオーバー時以外は非表示にする */
    display: block;
}
#fixed_bottom_banner3
{
    /* 右端の上から半分の位置に固定表示 */
    position: fixed;
    
    right: 0%;
 
    /* 要素の高さ半分の値を上に移動 */
    -webkit-transform: translateY(80%);
    transform: translateY(80%);
}