@media screen and (min-width:641px)
{
*  { 
          padding : 0px ; 
          margin : 0px ;
          }
#site-box {
          width : 96%;
          height:auto;
          margin : 0px 2%;
          }
          
/*-------------------ヘッダー部ＩＤ　ＣＳＳ--------------------------*/
#a-box { /*-------ヘッダーBOX-----*/
       width:96%;
       height:200px;
       margin:0px 2%;
       border:solid 10px green;
       background-color:#00ffff;
       }
       

.a1box {    /*---------自然の館ロゴ配置 CLASS ---------*/
         width:25%;
         height: 200px;
         text-align:center;
         
         float:right;
         }
         
.a1box img {
            width:140px;
            margin-top:15px;
           }

.a1box h2 {
           font-size:150%;
           color:#ff4500;
           }
           
.a1box p {
          font-size:110%;
          color:yellow;
          }
          
.a2box{    /*---------自画像配置 CLASS ---------*/
         width:25%;
         height:200px;
         text-align: center;
         float:left;
         }
         
.a2box img {
            width:80%;
            margin-top:5px;
           }

.a3box {    /*-------表題配置　CLASS -----------*/
         
         width:50%;
         height:200px;
         
         padding-top: 40px;
         float:left;
         }

.a3box h1 {
           font-size:300%;
           color:#ffffff;
           padding-left:30px;
           padding-top:20px;
           }
           
.a3box h2 {
           font-size:200%;
           color:#ffff00;
           }


/*------------------------------------------------------*/

/*---------------中段　b-box --------------------------*/
#b-box {
       width: 90%;
       margin:0px 5%;
       float: left;
       }

.b1box { /*-----------説明文 ------*/
        width:100%;
        height:auto;
        padding:10px;
        float:left;
        }

.b2box { /*-----------説明文（泳がせ基本文・図） ------*/
        width:100%;
        height:auto;
        padding:10px;
        float:left;
        }

.b2box p {
          padding-left:30px;
          padding-top:10px;
          }
          
.b21box {
         width:65%;
         float:left;
         }
         
.b21box img { /*---------泳がせ基本図 --------*/
            width:90%;
            
            }
            
.b22box { /*----------泳がせ基本図BOX---------*/
         width:35%;
         padding-top:30px;
         float:left;
         }


.b3box { /*-----------説明文（ウキ泳がせ文・図） ------*/
        width:100%;
        height:auto;
        padding:10px;
        float:left;
        }

.b3box p {
          padding-left:30px;
          padding-top:10px;
          }
          
.b31box {
         width:65%;
         float:left;
         }
         
.b31box img { /*---------泳がせ基本図 --------*/
            width:90%;
            
            }
            
.b32box { /*----------泳がせ基本図BOX---------*/
         width:35%;
         padding-top:30px;
         float:left;
         }


.b4box { /*-----------説明文（ぶっ込み仕掛け文・図） ------*/
        width:100%;
        height:auto;
        padding:10px;
        float:left;
        }

.b4box p {
          padding-left:30px;
          padding-top:10px;
          }
          
.b41box {
         width:65%;
         float:left;
         }
         
.b41box img { /*---------ぶっ込み仕掛け図 --------*/
            width:90%;
            
            }
            
.b42box { /*----------ぶっ込み説明文BOX---------*/
         width:35%;
         padding-top:30px;
         float:left;
         }

/*------------------------------------あとがき-----------------*/
.b5box { /*-----------説明文 ------*/
        width:100%;
        height:auto;
        padding:10px;
        float:left;
        }


/*---------４段目ＩＤ　フッター部　ＣＳＳ----------------*/
#d-box {
          clear:both;
          width: 90%;
          margin:0px 5%;
          text-align: center;
          height:auto;
          
          }
.d1box {
        width: 100%;
        height:auto;
        text-align: center;
        }
        
.d2box {
          width: 100%;
          height:auto;
          font-size: 15px;
          padding: 10px 0px;
          text-align: center;
          }

/*------フッターリンクボタンの規格-----*/
.linkbutton {
             width: 120px;
             margin-bottom: 0px;
             text-align:center;     /*--ボタン内の文字を中央に--*/
             display: inline-block; /*--横に並べる----*/
             padding: 0.2em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
             
             text-decoration: none; /*---aタグの下線を消す--*/
             background: #dcdcdc;   /*---ボタンの色---*/
             color: black;          /*---文字の色-----*/
             border-bottom: solid 4px #627295; /*---ボタン下部の影の大きさと影の色-----*/
             border-radius: 3px;    /*---角を丸く表示する----*/
             }
             
