@charset="utf-8";

 body {
            background-color : #C0C0C0;     /*silver背景色*/
}
 body a {
            color : #FFFFFF;
            text-decoration : none;
}


/*   ベースエリアの設定　ーーーーーーーーーーーーーーーーーーーーーー*/
 #site {
            position : relative;
            background-image : url("../sliceimages/library-design880.jpg");  
            width : 880px;  
            height : 660px;
            top: 10px;             
            left : 50%;
            margin-left  : -440px;
}

/*   トップリンクとカテゴリボタンの設定　ーーーーーーーーーーーーーー*/

 #toplink {
            position : absolute;
            background-image : url("../sliceimages/toplink.png");
            width : 120px;
            height : 40px;
            top : 20px; 
            left : 20px;
}
 #menu {
            cursor : pointer ;
            position : absolute;
            width : 510px;
            height : 30px;
            border : solid 1px ;
            border-color : #FFFFFF;
            margin : 0;
            top : 98px;
            left : 190px;
}

 .button {
            display : inline-block;
            width : 121px;
            height : 25px;
            margin : 1 8px; 
            padding : 1px;
            
}

 #button01{
            background-image : url("../sliceimages/library880_10.jpg");
　　　　width : 120px;
            height : 25px;
}
 #button01:hover {
            background-image : url("../sliceimages/library880_over_10.jpg");
}

 #button02{
            background-image : url("../sliceimages/library880_11.jpg");
　　　　width : 120px;
            height : 25px; 
}
 #button02:hover {
            background-image : url("../sliceimages/library880_over_11.jpg");
}

 #button03{
            background-image : url("../sliceimages/library880_12.jpg");
　　　　width : 119px;
            height : 25px; 
}
 #button03:hover {
            background-image : url("../sliceimages/library880_over_12.jpg");
}

 #button04{
            background-image : url("../sliceimages/library880_13.jpg");
　　　　width : 121px;
            height : 25px; 
}
 #button04:hover {
            background-image : url("../sliceimages/library880_over_13.jpg");
}

/*   メインエリアの設定　ーーーーーーーーーーーーーー*/

 #main_area {
             position : relative;
             width : 738px;
             height : 410px;
             top :  143px;             
             left : 74px;
             z-index : 1; 
             border : solid 2px #696969;
              -webkit-border-radius : 12px;
              -moz-border-radius : 12px;
              -o-border-radius : 12px;
              border-radius : 12px;
}

 #select {
             position : absolute;
             background-color : #000000;
             width : 63px
             height : 90px;
             padding : 4px  2px;
             border : solid 3px;
             border-color : #FFFAF0;      /*枠の色：floralwhite*/
             border-radius : 5px;             
               -webkit-border-radius : 5px;
                moz-border-radius : 5px;
                -o-border-radius : 5px; 
             top:60px;
             left :0px;
             z-index : 3;
             font-size : 11px;
             font-family : "Roboto sub","Century", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", "Meiryo", san-serif;
             line-height : 90%;           
}

.jump {
             cursor : pointer;
             font-color : #000000;
}

 .scroll {
             position : absolute;
             width : 660px;
             height : 410px;
             top: 0px;
             left : 96px;
             border : none;
             padding : 0  24px  0  0px ;
             overflow-y : scroll;
             overflow-x : hidden;
}

 .title {
             font-style :  oblique;
             font-weight :  bold;
             font-size :  15px;
             font-family : "Roboto slab" ,"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro W6", "メイリオ", "Meiryo", serif ;
             color : #FFFAFA;    /*文字色＝snow*/
             border-bottom : solid 2px #FFFAFA;
              clear : left ;
              margin : 17px  5px;
              width : 620px;
}
 .photobox {
                display : block;
                float :  left ;
                width : 205px;
                height : 170px;
                margin : 0;
                padding : 3px  4px;
                background-color : #555555;
                font-size : 12px;
} 


 .email {
               position : absolute;
               top : 555px;
               left : 410px;
                color : red;
               font-size : 12px;
               
}



/*ーーーーーー　サイト内各ページへのリンク（component）ーーーーーーーー*/

 #component_bar {
               position : absolute ;
               width : 600px;
               height : 50px;
               top : 597px ;
               left : 200px ;
 }

 .component{
                display : inline-block ;
                border : none ;
                padding : 5px ;
                margin : 0  14px ;
                    -webkit-border-radius : 5px ;
                    -moz-border-radius : 5px ;
                    -o-border-radius : 5px ;
                     border-radius : 5px ;
                       -webkit-border-shadow : 3px 3px 5px 3px ;
                       -moz-border-shadow : 3px 3px 5px 3px ;
                       -o-border-shadow : 3px 3px 5px 3px ;
                       border-shadow : 3px 3px 5px 3px ;
                  
                color :  #2F4F4F ;  /*← normal時の文字色　darkslategrey*/ 
                font-family : "Roboto", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro W6", "メイリオ", "meiryo" , san-serif ;                
                font-size : 12px ;
                text-decoration : none ;
                text-align : center ;
                line-height : 1;
 }
 .component:hover{
                color : #DC143C ;  /*← ロールオーバー時の文字色 crimson*/
 }