body {
    line-height: 170%;
}

#viewer {
    margin: 0 auto;
    width: 800px;
    height: 200px;
    text-align: center;
    overflow: hidden;
    position: relative;
}
 
#viewer img {
    top: 0;
    left: 0;
    position: absolute;
}


.shadow {/*画像の影（表示されない可能性もある）*/
    display: inline-block; 
    box-shadow: 0px 10px 25px -5px rgba(0, 0, 0.8, 0); /*横方向　下方向　ぼかし　広がり　色 */
}

*  { 
           padding : 0px ; 
           margin : 0px ; 
 } 

 #site-box {
           width : 1080px;
           border: 2px solid #00ffff;
           background-color: #ffffff;
           box-shadow:0px 0px 15px #afeeee;/*横方向 縦方向 (ぼかし) (広がり) (影の色) (影の向き)*/
           margin : 10px auto
 }

#top-box { /*一番上のボックス*/
           border-bottom: 1px solid #00ffff;
           background-color: #afeeee;
           padding: 30px;/*内側の余白*/
 }


#center-box { /*真ん中のボックス*/
           padding: 10px;/*内側の余白*/
           margin:20px;/*外側の余白*/
 }

#mid-box { /*真ん中のボックス余白大きめ*/
           padding: 30px 70px 10px 70px;/*内側の余白*/
           margin:20px;/*外側の余白*/
 }


#left-box { /*左のボックス*/
           float: left;
           width: 720px;
 }


#right-box { /*右のボックス*/
           float: right;
           width: 369px;
           font-size: 20px;
 }

#bottom-box { /*一番下のボックス*/
           clear: both;
           background-color: #afeeee;
           font-size: 12px;
           padding: 10px; /*内側余白*/
           border-top: 1px solid #00ffff;
           text-align: center;
 }


#border-box { /*仕切りのためのボックス*/
           width : 1080px;
           background-color#f0ffff;
           border-bottom: 1px solid #00ffff;
           margin:10px 0px; /*外側の余白：上下　左右*/
           clear: both;

 }

 h1 {
           font-size: 22px;
 }

 h2 {
           font-family: "游ゴシック体, 'Yu Gothic', YuGothic, メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic'",serif; 
           font-size: 25px;
           font-weight: 1000;
           text-shadow: 3px 2px 1px silver;
           background-color: #e0ffff;
           padding: 13px;/*内側の余白*/
           margin:10px;/*外側の余白*/
           
 }

 h3 {
           font-family: "游ゴシック体, 'Yu Gothic', YuGothic, メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic'", sans-serif; 
           font-size: 15px;
           color:#ff9900;
           margin: 5px;/*外側の余白*/
 }

 h4 {
           font-size: 18px;
           letter-spacing: 0.1em;
 }

 h5 { 
           font-family: "ＭＳ 明朝",serif; 
           font-size: 15px;
           text-shadow: 1px 1px 0px silver;
           line-height: 130%;
           letter-spacing: 0.1em;
           padding: 5px 13px 5px 5px;/*内側の余白：上　右　下　左*/
           margin: 0px 10px 0px 30px; /*外側余白*/
 }  

 h6 {
           font-size: 16px;
           font-style: italic;
           font-weight: 700;
           padding: 5px;/*内側の余白*/
           margin:0px 0px 30px 30px ;


 }





 p {
           font-size: 14px;
           margin: 10px 30px 20px 30px;
 }

p.sp {/*ｈ６を使用したときの写真に適用＝下の写真との隙間がないパターン*/
           font-size: 14px;
           margin: 0px 30px;/*内側の余白　上下　左右*/
 }

p.ri{/ｈ４を右寄せするとき*/
           font-family: "游ゴシック体, 'Yu Gothic', YuGothic, メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic'",serif; 
           font-size: 18px;
           text-align: right;
 }

 ul { 
           padding : 10px 5px 10px 30px; 
 }  

 .category {
           font-family: "游ゴシック体, 'Yu Gothic', YuGothic, メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic'", sans-serif; 
           font-size: 20px;
           font-weight: 500;
           font-style: italic;
           color: #ffffff;
           background-color: #00bfff;
           padding: 13px; /*内側余白*/
           margin: 15px 17px 15px 20px; /*外側余白*/
 }

.btn{
           text-align: center;
}

table{
 margin-right : auto;
 margin-left : auto
}

img:hover {
   opacity: 0.7;
}

 .bbb:hover  {
 color: #ff0000;
}