/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/

/*画像左上から開始。重なりの一番上*/
#colorbox, #cboxOverlay, #cboxWrapper{
	position:absolute;
	top:0; 
	left:0; 
	z-index:9999; 
	overflow:hidden;
}
	
#cboxWrapper {
	max-width:none;
}

/*colorbox背景。ブラウザによって大きさ可変*/
#cboxOverlay{
	position:fixed; 
	width:100%; 
	height:100%;
}

/*テキストの回り込みを左側のみ解除*/
#cboxMiddleLeft, #cboxBottomLeft{
	clear:left;
}

#cboxContent{
	position:relative;
}

/*要素の領域をはみ出したコンテンツはスクロールで表示*/
#cboxLoadedContent{
	overflow:auto; 
	-webkit-overflow-scrolling: touch;
}

#cboxTitle{
	margin:0;
}

/*画像読み込み中画面。#boxContentを基準に左上より開始*/
#cboxLoadingOverlay, #cboxLoadingGraphic{
	position:absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%;
}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
	cursor:pointer;
}

/*画像中央配置・最大幅は設定しない・IEで画像縮小時、きれいに表示する*/
.cboxPhoto{
	float:left;
	margin:auto; 
	border:0;
	display:block; 
	max-width:none; 
	-ms-interpolation-mode:bicubic;
	}

/*インラインフレーム設定（ブラウザによって大きさ可変）*/	
.cboxIframe{
	width:100%; 
	height:100%; 
	display:block; 
	border:0;
	padding:0; 
	margin:0;
}

/*要素の幅と高さを初期値にする*/
#colorbox, #cboxContent, #cboxLoadedContent{
	box-sizing:content-box; 
	-moz-box-sizing:content-box; 
	-webkit-box-sizing:content-box;
}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
    カラーボックスの外観を変更するには、次のスタイルを変更します。
*/
/*colorbox背景。*/
#cboxOverlay{
	background: url(../img/overlay.png) repeat 0 0; 
	opacity: 0.9; 
	filter: alpha(opacity = 90);
}

/*マウスオン時の枠線なし*/
#colorbox{
	outline:0;
}

/*画像装飾パーツ*/
/*枠線上部左角*/
    #cboxTopLeft{
		width:21px; 
		height:21px; 
		background: url(../img/controls.png) no-repeat -101px 0;
		}

/*枠線上部右角*/		
    #cboxTopRight{
		width:21px; 
		height:21px; 
		background: url(../img/controls.png) no-repeat -130px 0;
		}

/*枠線下部左角*/		
    #cboxBottomLeft{
		width:21px; 
		height:21px; 
		background: url(../img/controls.png) no-repeat -101px -29px;
		}
	
/*枠線下部右角*/	
    #cboxBottomRight{
		width:21px; 
		height:21px; 
		background: url(../img/controls.png) no-repeat -130px -29px;
		}
		
/*左枠線*/
    #cboxMiddleLeft{
		width:21px; 
		background: url(../img/controls.png) left top repeat-y;
		}
	
/*右枠線*/	
    #cboxMiddleRight{
		width:21px; background: url(../img/controls.png) right top repeat-y;
		}
	
/*上枠線*/	
    #cboxTopCenter{
		height:21px;
		background: url(../img/border.png) 0 0 repeat-x;
		 }

/*下枠線*/		 
    #cboxBottomCenter{
		height:21px; 
		background: url(../img/border.png) 0 -29px repeat-x;
		}

/*カラーボックス背景*/		
    #cboxContent{
		background:#fff; 
		overflow:hidden;
		}
		
/*カラーボックス画像box背景*/
        .cboxIframe{
			background:#fff;
			}

/**/			
        #cboxError{
			padding:50px;
			border:1px solid #ccc;
			 }

/*読み込んだ画像エリアのマージン*/			 
        #cboxLoadedContent{
			margin-bottom:28px;
			}

/*タイトル部分（#cboxContentを基準に）*/			
        #cboxTitle{
			position:absolute; 
			bottom:0px; 
			left:0;
			text-align:center; 
			width:100%; 
			color:#949494;
			 }

/*画像順番表記部分（#cboxContentを基準に）*/			 
        #cboxCurrent{
			position:absolute; 
			bottom:4px; 
			left:58px;
			margin: -9999px; 
			color:#949494;
			}

/*読み込み中の画像背景部分*/			
        #cboxLoadingOverlay{
			background: url(../img/loading_background.png) no-repeat center center;
			}

/*画像読み込み中gif画像*/			
        #cboxLoadingGraphic{
			background: url(../img/loading.gif) no-repeat center center;
			}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles
/*ボタン配置位置*/

		 #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
			border:0; 
			padding:0; 
			margin:0; 
			overflow:visible; 
			width:auto; 
			background:none; 
			}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) 
*/
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
			outline:0;
			}

        #cboxSlideshow{
			position:absolute; 
			bottom:4px; 
			right:30px; 
			color:#0092ef;
			}
			
/*戻るボタン画像←*/
        #cboxPrevious{
			position:absolute; 
			bottom:0; 
			left:0; 
			background: url(../img/controls.png) no-repeat -75px 0; 
			width:25px; 
			height:25px; 
			text-indent:-9999px;
			}
			
/*戻るボタン画像←マウスオーバー時*/	
        #cboxPrevious:hover{
			background-position:-75px -25px;
			}
			
/*進むボタン画像→*/
        #cboxNext{
			position:absolute; 
			bottom:0; 
			left:27px; 
			background: url(../img/controls.png) no-repeat -50px 0; 
			width:25px; 
			height:25px; 
			text-indent:-9999px;
			}
			
/*進むボタン画像→マウスオーバー時*/		
		 #cboxNext:hover{
			background-position:-50px -25px;
			}
			
/*閉じるボタン*/
        #cboxClose{
			position:absolute; 
			bottom:0; 
			right:0; 
			background: url(../img/controls.png) no-repeat -25px 0; 
			width:25px; 
			height:25px; 
			text-indent:-9999px;
			}
			
/*閉じるボタン・マウスオーバー時*/
        #cboxClose:hover{
			background-position:-25px -25px;
			}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}