@media screen and (min-width:641px)
{
*  { 
          padding : 0px ; 
          margin : 0px ;
          }
#site-box {
          width : 800px;
          height:auto;
          background-image:url(img/back15.gif);
          margin : 0px auto
          }
          
/*===========================-ヘッダー部ＩＤ　ＣＳＳ=========================-*/
#a-box {
       width:780px;
       height:180px;
       border:solid 10px #1e90ff; /*--ブルー系--*/
       background-image:url(img/nmb004.png);
       }
       

.a1box {    /*---------自然の館ロゴ配置 CLASS ---------*/
         width:180px;
         height:180px;
         
         float:right;
         }
         
.a1box img {
            margin-top:15px;
            text-align: left;
           }
     
.a1box p {  /*--自然の館---*/
          padding-left:30px;
         }  
         
.a1box h4 {  /*--釣りサイト---*/
           font-size:100%;
           padding-left:40px;
          } 
          

      
.a2box{    /*---------自然の館風景画像配置 CLASS ---------*/
         width:180px;
         height:180px;
         
         text-align: right;
         
         padding-top: 10px;
         float:left;
         }
         
.a2box img{
           width: 120px;
          }
          

.a3box {    /*-------表題配置　CLASS -----------*/
         
         width:420px;
         height:140px;
         
         padding-top: 40px;
         float:left;
         }
        
.a3box h2 {
           color: blue;
           font-size: 150%;
           padding-left: 70px;
          }
          
.a3box h1 {  /*----表題の文字指定----*/
           color: blue;
           font-size: 300%;
           padding-left:100px;
          }


/*=============================-中段表示　Ｂ−ＢＯＸ ============================-*/

.b-box {
        width:100%;
        height:auto;
        
        padding:0px;
        float:left;
        }
        
.b-box h1{   /*------b-box内使用の文字規格------*/
          padding-left:50px;
          color:green;
          font-size:150%;
          }
          
.b-box p{   /*------b-box内使用の文字規格------*/
          padding:0px 30px;
          font-size:100%;
          }
.b1box {   /*------b1box内使用の文字規格------*/
          padding:10px;
          width:350px;
          float:left;
          
          }
          
.b2box {   /*------b-box内使用の文字規格------*/
          padding:10px;
          width:350px;
          float:left;
          
          }

.layout {   /*---冒頭使用----------*/
           text-align: center;
          }
          
.layout h1{
           font-size:120%;
           color: #0000cd;
           padding:0px 80px;
          }
          
.layout01 {   /*---冒頭使用----------*/
          
          margin-left:50px;
          float:left;
          
          }
          
.layout01 h2{padding-left:30px;}  /*------layout01内使用の文字規格------*/

.layout02 {   /*---non use----------*/
          
          padding: 0px; 
          float:left;
          }
          
/*==============================-画像関係未使用============================-*/

.gazou {
        clear:both;
        width:350px;
        text-align:center;
        float:left;
       }

.gazou img{
           width:300px;
           
           }
           
.gazou1 {
         
         padding-left: 20px;
         float:left;
       }
       

            
.gazou2 {
         padding-left: 20px;
         float:right;
       
       }
.gazou3 {
         clear:both;
         margin: 20px 30px;
         float: left;
       }

img {   /*-----b-boxで使用--------*/
     margin-top:15px;
     }
     
/*=============================-ＩＤ　フッター部　ＣＳＳ=======================--*/
#d-box {
          clear: both;
          width: 100%;
          height:auto;
          
          }
.d1box {   /*----フッター挿入文字-----*/
        
        width: 100%;
        height:auto;
        text-align: center;
        float:left;
        }
        
.d2box {   /*---フッターリンクＢＯＸに使用----*/
          width: 100%;
          height:auto;
          font-size: 15px;
          padding: 10px 0px;
          text-align: center;
          }
          
/*===============================リンク--ボタン規格=============================-*/
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-decoration: none; /*---aタグの下線を消す--*/
             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; /*---下線を消す----*/
  }
  
/*========================装飾関係　規格=======================================*/
.kage {   /*----ロゴに使用-----*/
      color:#ff8c00; /*--文字の色　オレンジ系---*/
      font-size:140%;
      text-shadow:1px 2px 2px #000000;  /*--影の方向　右、下、ぼかし程度、色は黒---*/
      }

/*======================--文字規格・その他規格設定-=============================--*/
 
h1 {
          font-size: 22px;
          
   }

h2 {   /*----動画紹介で使用------*/
          font-size:18px;
          
          }

h3 {
          font-size: 16px;
          color:#ff8c00;
          padding-left: 20px;
   }

h4 {
          font-size: 15px;
          color:black;
          padding-left: 30px;
          }
          
h5 {
          font-size: 14px;
          
          
          }
p {
          font-size: 15px;
          
  }

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



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

