
/*=====ページ共通のスタイル設定=====*/

BODY {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-image:url(image/rlene-0615.jpg);background-repeat:repeat   /*==== ene-01.jpg を変更すると背景画像が変えれます===*/
	color: #666666;                                                   /*==== ページ全体の文字色です　　　　　　　　　　 ===*/　
	line-height: 130%;                                                /*==== 行間の設定で文字の大きさの30%の余白が有ります=*/
}

/*=== リンクに関わる設定です ==*/

                                               /*=== まだアクセスしたことのないリンクに適用  ===*/
A:LINK {
	color: #3366CC; 
	text-decoration: none; 
}
                                                /*=== 既にアクセスしたことのあるリンクに適用  ===*/
A:VISITED { 
	color: #3366CC; 
	text-decoration: none;
}
                                                /*=== 　　選択されている状態のリンクに適用 　  ===*/
A:ACTIVE {
	color: #3366CC; 
	text-decoration: underline; 
}
                                                /*=== マウスが上に乗っている状態のリンクに適用  ===*/
A:HOVER { 
	color: #FFFFFF; 
	text-decoration: none;
	background-color:#66CC33;
}

/*==== 以下はページの個々にかかわる設定です　===*/

/* Name's Homepage */
                                                /*==== これは、左上の四角いHPの(Hikichi's Home Page)を表示　====*/
                                                /*=== Name's H・・・の使い方<DIV CLASS="title-square">ここに文字</DIV> ===*/
.title-square {
	margin: 0px ;
	padding: 35px 34px 35px 34px;
	background-color: #008080;
	text-align: center;
	color: #FFFFFF;
	font-family: verdana;
	font-weight: bold;　　　　　　　　　　　　/*==== 100〜900 までありboldは700に相当する太さ　　　====*/
	line-height: 150%;
        font-size: 16pt;
}

/* フッター */                                     /*=== フッターの使い方<DIV CLASS="footer-1">ここに文字</DIV> ===*/
.footer-1 {
	margin: 40px 0px 0px 0px;                  /*=== フッターの周辺との余白です、数値は右回りで上、右、下、左　===*/
	padding: 2px;　　　　　　　　　　　　　　　/*=== フッターの文字との余白です　数値が1個の時は全周に適用　===*/                                   ===*/　
	height: 30px;                              /*=== フッターの高さです                                   ===*/
	background-color: #66CC33;                 /*=== 背景色の設定です                                     ===*/
	text-align: center;                        /*=== フッターの背景の中央に文字を配置します               ===*/ 
	color: #FFFFFF;                            /*=== 上記文字の色です                                     ===*/
	font-size: small;                          /*=== 上記文字の大きさです                                 ===*/
}                                                  

.footer-2 {
	margin: 0px 0px 0px 0px;                   /*=== 各設定が省略してあります　　　　　　　　　　　　　　　　===*/
	height: 5px;                               /*=== フッター1を参考に設定を変更して見て下さい　　　　　　　 ===*/
	background-color: #FF9933;
}

/* ページタイトル*/                                /*=== ページタイトルの使い方 <DIV CLASS="page-title2">文字</DIV> ===*/
.page-title {
	margin: 30px 50px 0px 100px;               /*=== タイトルの周辺との余白です、数値は右回りで上、右、下、左　===*/
	padding: 12px 12px 12px 16px;              /*=== タイトル文字と枠とのスペース　　数値配列は同上　　　　　　===*/
	color: #3366CC;                            /*=== タイトル文字色　　　　　　　　　　　　　　　　　　　　　===*/
	text-align: left;                          /*=== タイトルが左詰めです　　　　　　　　　　　　　　　　　　===*/
	font-weight: bold;                         /*=== タイトルの文字太さです　bolder  lighter 等がある　　　　===*/
	font-size: large;                          /*=== タイトル文字の大きさ　　%も使用可能　　　　　　　　　　===*/
	border-bottom: solid 5px  #3366CC;　　　　 /*=== 枠の下の指定です       5Pix の直線　色は#3366cc　　　　 ===*/　　
	border-left: solid 14px  #3366CC;　　　　　/*=== 枠の左の指定です　　　14Pix の直線　色は#3366cc      　 ===*/ 
}                                                  

.page-title2 {
	margin: 30px 50px 0px 100px;
	padding: 12px 12px 12px 16px;
	color: #3366CC;
	text-align: right;
	font-weight: bold;
	font-size: large;
	border-bottom: solid 7px  #3366CC;
	border-right: solid 14px  #3366CC;
        border-left:  solid 7px  #ADD8E6;
        border-top:   solid 7px  #ADD8E6;
}
                                                     /*===== これはパソコン同好会の一番上に使用しています。====*/
.page-title3{
       font-size:large;
       background-color:#ccffcc;
       border-style:solid;
       padding:5px 3px 3px 13px;
       border-width:3px 15px 3px 15px;
       border-color:#996600 #663300 #663300 #663300;
}
.page-title4{                                        /*=====    これはパソコン同好会に使用しています。   ====*/
    font-size:large;
    background-color:#ccffcc;
    border-style:solid;
    margin: 0px 100px 0px 100px;
    padding:3px 0px 3px 50px;
    border-width:3px 0px 3px 0px;
    border-color:#996600;                              /*==== 1個だけの指定は上下の同色指定、2個の時は2番目が左右の同色指定　====*/　　
}　　　　　　　　　　　　　　　　　　　　　　　　　　　/*==== ここで注意　色の指定をしてもborder-width:0pxだと表示できません ====*/　