/*------ボタンを押した時動きを加える------*/
.linkbutton:active {
                  -ms-transform: translateY(4px);   /*---影の大きさ4pxは合せること----*/
                  -webkit-transform: translateY(4px);
                  transform: translateY(4px);
                  box-shadow: 0px 0px 1px rgba(0,0,0,0.2); /*---ボタンを押した時影は1pxになる--*/
                  border-bottom: none;
                  }

a { 
  text-decoration:none; /*---下線を消す----*/
  }

/*---------テキストの影-----------------*/
.kage {
      color:#ff8c00;
      font-size:140%;
      text-shadow:1px 2px 2px #000000;
      }

.kage1 {
      color:#ff8c00;
      
      text-shadow:1px 2px 2px #000000;
      }
      
/*----------------------３------------------------*/
.outline3 {
          display        : inline-block;
          color          : #ffffff;            /* 文字の色 内側白色 */
          font-size      : 36px;               /* 文字のサイズ */
          letter-spacing : 4px;                /* 文字の間隔 */
          text-shadow    : 
                           2px  2px 1px #000000,
                          -2px  2px 1px #000000,
                           2px -2px 1px #000000,
                          -2px -2px 1px #000000,
                           2px  0px 1px #000000,
                           0px  2px 1px #000000,
                          -2px  0px 1px #000000,
                           0px -2px 1px #000000;        /* 文字の影 外側黒色*/
         }

/*------------------------見出し　ラベル類------------------------*/
.label1 {
        display: inline-block;
        padding: 0.2em 1em; /*--ラベル内文字の上下0.2em、左右間隔1.0em--*/
        text-decoration: none; /*---文字の下に線や蛍光ペン線などを引く--*/
        background: #f7f7f7; /*--ラベルの色　白色系---*/
        border-left: solid 6px #ff7c5c; /*--左側　線種　太さ　色--*/
        color: #000000; /*---文字の色 (黒）--*/
        font-weight: bold; /*---文字の種類---*/
        box-shadow: 0px 2px 2px rgba(0,0,0,0.29); /*-ラベルの影　左右、上下、ぼかし半径、影の色--*/
        }

.label2 {
        display: inline-block;
        padding: 0.2em 1em; /*--ラベル内文字の上下0.2em、左右間隔1.0em--*/
        text-decoration: none; /*---文字の下に線や蛍光ペン線などを引く--*/
        background: #f0f8ff; /*--ラベルの色 水色系---*/
        border-left: solid 6px #00ccff; /*--左側　線種　太さ　青色系--*/
        color: #000000; /*---文字の色 黒--*/
        font-weight: bold; /*---文字の種類---*/
        box-shadow: 0px 2px 2px #0033ff; /*-左右、上下、ぼかし半径、影の色--*/
        }
        
/*--------ボタンの型式-------------*/
input[type="button"],button{
         cursor:pointer;
         cursor:hand;
         }
         
/*------フッターリンクボタンの規格-----*/
.linkbotton {
             
             margin-bottom: 0px;
             text-align:center;
             display: inline-block; /*--横に並べる----*/
             padding: 0.2em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
             
             text-decoretion: none;
             background: #dcdcdc;   /*---ボタンの色---*/
             color: black;          /*---文字の色-----*/
             border-bottom: solid 4px #627295; /*---ボタン下部の影の大きさと影の色-----*/
             border-radius: 3px;    /*---角を丸く表示する----*/
             }
             
/*------ボタンを押した時動きを加える------*/
.linkbotton:active {
                  -ms-transform: translateY(4px);   /*---影の大きさ4pxは合せること----*/
                  -webkit-transform: translateY(4px);
                  transform: translateY(4px);
                  box-shadow: 0px 0px 1px rgba(0,0,0,0.2); /*---ボタンを押した時影は1pxになる--*/
                  border-bottom: none;
                  }

a { 
  text-decoration:none; /*---下線を消す----*/
  }
  
/*------文字規格・その他規格設定----------*/

      
h1 {  /*-----タイトルに使用------*/
          font-size: 22px;
   }

h2 {  /*----フッターで使用-------*/
          font-size:18px;
          
          }

h3 {    /*----ボタンに使用---------*/
          font-size: 15px;
          
   }

h4 {    /*----フッターボタンに使用---------*/
          font-size: 15px;
          
   }
p {
          font-size: 16px;
  }

} /*----PC設定　終了------*/


/*=======================================================================
-------------スマホ用ＣＳＳ------------------------------
=========================================================================-*/

@media screen and (max-width:640px)
{
/*-----------基本設定--------------------*/
*  { 
          padding : 0px ; 
          margin : 0px ;
          }

#site-box {
          width : 96%;
          height:auto;
          
          margin : 0px 2%
          }
          
