@charset "utf-8";

/*div#tab01{
  width: 135px;
  height: 230px;
  position: absolute; 
  top: 100px; 
  left: -45px;
  text-indent:-9999px;
  z-index:9999;
}

div#tab02{
  width: 135px;
  height: 230px;
  position: absolute; 
  top: 335px; 
  left: -45px;
  text-indent:-9999px;
  z-index:9999;
}

div#tab03{
  width: 135px;	
  height: 230px;
  position: absolute; 
  top: 570px; 
  left: -45px;
  text-indent:-9999px;
  z-index:9999;
}*/


/* ----IE9---*/
/*div#tab01:not(:target){
  width: 135px;
  height: 230px;
  position: fixed; 
  top: 100px; 
  left: -45px;
  text-indent:-9999px;
  z-index:9999\9;
}

div#tab02:not(:target){
  width: 135px;
  height: 230px;
  position: fixed; 
  top: 335px; 
  left: -45px;
  text-indent:-9999px;
  z-index:9999\9;
}

div#tab03:not(:target){
  width: 135px;
  height: 230px;
  position: fixed; 
  top: 570px; 
  left: -45px;
  text-indent:-9999px;
  z-index:9999\9;
}

div#tab01 a#event1:hover, div#tab02 a#event2:hover, div#tab03 a#event3:hover{
  background-position: 45px 0px;  
}*/

/*↓変更箇所↓*/

/*div#tab01 a#event1 {
  outline:none;
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_gaiyou_3.png") no-repeat scroll 0 0 transparent;  
  background-position: 20px 0px;
  width: 135px;
  height: 230px;
}


div#tab02 a#event2 {
  outline:none;
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_mens_1.png") no-repeat scroll 0 0 transparent;  
  background-position: 20px 0px;
  width: 135px;
  height: 230px;
}

div#tab03 a#event3 {
  outline:none;
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_ladies_1.png") no-repeat scroll 0 0 transparent;  
  background-position: 20px 0px;
  width: 135px;
  height: 230px;
}
*/

/*スペシャルページ用右側タブ*/
#tab-l-01  {
  width: 104px;
  height: 129px;
  position: fixed;
  display:block; 
  top: 45px; 
  left: 2px;
  z-index:10;  
}
#tab-l-01 a.move  {
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab.png") no-repeat transparent;  
  background-position: -58px 0px;
  width: 104px;
  height: 129px;
}
#tab-l-01 a.move:hover{
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab.png") no-repeat transparent;  
  background-position: 0px 0px;
  width: 104px;
  height: 129px;
}
#tab-l-02 {
  width: 104px;
  height: 129px;
  position: fixed; 
  display:block;
  top: 179px; 
  left: 2px;
  z-index:10;  
}
#tab-l-02 a.move  {
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab_1.png") no-repeat transparent;  
  background-position: -58px 0px;
  width: 104px;
  height: 129px;
}
#tab-l-02 a.move:hover{
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab_1.png") no-repeat transparent;  
  background-position: 0px 0px;
  width: 104px;
  height: 129px;
}
#tab-l-03 {
  width: 104px;
  height: 129px;
  position: fixed; 
  display:block;
  top: 313px; 
  left: 2px;
  z-index:10;  
}
#tab-l-03 a.move  {
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab_2.png") no-repeat transparent;  
  background-position: -58px 0px;
  width: 104px;
  height: 129px;
}
#tab-l-03 a.move:hover{
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab_2.png") no-repeat transparent;  
  background-position: 0px 0px;
  width: 104px;
  height: 129px;
}
#tab-l-04 {
  width: 104px;
  height: 129px;
  position: fixed; 
  display:block;
  top: 447px; 
  left: 2px;
  z-index:10;  
}
#tab-l-04 a.move  {
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab_3.png") no-repeat transparent;  
  background-position: -58px 0px;
  width: 104px;
  height: 129px;
}
#tab-l-04 a.move:hover{
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab_3.png") no-repeat transparent;  
  background-position: 0px 0px;
  width: 104px;
  height: 129px;
}
#tab-l-05 {
  width: 104px;
  height: 129px;
  position: fixed; 
  display:block;
  top: 581px; 
  left: 2px;
  z-index:10;  
}
#tab-l-05 a.move  {
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab_4.png") no-repeat transparent;  
  background-position: -58px 0px;
  width: 104px;
  height: 129px;
}
#tab-l-05 a.move:hover{
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/l_tab/l_tab_4.png") no-repeat transparent;  
  background-position: 0px 0px;
  width: 104px;
  height: 129px;
}




