@media screen and (min-width:641px)
{
*  { 
          padding : 0px ; 
          margin : 0px ;
          }
#site-box {
          width : 800px;
          border:5px solid green;
          background-image: url(img/nmb002.png);
          margin : 0px auto
          }
          
/*---------ヘッダー部　ＣＳＳ------------------*/

#a-box { 
        width:100%;
        height:190px;
        border-bottom:5px solid green;
        }
        
.a1box { /*------自然の館ロゴ配置ＣＳＳ-----*/
         width:30%;
         height:180px;
         background-image:url(img/kabegami/nmbd002.png);
         text-align:center;
         padding-top: 10px;
         float:right;
         }
         

.a2box { /*----------表題配置ＣＳＳ----------*/
         width:70%;
         height:190px;
         background-image:url(img/kabegami/nmbd002.png);
         text-align:center;
         float:left;
         
         }
        
.a2box h2 {
           font-size:350%;
           color:#f0f8ff;
           padding-top: 50px;
           }
           
.a2box p{
         font-size:120%;
         color:#f0f8ff;
         }
         
/*----------センター左　文・画像配置ＣＳＳ------*/
#b-box {
        width:100%;
        height:220px;
        float:left;
       }
       
.b1box { /*---磯釣り紹介BOX------*/
          width: 65%;
          height:220px;
          background-color:#32cd32;
          padding:10px 20px;
          float: left;
       }

.b1box h2 { /*---紹介表題文字----*/
           color:white;
           font-size:140%;
           padding-bottom:10px;
           }
           
.b1box button {
               cursor:pointer;
               cursor:hand;
               width:120px;
               height:35px;
               background-color:yellow;
               text-align:center;
               }
/*----------センター右　配置ＣＳＳ----------*/
.b12box {
       width:30%;
       height:220px;
       background-image: url(img/nmb002.png);
       padding:0px;
       float:left;
       }
       
.b12box .category {
          font-size: 15px; /*---h2の文字サイズ--*/
          color: #FFFFFF; /*----文字の色------*/
          text-align:center;
          background-color: #228b22;
          padding: 0px;
          margin: 5px;
          }
          
.b12box .linkbutton {
             width: 110px;  /*---ボタンの横幅を指定----*/
             margin: 10px 40px;  /*---ボタン本体のマージン指定---*/
             background-color: #ffa500;   /*---ボタンの色---*/
             display: block; /*--縦に並べる　横はinline-block----*/
             text-align:center;
             font-size:12px;
             }
             
.b12box h4 {
            color:white;
            font-size:14px;
            }
            
/*----------------------------------------------*/
#c-box {
        width:100%;
        height:200px;
        float:left;
       }

.c1box {
          width: 65%;
          height:180px;
          background-color:#32cd32;
          padding:10px 20px;
          float: left;
       }

.c1box h2 {
           color:white;
           font-size:140%;
           padding-bottom:10px;
           }
           
.c1box button {
               cursor:pointer;
               cursor:hand;
               width:120px;
               height:35px;
               background-color:#00bfff;
               text-align:center;
               }
               
/*-----------小道具BOX---------------------*/
.c12box {
       width:30%;
       height:180px;
       background-image: url(img/nmb002.png);
       padding:0px;
       float:left;
       }
       
.c12box .category {
          font-size: 15px; /*---h2の文字サイズ--*/
          color: #FFFFFF; /*----文字の色------*/
          text-align:center;
          background-color: #228b22;
          padding: 0px;
          margin: 5px;
          }
         
.c12box .linkbutton { /*---小道具ボタン-----*/
             width: 100px;
             margin: 0px 40px;
             text-align: center;
             display: block; /*--縦に並べる----*/
             
             text-decoration: none;
             background: #90ee90;   /*---ボタンの色---*/
             color: black;          /*---文字の色-----*/
             border-bottom: solid 4px #627295; /*---ボタン下部の影の大きさと影の色-----*/
             border-radius: 3px;    /*---角を丸く表示する----*/
             }
             
.c12box h4 {
            color:#00bfff;
            font-size:14px;
            }

/*---------フッター部　ＣＳＳ----------------*/
#d-box {
          clear: both;
          width: 100%;
          height:auto;
          border-top:5px solid green;
          background-color: #f0fff0;
          font-size: 15px;
          padding: 10px 0px;
          text-align: center;
          }