/*======= 見出しの色々が準備してあります　=======*/

                                      /*==== 見出しの使い方 見出し3を使う例 <div class="d-midasi3">ここに見出しの文字</div> ===*/
/* 見出し */
.d-midasi {
	margin: 0px 20px 0px 100px;
	padding: 6px 6px 8px 12px;
	background-color: #CC66ff;
	color: #FFFFFF;
	text-align: left;
}
/* 見出し2 */
.d-midasi2 {
	margin: 0px 20px 0px 100px;
	padding: 6px 6px 8px 12px;
	background-color: #bfbfbf;
	color: #FFFFFF;
	text-align: left;
}
/* 見出し3 */
.d-midasi3 {
	margin: 0px 40px 0px 80px;
	padding: 6px 6px 8px 12px;
	background-color: #408080;
	color: #FFFFFF;
	text-align: left;
}

/* 見出し4 */
.d-midasi4 {
	margin: 0px 20px 0px 100px;
	padding: 6px 6px 8px 12px;
	background-color: #20b2aa;
	color: #FFFFFF;
	text-align: left;
}

/* 見出し5 */
.d-midasi5 {
	margin: 0px 20px 0px 100px;
	padding: 6px 6px 8px 12px;
	background-color: #800000;
	color: #FFFFFF;
	text-align: left;
}

/* 見出し6 */
.d-midasi6 {
	margin: 0px 40px 0px 80px;
	padding: 6px 6px 8px 12px;
	background-color: #9ACD32;
	color: #FFFFFF;
	text-align: left;
        font-size: medium;
}

.d-midasi7 {
	margin: 0px 20px 0px 100px;
	padding: 6px 6px 8px 12px;
	background-color: #6a6a00;
	color: #FFFFFF;
	text-align: left;
}
/* 見出し8 */
.d-midasi8 {
	margin: 0px 20px 0px 100px;
	padding: 6px 6px 8px 12px;
	background-color: #3399cc;
	color: #FFFFFF;
	text-align: center; font-weight: bolder;
}

/* 見出し9 */
.d-midasi9 {
	margin: 0px 20px 0px 100px;
	padding: 6px 0px 6px 0px;
	background-color: #ffcc66;
	color: #FFFFFF;
	text-align: center; font-weight: bolder;
}

/* メニュー */                             /*  リンク集のメニューに使っている　css です　メニューの数は5個です、*/

ul#mainNavi{
       clear: both ;
       width: 946px ;
       margin: 0 0 3px 0 ;
       padding-top: 3px ;
       background-repeat: repeat-x ;
       background-position: left bottom ;
       background-image: url(image/bg-02.jpg) ;
       border-top: 1px solid #cccccc ;
}

ul#mainNavi li{
       float: left ;
       width: 188px ;
       padding: 0 ;
       border-right: 1px solid #cccccc ;
       text-align: center ;
       font-weight: bold;
       list-style-type: none ;
       font-size: 90% ;
}

/*clearfix*/
ul#mainNavi: after{
       display: block ;
       clear: both ;
       height: 0 ;
       line-height: 0 ;
       visibility: hidden ;
       content: "." ;
       font-size: 0.1em ;
}
ul#mainNavi{
       display: inline-block ;
}
ul#mainNavi li.active{
       padding: 5px 0 ;
       color: #b6461d ;
}
ul#mainNavi li a{
      display: block ;
      padding: 5px 0 ;
}



/*=====ホリゾンライン設定=====*/

　　　　/*===== 水平線です、区切りにつかいます。   ===*/　
        /*===  #hh5 の使い方例 <div id="hh5"><hr></div>  幅を限定する時<div id="hh5"><hr width="800Pix"></div>　数値はPix又は%===*/

#hh hr{color:#CACACA;height:2px;} 

#hh1 hr{border-bottom:2px dotted #000;} 
 
#hh2 hr{border-bottom:2px dashed #FA0;} 
 
#hh3 hr{border-bottom:1px solid #FA0;border-top:1px dashed #FA0;} 
 
#hh4 hr{border-top:1px double #AF0;border-bottom:1px dashed #AF0;} 
 
#hh5 hr{border-bottom:1px groove #0AF;border-top:1px dashed #0AF;} 
 
#hh6 hr{border-bottom:1px ridge #000;} 


/*==          本体とマージン、パディングの関係図
/*==
/*==           l       他の画像等　　　　　　　　l　　　　　　
/*==　　　　　　----------------------------------
/*==               ↓↑@　マージン(周辺との余白)
/*==            ---------------------------------   A
/*==     ←C→ l  ↓@↑　　パディング         l  ←→  l
/*==       マ   l ←C→ ここが本体(文字) ←A→l   マ   l
/*==     　−   l                               l   ー   l 他の文字や画像
/*==       ジ   l   ↓B↑　パディング          l   ジ   l
/*==       ン   --------------------------------- 　ン　 l
/*==                 ↓B↑マージン(周辺との余白)
/*==　　　　　　------------------------------------------  
/*==　　　　　　l       他の画像等                       l