/*--右側タブバナー--*/

#tab-r-01  {
  width: 130px;
  height: 200px;
  position: fixed;
  display:block; 
  top: 45px; 
  right: 2px;
  z-index:10;  
}
#tab-r-01 a.move  {
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/r_tab/r_tab_3.jpg") no-repeat transparent;  
  background-position: 62px 0px;
  width: 130px;
  height: 200px;
}
#tab-r-01 a.move:hover{
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/r_tab/r_tab_3.jpg") no-repeat transparent;  
  background-position: 0px 0px;
  width: 130px;
  height: 200px;
}
#tab-r-02 {
  width: 130px;
  height: 200px;
  position: fixed; 
  display:block;
  top: 250px; 
  right: 2px;
  z-index:10;  
}
#tab-r-02 a.move  {
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/r_tab/r_tab.jpg") no-repeat transparent;  
  background-position: 62px 0px;
  width: 130px;
  height: 200px;
}
#tab-r-02 a.move:hover{
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/r_tab/r_tab.jpg") no-repeat transparent;  
  background-position: 0px 0px;
  width: 130px;
  height: 200px;
}
#tab-r-03 {
  width: 130px;
  height: 200px;
  position: fixed; 
  display:block;
  top: 455px; 
  right: 2px;
  z-index:10;  
}
#tab-r-03 a.move  {
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/r_tab/r_tab_1.jpg") no-repeat transparent;  
  background-position: 62px 0px;
  width: 130px;
  height: 200px;
}
#tab-r-03 a.move:hover{
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/r_tab/r_tab_1.jpg") no-repeat transparent;  
  background-position: 0px 0px;
  width: 130px;
  height: 200px;
}


#tab-r-04 {
  width: 130px;
  height: 200px;
  position: fixed; 
  display:block;
  top: 660px; 
  right: 2px;
  z-index:10;  
}
#tab-r-04 a.move  {
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/r_tab/r_tab_2.jpg") no-repeat transparent;  
  background-position: 62px 0px;
  width: 130px;
  height: 200px;
}
#tab-r-04 a.move:hover{
  display: block;
  background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/r_tab/r_tab_2.jpg") no-repeat transparent;  
  background-position: 0px 0px;
  width: 130px;
  height: 200px;
}
/*--右側タブバナーend--*/





/*
=================================================
左右からにゅっと出るバナー
=================================================
*/


#tab-01Area{
	position: fixed !important;
	position: absolute;
	width:50px;/*表示する画像幅*/
	height:150px;/*表示する画像高さ*/
	top: 50px;/*上からのポジション*/
	left: 0px;/*左からのポジション*/
	text-indent:-9999px;
	display:block;
	background-color: transparent;

	/* 以下アニメーションの設定 */