#e-box { /*-------リンク部ＣＳＳ----------*/
          clear: both;
          width: 100%;
          height:auto;
          background-color: #f0fff0;
          font-size: 15px;
          padding: 0px;
          text-align: center;
        }
        
/*--------ボタンの型式-------------*/
input[type="button"],button{
         cursor:pointer;
         cursor:hand;
         }
         
/*------フッターリンクボタンの規格-----*/
.linkbutton {
             display: inline-block; /*--横に並べる----*/
             padding: 0.2em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
             text-decoration: none;
             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; /*---下線を消す----*/
  }
/*--------------------------------------------
------------------フッターＢＯＸ　終了--------
-----------------------------------------------*/



         
/*-------CLASS設定-----------------*/
.category {
          font-size: 15px;
          color: #FFFFFF;
          background-color: #228b22;
          padding: 0px;
          margin: 0px;
          }
          
/*------文字規格・その他規格設定----------*/
.kage {
      text-shadow:1px 2px 2px #000000;
      }
      

h1 {
          font-size: 22px;
   }

h2 {
          font-size:17px;
         
          }

h3 {
          font-size: 15px;
          
   }

h4 {
    font-size: 12px;
    }
    

h5 {   /*---フッターリンクボタン-----*/
          font-size: 15px;
          
   }

p {
          font-size: 15px;
          
  }


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


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

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

#site-box {  /*---追加12/28------*/
           width : 100%;
           height: auto;
           border:5px solid green;
           margin : 0px auto
          }
          
body{
    -webkit-text-size-adjust:100%; /*--スマホを横にしても文字サイズを変えない--*/
    }
    
html{
    box-sizing:border-box; /*---パディング寸法を無視する----*/
    }
          
img{
   max-width:80%;  /*--画面に合わせて縮小する、拡大は原寸まで--*/
   width/***/:auto;
   }
   
/*---------ヘッダー部　ＣＳＳ------------------*/

#a-box { 
        width:100%;
        height:auto;
        border-bottom:5px solid green;
        }
        
.a1box { /*------自然の館ロゴ配置ＣＳＳ-----*/
         width:100%;
         height:auto;
         background-image:url(img/kabegami/nmbd002.png);
         text-align:center;
         padding-top: 10px;
         
         }
         

.a2box { /*----------表題配置ＣＳＳ----------*/
         width:100%;
         height:auto;
         background-image:url(img/kabegami/nmbd002.png);
         text-align:center;
         
         
         }
        
.a2box h2 { /*--表題-----*/
           font-size:300%;
           color:#f0f8ff;
           padding-top: 50px;
           }
           
.a2box p{ /*----説明文----*/
         font-size:80%;
         color:#f0f8ff;
         }
         
/*----------センター左　文・画像配置ＣＳＳ------*/
#b-box {
        width:100%;
        height:auto;
        background-image: url(img/nmb002.png);
       }
       
.b1box {
          width: 95%;
          height:auto;
          
          margin:0px 20px;
          padding-top:30px;
       }

.b1box h2 {
           color:#00bfff;
           font-size:100%;
           text-align:center;
           padding-bottom:10px;
           }
           
.b1box button {
               cursor:pointer;
               cursor:hand;
               width:50%;
               height:60px;
               font-size:18px;
               background-color:yellow;
               text-align:center;
               }
               
/*----------センター右　配置ＣＳＳ----------*/
.b12box {
       
       width:100%;
       height:auto;
       text-align:center;
       padding:0px;
       padding-bottom:5px;
       }
       
.b12box .category {
          font-size: 15px; /*---h2の文字サイズ--*/
          color: #FFFFFF; /*----文字の色------*/
          text-align:center;
          background-color: #228b22;
          padding: 0px;
          margin: 5px;
          }
          
.b12box .linkbutton {
             width: 50%;  /*---ボタンの横幅を指定----*/
             height:auto;
             text-align:center;
             font-size:20px;
             background-color: #ffa500;   /*---ボタンの色---*/
             display: inline-block; /*--縦に並べる　横はinline-block----*/
             padding: 1em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
             text-decoration: none;
             
             color: black;          /*---文字の色-----*/
             border-bottom: solid 4px #627295; /*---ボタン下部の影の大きさと影の色-----*/
             border-radius: 3px;    /*---角を丸く表示する----*/
             
             }
             
