﻿<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.tab_ban {
    width: 50px;/* 最初に表示されるバナーの幅 */
    height: 38px;/* バナーの高さ */
    position: fixed !important;/* バナーを固定します */
    position: absolute;
    right: 0;/* 右から0pxの位置に指定 */
}
.tab_ban a {/* リンクするエリアをバナー全体に広げる設定 */
    display: block;
    width: 100%;
    height: 100%;
}
.tab_ban:hover {/* カーソルが乗った時の動きを指定 */
    width: 153px;/* バナーが伸びた時の幅 */
 
    /* 以下アニメーションの設定 */
    -webkit-transition: width ease-in-out 0.5s;
    -moz-transition: width ease-in-out 0.5s;
    -ms-transition: width ease-in-out 0.5s;
    -o-transition: width ease-in-out 0.5s;
    transition: width ease-in-out 0.5s;
}
.tab_ban a:hover {
    /* IE9用 */
    width: 200px\9;
}
#tab01 {
    background: url(https://www.rakuten.ne.jp/gold/plywood/pt/tab-500.png) 0 0 no-repeat;
    bottom: 535px;
}
#tab02 {
    background: url(https://www.rakuten.ne.jp/gold/plywood/pt/tab-1000.png) 0 0 no-repeat;
    bottom: 489px;
}
#tab03 {
    background: url(https://www.rakuten.ne.jp/gold/plywood/pt/tab-top.png) 0 0 no-repeat;
    bottom: 361px;
}
</style>
