body {
    background-image: url('img/azabu3.gif');/*背景の画像はこちらに指定してください*/
}

#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 : 810px;
           border: 2px solid #00FFFF;
           background-color: #ffffff;
           box-shadow:0px 0px 15px #afeeee;/*横方向 縦方向 (ぼかし) (広がり) (影の色) (影の向き)*/
           margin : 10px auto
 }

#top-box { /*一番上のボックス*/
           border-bottom: 1px solid #00FFFF;
           background-image: url('img/ue-haikei.gif');
           padding: 20px;/*内側の余白*/
 }



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


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

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


#border-box { /*仕切りのためのボックス*/
           width : 810px;
           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;/*外側の余白*/
           text-align: center;
           
 }

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

 h4 {
           font-size: 14px;
 }

 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;/*内側の余白　上下　左右*/
 }

 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;
}