@media screen and (max-width:640px)
{

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

#site-box {
          width : 100%;
          height: auto;
          background-image:url(img/back15.gif);
          margin : 0px auto
          }
          
/*====================一般設定===================================*/

body{  /*--スマホを横にしても文字サイズを変えない--*/
    -webkit-text-size-adjust:100%; 
    }
    
html{  /*---パディング寸法を無視する----*/
    box-sizing:border-box; 
    }
          
img{
   margin-top:10px;
   max-width:80%;  /*--画面に合わせて縮小する、拡大は原寸まで--*/
   width/***/:auto;
   }
   
          
/*=================================-ヘッダー部ＩＤ　ＣＳＳ===================-*/
#a-box {
       width:100%;
       background-image:url(img/nmbd002.png);
       }
       

.a1box {    /*---------自然の館ロゴ配置 CLASS ---------*/
         width:100%;
         background-image:url(img/nmb004.png);
         text-align: center;
         }
         
.a1box img {
            margin-top:15px;
            text-align: left;
           }
     
.a1box p {   /*--自然の館---*/          
          padding-left:30px;
          }   
          
.a1box h4 {  /*--釣りサイト---*/
          font-size:150%;
          padding-left:30px;
          }  
          
.kage {
      color:#ff8c00;
      font-size:140%;
      text-shadow:1px 2px 2px #000000;
      }
      
.a2box{    /*---------自然の館風景画像配置 CLASS ---------*/
         width:100%;
         
         
         text-align: center;
         
         padding-top: 30px;
         background-image:url(img/nmb004.png);
         }
         

.a3box {    /*-------表題配置　CLASS -----------*/
         
         width:100%;
         
         text-align: center;
         padding-top: 40px;
         background-image:url(img/nmb004.png);
         }
        
.a3box h2 {
           color:blue;
           font-size:130%;
           padding-left: 0px;
          }
          
.a3box h1 {
           color:blue;
           font-size:250%;
           padding-left: 0px;
          }


/*==============================-中段表示　Ｂ−ＢＯＸ ====================-*/

.b-box {
        width:100%;
        height:auto;
        
        padding:0px 15px;
        
        }
        
.b-box h1{
          padding:0px 20px;
          color:green;
          font-size:120%;
          }
          
.b-box h3{
          text-align:center;
          color:black;
          font-size:80%;
          }
          
.b-box h2{padding:0px 15px 0px 20px;}
.layout {   /*---冒頭使用----------*/
           text-align: left;
          }
          
.layout h1{   /*---冒頭使用----------*/
           padding:15px 20px;
          }
          
.layout01 {   /*---冒頭使用----------*/
          text-align: center;
          
          }
          
.layout01 h2{padding:15px;}



.layout02 {   /*---箇条書きに使用----------*/
          padding: 0px 30px 0px 70px;
          
          }

/*=============================画像関係===========================*/

.gazou {  /*-----未使用------------*/
         clear:both;
         text-align: center;
         margin-bottom: 20px;
         
       
       }

img {
     margin-top:15px;
     }
     
/*============================-ＩＤ　フッター部　ＣＳＳ================-*/
#d-box {
          clear: both;
          width: 100%;
          height:auto;
          
          }
.d1box {
        
        width: 100%;
        height:auto;
        text-align: center;
        float:left;
        }
        
.d2box {
          width: 100%;
          height:auto;
          font-size: 15px;
          padding: 10px 0px;
          text-align: center;
          }
          
/*=========================リンク　ボタン関係===============================*/

input[type="button"],button{
         cursor:pointer;
         cursor:hand;
         }
         
/*------フッターリンクボタンの規格-----*/
.linkbotton {
             width: 30%;            /*--ボタンの幅を一定にする--*/
             margin-bottom: 5px;    /*--ボタン下部間隔を広げる---*/
             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;    /*---角を丸く表示する----*/
             }
             
/*------ボタンを押した時動きを加える------*/
.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; /*---下線を消す----*/
  }
  

/*========================装飾関係====================================-*/
.kage {
      color:#ff8c00;  /*---オレンジ系---*/
      font-size:200%;  /*--文字の大きさ---*/
      text-shadow:1px 2px 2px #000000;  /*--影の方向　右、下、ぼかし程度、色は黒---*/
      padding: 15px;
      }
      
/*=======================--文字規格・その他規格設定=====================-*/

h1 {
          font-size: 22px;
          color:#228b22;
   }

h2 {
          font-size:18px;
          
          
          
          }

h3 {
          font-size: 16px;
          color:#ff8c00;
          padding-left: 10px;
   }


h4 {
          font-size: 14px;
          color:black;
          padding-left: 10px;
          }
p {
          font-size: 15px;
          padding: 0px 30px 0px 30px;
  }

} /*----モバイル設定　終了------*/