body{
    -webkit-text-size-adjust:100%; /*--スマホを横にしても文字サイズを変えない--*/
    }
    
html{
    box-sizing:border-box; /*---パディング寸法を無視する----*/
    }
          
img{
   margin-top: 20px;
   max-width:100%;  /*--画面に合わせて縮小する、拡大は原寸まで 50%から100％に変更--*/
   width/***/:auto;
   }


/*-------------------ヘッダー部ＩＤ　ＣＳＳ--------------------------*/
#a-box { /*-------ヘッダーBOX-----*/
       width:96%;
       height:auto;
       margin:0px 2%;
       border:solid 10px green;
       background-color:#00ffff;
       padding-bottom:40px;
       }
       

.a1box {    /*---------自然の館ロゴ配置 CLASS ---------*/
         width:100%;
         height: auto;
         text-align:center;
         
         }
         
.a1box img { /*-----カラス画像----*/
            width:140px;
            margin-top:15px;
           }

.a1box h2 {
           font-size:110%;
           color:#ff4500;
           }
           
.a1box p {
          font-size:100%;
          color:yellow;
          }
          
.a2box{    /*---------自画像配置 CLASS ---------*/
         width:100%;
         height:auto;
         text-align: center;
         
         }
         
.a2box img { /*------松竿画像-----*/
            width:70%;
            margin-top:5px;
           }

.a3box {    /*-------表題配置　CLASS -----------*/
         
         width:100%;
         height:auto;
         
         padding-top: 20px;
         
         }

.a3box h1 {
           font-size:200%;
           color:#ffffff;
           text-align:center;
           padding-top:20px;
           }
           
.a3box h2 {
           font-size:150%;
           text-align:center;
           color:#ffff00;
           }


/*------------------------------------------------------*/

/*---------------中段　b-box --------------------------*/
#b-box {
       width: 96%;
       margin:0px 2%;
       
       }

.b1box { /*-----------説明文 ------*/
        width:100%;
        height:auto;
        padding:0px;
        
        }
        
.b1box h3 {
           padding:10px;
           }
           
.b2box { /*-----------説明文（泳がせ基本文・図） ------*/
        width:100%;
        height:auto;
        padding:0px;
        
        }

.b2box p {
          padding-left:15px;
          padding-top:10px;
          }
          
.b21box {
         width:100%;
         
         }
         
.b21box img { /*---------泳がせ基本図 --------*/
            width:100%;
            
            }
            
.b22box { /*----------泳がせ基本図BOX---------*/
         width:100%;
         padding-top:30px;
         
         }


.b3box { /*-----------説明文（ウキ泳がせ文・図） ------*/
        clear:both;
        width:100%;
        height:auto;
        padding-top:30px;
        
        }

.b3box p {
          padding-left:15px;
          padding-top:10px;
          }
          
.b31box {
         width:100%;
         
         }
         
.b31box img { /*---------泳がせ基本図 --------*/
            width:100%;
            
            }
            
.b32box { /*----------泳がせ基本図BOX---------*/
         width:100%;
         padding-top:30px;
         
         }


.b4box { /*-----------説明文（ぶっ込み仕掛け文・図） ------*/
        width:100%;
        height:auto;
        padding-top:30px;
        
        }

.b4box p {
          padding-left:15px;
          padding-top:10px;
          }
          
.b41box {
         width:100%;
         
         }
         
.b41box img { /*---------ぶっ込み仕掛け図 --------*/
            width:90%;
            
            }
            
.b42box { /*----------ぶっ込み説明文BOX---------*/
         width:100%;
         padding-top:30px;
         
         }

/*------------------------------------あとがき-----------------*/
.b5box { /*-----------説明文 ------*/
        width:100%;
        height:auto;
        padding:0px;
        
        }

/*---------４段目ＩＤ　フッター部　ＣＳＳ----------------*/
#d-box {
          clear:both;
          width: 90%;
          margin:0px 5%;
          text-align: center;
          height:auto;
          
          }
.d1box {
        width: 100%;
        height:auto;
        text-align: center;
        }
        
.d2box {
          width: 100%;
          height:auto;
          font-size: 15px;
          padding: 10px 0px;
          text-align: center;
          }

/*------フッターリンクボタンの規格-----*/
.linkbutton {
             width: 120px;
             margin-bottom: 0px;
             text-align:center;     /*--ボタン内の文字を中央に--*/
             display: inline-block; /*--横に並べる----*/
             padding: 0.2em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
             
             text-decoration: none; /*---aタグの下線を消す--*/
             background: #dcdcdc;   /*---ボタンの色---*/
             color: black;          /*---文字の色-----*/
             border-bottom: solid 4px #627295; /*---ボタン下部の影の大きさと影の色-----*/
             border-radius: 3px;    /*---角を丸く表示する----*/
             }
             