-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-02Area{
	position: fixed;
	width:50px;
	height:150px;
	top: 205px;
	left: 0px;
	text-indent:-9999px;
	display:block;
	background-color: transparent;

	/* 以下アニメーションの設定 */
-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-03Area{
	position: fixed;
	width:50px;
	height:150px;
	top: 360px;
	left: 0px;
	text-indent:-9999px;
	display:block;
	background-color: transparent;

	/* 以下アニメーションの設定 */
-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-04Area{
	position: fixed;
	width:50px;
	height:150px;
	top: 515px;
	left: 0px;
	text-indent:-9999px;
	display:block;
	background-color: transparent;

	/* 以下アニメーションの設定 */
-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-05Area{
	position: fixed;
	width:50px;
	height:150px;
	top: 670px;
	left: 0px;
	text-indent:-9999px;
	display:block;
	background-color: transparent;

	/* 以下アニメーションの設定 */
-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-06Area{
width: 50px;/* 最初に表示されるバナーの幅 */
height: 150px;/* バナーの高さ */
top: 50px;/*上からのポジション*/
background: url(tab.png) no-repeat;/* 画像のURL */
position: fixed;/* バナーを固定します */
right: 0;/* 右から0pxの位置に指定 */
bottom: 100px;/* 下から100pxの位置に指定 */

/* 以下アニメーションの設定 */
-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-07Area{
width: 50px;/* 最初に表示されるバナーの幅 */
height: 150px;/* バナーの高さ */
top: 205px;/*上からのポジション*/
background: url(tab.png) no-repeat;/* 画像のURL */
position: fixed;/* バナーを固定します */
right: 0;/* 右から0pxの位置に指定 */
bottom: 100px;/* 下から100pxの位置に指定 */

/* 以下アニメーションの設定 */
-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-08Area{
width: 50px;/* 最初に表示されるバナーの幅 */
height: 150px;/* バナーの高さ */
top: 360px;/*上からのポジション*/
background: url(tab.png) no-repeat;/* 画像のURL */
position: fixed;/* バナーを固定します */
right: 0;/* 右から0pxの位置に指定 */
bottom: 100px;/* 下から100pxの位置に指定 */

/* 以下アニメーションの設定 */
-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-09Area{
width: 50px;/* 最初に表示されるバナーの幅 */
height: 150px;/* バナーの高さ */
top: 515px;/*上からのポジション*/
background: url(tab.png) no-repeat;/* 画像のURL */
position: fixed;/* バナーを固定します */
right: 0;/* 右から0pxの位置に指定 */
bottom: 100px;/* 下から100pxの位置に指定 */

/* 以下アニメーションの設定 */
-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-01 a,
#tab-02 a,
#tab-03 a,
#tab-04 a,
#tab-05 a,
#tab-06 a,
#tab-07 a,
#tab-08 a,
#tab-09 a
{/* リンクするエリアをバナー全体に広げる設定 */
display: block;
width: 100%;
height: 100%;
}

#tab-01Area:hover,
#tab-02Area:hover,
#tab-03Area:hover,
#tab-04Area:hover,
#tab-05Area:hover,
#tab-06Area:hover,
#tab-07Area:hover,
#tab-08Area:hover,
#tab-09Area:hover
{/* カーソルが乗った時の動きを指定 */
width: 300px;/* バナーが伸びた時の幅 */

}

#tab-01Area #tab-01 a ,#tab-01Area #tab-01 a:hover{
background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_klasse14_1.png") right top no-repeat transparent;}

#tab-02Area #tab-02 a ,#tab-02Area #tab-02 a:hover {
background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_kate.jpg") right top no-repeat transparent;}

#tab-03Area #tab-03 a ,#tab-03Area #tab-03 a:hover{
background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_adidas.jpg") right top no-repeat transparent;}

#tab-04Area #tab-04 a ,#tab-04Area #tab-04 a:hover{
background: url("#") right top no-repeat transparent;}

#tab-05Area #tab-05 a ,#tab-05Area #tab-05 a:hover{
background: url("#") right top no-repeat transparent;}

#tab-06Area #tab-06 a ,#tab-06Area #tab-06 a:hover{
background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_kaisyagaiyou.png") left top no-repeat transparent;}

#tab-07Area #tab-07 a ,#tab-07Area #tab-07 a:hover{
background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_wrapping_100.png") left top no-repeat transparent;}

#tab-08Area #tab-08 a ,#tab-08Area #tab-08 a:hover{
background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_card.png") left top no-repeat transparent;}


#tab-09Area #tab-09 a ,#tab-09Area #tab-09 a:hover{
background: url("https://www.rakuten.ne.jp/gold/p-select/web/image/tab_size.png") left top no-repeat transparent;}



/*
=================================================
ここまで左右からにゅっと出るバナー
=================================================
*/