@charset "UTF-8";
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* 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:25px;
    width:25px; height:100%;padding-right:5px;
    /* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
    background-image:url(../top/big_transparent.gif);
    background-repeat:repeat;
    background-position:center center;
    position:absolute;
    z-index:80;
    left:0;
    /*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
    cursor:pointer;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible {
    background-image:url(../top/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:25px;
    width:25px; height:100%;padding-left:5px;
    background-image:url(../top/big_transparent.gif);
    background-repeat:repeat;
    background-position:center center;
    position:absolute;
    z-index:80;
    right:0px;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible {
    background-image:url(../top/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:100%;
}
div.scrollableArea {
    position:relative;
    width:auto; height:100%;
}
div.scrollableArea img{
    width:120px; height:auto;
}
.makeme {
    width:470px;        /* ウィンドウサイズいっぱいに */
    height:140px;    /* 画像の高さ */
    position:relative;
}

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