.b12box h4 {
            color:white;
            font-size:20px;
            }
            
/*----------------------------------------------*/
#c-box {
        width:100%;
        height:auto;
        background-image: url(img/nmb002.png);
        padding-top:30px;
       }

.c1box {
          width: 95%;
          height:auto;
          
          margin:0px 20px;
          padding-top:10px;
          
          
       }

.c1box h2 {
           color:#00bfff;
           font-size:100%;
           text-align:center;
           padding-bottom:10px;
           }
           
.c1box button {
               cursor:pointer;
               cursor:hand;
               width:35%;
               height:60px;
               font-size:18px;
               background-color:#00bfff;
               text-align:center;
               }
               
.c12box {
       
       width:100%;
       height:auto;
       text-align:center;
       padding-top:20px;
       padding-bottom:35px;
       }

.c12box .category {
          font-size: 15px; /*---h2の文字サイズ--*/
          color: #FFFFFF; /*----文字の色------*/
          text-align:center;
          background-color: #228b22;
          padding-bottom: 0px;
          margin: 5px;
          }
          
.c12box .linkbutton { /*---小道具ボタン-----*/
             margin-top: 1em;
             width: 50%;  /*---ボタンの横幅を指定----*/
             height:auto;
             text-align:center;
             font-size:20px;
             background-color: #90ee90;   /*---ボタンの色---*/
             display: inline-block; /*--縦に並べる　横はinline-block----*/
             padding: 1em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
             text-decoration: none;
             
             color: black;          /*---文字の色-----*/
             border-bottom: solid 4px #627295; /*---ボタン下部の影の大きさと影の色-----*/
             border-radius: 3px;    /*---角を丸く表示する----*/
             
             }
             
.c12box h4 {
            color:#00ffff;
            font-size:20px;
            
            }

             
/*---------フッター部　ＣＳＳ----------------*/
#d-box {
          clear: both;
          width: 100%;
          height:auto;
          border-top:5px solid green;
          background-color: #f0fff0;
          font-size: 15px;
          padding: 10px 0px;
          text-align: center;
          }
#e-box { /*-------リンク部ＣＳＳ----------*/
          clear: both;
          width: 100%;
          height:auto;
          background-color: #f0fff0;
          font-size: 15px;
          padding: 0px;
          text-align: center;
        }
        
#e-box .linkbutton {
             width:30%;
             height:auto;
             display: inline-block; /*--横に並べる----*/
             padding: 1em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
             text-decoration: none;
             background: #dcdcdc;   /*---ボタンの色---*/
             color: black;          /*---文字の色-----*/
             border-bottom: solid 4px #627295; /*---ボタン下部の影の大きさと影の色-----*/
             border-radius: 3px;    /*---角を丸く表示する----*/
             }
             
/*--------ボタンの型式-------------*/
input[type="button"],button{
         cursor:pointer;
         cursor:hand;
         }
         
/*------フッターリンクボタンの規格-----*/
.linkbutton {
             display: inline-block; /*--横に並べる----*/
             padding: 0.2em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
             text-decoration: none;
             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; /*---下線を消す----*/
  }
/*---------------------------------------------------------------------------------
------------------フッターＢＯＸ　終了---------------------------------------------
----------------------------------------------------------------------------------*/



         
/*-------CLASS設定-----------------*/
.category {
          font-size: 15px;
          color: #FFFFFF;
          background-color: #228b22;
          padding: 0px;
          margin: 0px;
          }
          
/*------文字規格・その他規格設定----------*/
.kage {
      text-shadow:1px 2px 2px #000000;
      }
      

h1 {
          font-size: 22px;
   }

h2 {
          font-size:17px;
         
          }

h3 {
          font-size: 15px;
          
   }

h4 {
    font-size: 12px;
    }
    

h5 {   /*---フッターリンクボタン-----*/
          font-size: 15px;
          
   }

p {
          font-size: 15px;
          
  }


} /*-------スマホ用ＣＳＳ完了----------------------*/