@charset "utf-8";
/* CSS Document */


/* Invisible left hotspot */
div.scrollingHotSpotLeft {
   /* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
   min-width:75px;
   width:5%;
	 height:210px;
   /* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
  x background-image:url(../images/);
   background-repeat:repeat;
   background-position:center center;
   position:absolute;
   z-index:200;
   left:0;
	 bottom:-65px; 
   /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	cursor: url(../images/cursor_arrow_left.png), url(../images/cursor_arrow_left.cur),e-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible {
   background-image:url(../images/arrow_left.gif);
   background-color:#fff;
   background-repeat:no-repeat;
   opacity:0.35; /* Standard CSS3 opacity setting */
   -moz-opacity:0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
   filter:alpha(opacity = 35); /* Opacity for Internet Explorer. */
   zoom:1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight {
   min-width:75px;
   width:5%;
   height:210px;
  xbackground-image:url(../images/);
   background-repeat:repeat;
   background-position:center center;
   position:absolute;
   z-index:200;
   right:0;
	 bottom:-65px; 
	cursor: url(../images/cursor_arrow_right.png), url(../images/cursor_arrow_right.cur),e-resize;	 
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible {
   background-image:url(../images/arrow_right.gif);
   background-color:#fff;
   background-repeat:no-repeat;
   opacity:0.35;
   filter:alpha(opacity = 35);
   -moz-opacity:0.35;
   zoom:1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/



div.scrollWrapper {
   position:relative;
   overflow:hidden;
   width:100%;
	 height:180px;
	 background-color: #09C;
	 padding: 15px 0;
}
div.scrollableArea {
   position:relative;
   width:auto;
	 height:100%;
}
div.scrollableArea a{
	background-color: #FFF;
}

.makeme {
   width:100%;      /* ウィンドウサイズいっぱいに */
   height:240px;   /* 画像の高さ */
   position:relative;
}

.makeme * {
   position:relative;
   float:left;
   margin:0; padding:0;
}

#wrap{
	padding-top: 120px;
}

div#makeMeScrollable2{
	margin-top: -80px;
	position: relative;
}
div#scroll_midashi{
	width: 252px;
	height: 42px;
	background: url(../images/scroll_midashi.png) no-repeat top left;
	text-indent: -9999px;
	margin-left: 650px;
}

p.scrollui{
	diosplay: block;
	margin-top: 80px !important;
	margin-bottom: 0;
}
.btn_scrollstop{
	width: 25px;
	height: 25px;
	background:url(../images/btn_scrollstop.png) no-repeat top left;
	text-indent: -9999px;
	cursor: pointer;
}
.btn_scrollstop2{
	width: 25px;
	height: 25px;
	background:url(../images/btn_scrollstop2.jpg) no-repeat top left;
	text-indent: -9999px;
	cursor: pointer;	
}
.btn_scrollstart{
	width: 25px;
	height: 25px;
	background:url(../images/btn_scrollstart.png) no-repeat top left;
	text-indent: -9999px;
	cursor: pointer;	
}