/*------ボタンを押した時動きを加える------*/
.linkbutton:active {
                  -ms-transform: translateY(4px);   /*---影の大きさ4pxは合せること----*/
                  -webkit-transform: translateY(4px);
                  transform: translateY(4px);
                  box-shadow: 0px 0px 1px rgba(0,0,0,0.2); /*---ボタンを押した時影は1pxになる--*/
                  border-bottom: none;
                  }

a { 
  text-decoration:none; /*---下線を消す----*/
  }

/*---------テキストの影-----------------*/
.kage {
      color:#ff8c00;
      font-size:140%;
      text-shadow:1px 2px 2px #000000;
      }

.kage1 {
      color:#ff8c00;
      
      text-shadow:1px 2px 2px #000000;
      }
      
/*----------------------３------------------------*/
.outline3 {
          
          color          : #ffffff;            /* 文字の色 内側白色 */
          font-size      : 36px;               /* 文字のサイズ */
          letter-spacing : 4px;                /* 文字の間隔 */
          text-shadow    : 
                           2px  2px 1px #000000,
                          -2px  2px 1px #000000,
                           2px -2px 1px #000000,
                          -2px -2px 1px #000000,
                           2px  0px 1px #000000,
                           0px  2px 1px #000000,
                          -2px  0px 1px #000000,
                           0px -2px 1px #000000;        /* 文字の影 外側黒色*/
         }

/*------------------------見出し　ラベル類------------------------*/
.label1 {
        display: inline-block;
        padding: 0.2em 1em; /*--ラベル内文字の上下0.2em、左右間隔1.0em--*/
        text-decoration: none; /*---文字の下に線や蛍光ペン線などを引く--*/
        background: #f7f7f7; /*--ラベルの色　白色系---*/
        border-left: solid 6px #ff7c5c; /*--左側　線種　太さ　色--*/
        color: #000000; /*---文字の色 (黒）--*/
        font-weight: bold; /*---文字の種類---*/
        box-shadow: 0px 2px 2px rgba(0,0,0,0.29); /*-ラベルの影　左右、上下、ぼかし半径、影の色--*/
        }

.label2 {
        display: inline-block;
        padding: 0.2em 1em; /*--ラベル内文字の上下0.2em、左右間隔1.0em--*/
        text-decoration: none; /*---文字の下に線や蛍光ペン線などを引く--*/
        background: #f0f8ff; /*--ラベルの色 水色系---*/
        border-left: solid 6px #00ccff; /*--左側　線種　太さ　青色系--*/
        color: #000000; /*---文字の色 黒--*/
        font-weight: bold; /*---文字の種類---*/
        box-shadow: 0px 2px 2px #0033ff; /*-左右、上下、ぼかし半径、影の色--*/
        }
        
/*--------ボタンの型式-------------*/
input[type="button"],button{
         cursor:pointer;
         cursor:hand;
         }
         
/*------フッターリンクボタンの規格-----*/
.linkbotton {
             
             margin-bottom: 0px;
             text-align:center;
             display: inline-block; /*--横に並べる----*/
             padding: 0.2em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
             
             text-decoretion: none;
             background: #dcdcdc;   /*---ボタンの色---*/
             color: black;          /*---文字の色-----*/
             border-bottom: solid 4px #627295; /*---ボタン下部の影の大きさと影の色-----*/
             border-radius: 3px;    /*---角を丸く表示する----*/
             }
             
/*------ボタンを押した時動きを加える------*/
.linkbotton:active {
                  -ms-transform: translateY(4px);   /*---影の大きさ4pxは合せること----*/
                  -webkit-transform: translateY(4px);
                  transform: translateY(4px);
                  box-shadow: 0px 0px 1px rgba(0,0,0,0.2); /*---ボタンを押した時影は1pxになる--*/
                  border-bottom: none;
                  }

a { 
  text-decoration:none; /*---下線を消す----*/
  }
  
/*------文字規格・その他規格設定----------*/

      
h1 {  /*-----タイトルに使用------*/
          font-size: 22px;
   }

h2 {  /*----フッターで使用-------*/
          font-size:18px;
          
          }

h3 {    /*----ボタンに使用---------*/
          font-size: 15px;
          
   }

h4 {    /*----フッターボタンに使用---------*/
          font-size: 15px;
          
   }
p {
          font-size: 16px;
  }

} /*----スマホ設定　終了------*/