@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
          }
          
/*---------ヘッダー部　ＣＳＳ------------------*/
/*---------自然の館ロゴ配置ＣＳＳ---------*/
.a1box {
         width:30%;
         height:180px;
         background-image:url(img/kabegami/nmbd002.png);
         text-align:center;
         padding-top: 20px;
         float:right;
         }

.a1box img {
            width:150px;
            }
            
/*-----------ジャンプカラス  のアニメーションCSS　挿入------------------------*/
        /* CSSアニメーションの設定 */
.jump-karasu {
      -webkit-animation: karasu 1s linear 0.8s 3; /*--googleで起動させる場合--*/
      
      /*--1s(アニメーションの時間/１回）・linear(アニメーション進行ベース）動き方、
      0.8s(開始までの時間）、3(繰り返し回数）---*/
    }
    
 /*- google chrromeなどでアニメーションを表示させる場合”-webkit-”を頭に記述 -*/
 /*--scale:拡大と縮小(X方向、y方向）・translate:変化(X方向、y方向）--*/
@-webkit-keyframes karasu { /*--google用---*/
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); } /*--開始時ポジション--*/
      15%  { -webkit-transform: scale(0.9, 0.9) translate(1%, 5%); }
      30%  { -webkit-transform: scale(1.3, 0.8) translate(1.5%, 10%); }
      50%  { -webkit-transform: scale(0.8, 1.3) translate(2%, -10%); }
      70%  { -webkit-transform: scale(1.1, 0.9) translate(1.5%, 5%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); } /*--終了時ポジション--*/
    }
/*-------------------ジャンプカラス　ここまで----------------------------*/


/*----------表題配置ＣＳＳ-----------------*/
.a2box {
         width:70%;
         height:200px;
         padding-top: 0px;
         background-image:url(img/kabegami/nmbd002.png);
         
         text-align:center;
         float:left;
         
         }

.a2box h1 {
           font-size:250%;
           color:#f0f8ff;
           }
           
.a2box h2 {
           font-size:300%;
           color:#f0f8ff;
           }
           
/*----------中段　b-box 開始ＣＳＳ-------------------*/
#b-box {
        width: 100%;
        height: auto;
        padding-bottom:20px;
        float: left;
        }
        
.b1box {
          clear: both;
          width: 300px;
          padding: 5px 50px;
          text-align: center;
          float: left;
          
        }
        
.b1box button {
               cursor:pointer;
               cursor:hand;
               font-size:20px;
               width:25%;
               height:auto;
               margin-bottom: 5px;
               text-align:center;
               display: inline-block; /*--横に並べる----*/
               padding: 0.5em 0.5em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
               }


/*----------センター右　配置ＣＳＳ----------*/
.b2box {
       background-image: url(img/nmb002.png);
       text-align: center;
       width:400px;
       padding: 5px 0px;
       float:left;
       }
       
.b2box button {
               cursor:pointer;
               cursor:hand;
               font-size:18px;
               width:55%;
               height:auto;
               margin-bottom: 5px;
               text-align:center;
               
               padding: 0.2em 0.5em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
               }
           
/*--------------------------------------------------------------
----------------フッター(ID d-box ＣＳＳ)-----------------------
---------------------------------------------------------------*/
#d-box {
          clear: both;
          width: 100%;
          border-top: 5px solid green;
          background-color: #f0fff0;
          font-size: 15px;
          padding: 0px;
          text-align: center;
        }
        
#e-box { /*-------リンク部ＣＳＳ----------*/
          clear: both;
          width: 100%;
          height:auto;
          background-color: #f0fff0;
          font-size: 15px;
          padding: 0px;
          text-align: center;
        }
        
a { 
  text-decoration:none; /*---下線を消す----*/
  }
/*--------ボタンの型式-------------*/

         
/*------フッターリンクボタンの規格-----*/
.linkbotton {
             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;
                  }

/*---------------------------------------------------------------------------------
------------------フッターＢＯＸ　終了---------------------------------------------
----------------------------------------------------------------------------------*/



         
/*-------CLASS設定-----------------*/
.category {
          font-size: 22px;
          text-align: center;
          color: #FFFFFF;
          background-color: #228b22;
          padding: 0px;
          margin: 0px;
          }
          
ul {
    border:10px skyblue double;
    list-style-type:none;
    margin:10px 60px;
    
    
    }
    
li a {
       color:#800080;
       }
       
/*------文字規格・その他規格設定----------*/
h1 {
          font-size: 22px;
   }

h2 {
          font-size:18px;
          }

h3 {
          font-size: 16px;
          margin: 5px;
   }

p {
          font-size: 16px;
          margin:0px;
  }

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


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

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

#site-box { /*---------1月5日変更--------*/
          width : 95%;
          height:auto;
          background-image:url(img/nmb002.png);
          border: 5px solid green; /*-----線で囲む　太さ5px　色green---*/
          margin : 0px 3% 0px 2%;
          }
          
body{
    -webkit-text-size-adjust:100%; /*--スマホを横にしても文字サイズを変えない--*/
    }
    
html{
    box-sizing:border-box; /*---パディング寸法を無視する----*/
    }
          
img{
   max-width:70%;  /*--画面に合わせて縮小する、拡大は原寸まで--*/
   width/***/:auto;
   }
   
/*---------ヘッダー部　ＣＳＳ------------------*/
       
.a1box {
         width:100%; /*-----自然の館 ロゴ配置ＣＳＳ---------*/
         height:auto;
         
         background-image:url(img/kabegami/nmbd002.png);
         text-align:center;
         padding-top: 20px;
         
         }

.a1box img {
            width:50%;
            }
            
/*-----------ジャンプカラス  のアニメーションCSS　挿入------------------------*/
        /* CSSアニメーションの設定 */
.jump-karasu {
      -webkit-animation: karasu 1s linear 0.8s 3; /*--googleで起動させる場合--*/
      
      /*--1s(アニメーションの時間/１回）・linear(アニメーション進行ベース）動き方、
      0.8s(開始までの時間）、3(繰り返し回数）---*/
    }
    
 /*- google chrromeなどでアニメーションを表示させる場合”-webkit-”を頭に記述 -*/
 /*--scale:拡大と縮小(X方向、y方向）・translate:変化(X方向、y方向）--*/
@-webkit-keyframes karasu { /*--google用---*/
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); } /*--開始時ポジション--*/
      15%  { -webkit-transform: scale(0.9, 0.9) translate(1%, 5%); }
      30%  { -webkit-transform: scale(1.3, 0.8) translate(1.5%, 10%); }
      50%  { -webkit-transform: scale(0.8, 1.3) translate(2%, -10%); }
      70%  { -webkit-transform: scale(1.1, 0.9) translate(1.5%, 5%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); } /*--終了時ポジション--*/
    }
/*-------------------ジャンプカラス　ここまで----------------------------*/

.a2box {
         width:100%; /*----------表題配置ＣＳＳ-------*/
         height:auto;
         background-image:url(img/kabegami/nmbd002.png);
         font-size:80%;
         text-align:center;
         
         padding: 0px;
         }

.a2box h1 {
           font-size:200%;
           color:#f0f8ff;
           }
           
.a2box h2 {
           font-size:250%;
           color:#f0f8ff;
           }
           
/*-----------中段　左記事枠　ＣＳＳ--------------*/
       
.b1box {
          width:100%;
          height:auto;
          padding-bottom: 10px;
          background-image: url(img/nmb002.png);
          text-align:center;
          
          }

.b1box button {
               cursor:pointer;
               cursor:hand;
               font-size:20px;
               width:25%;
               height:auto;
               margin-bottom: 5px;
               text-align:center;
               display: inline-block; /*--横に並べる----*/
               padding: 1em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
               }
               
.b2box {
       width:100%;
       background-image: url(img/nmb002.png);
       text-align:center;
       padding:0px;
       
       }

.b2box button {
               cursor:pointer;
               cursor:hand;
               font-size:18px;
               width:45%;
               height:auto;
               margin-bottom: 5px;
               text-align:center;
               
               padding: 1em 0.5em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
               }
               
/*---------フッター部　ＣＳＳ----------------*/
#d-box {
          clear: both;
          width: 95%;
          border-top:5px solid green;
          background-color: #f0fff0;
          font-size: 15px;
          padding: 5px 0px 5px 5%;/*----変更　左５％を加算---*/
          text-align:center;
          
          }

/*----------フッターリンク部ＣＳＳ---------------*/
 /*-------リンク部ＣＳＳ----------*/
#e-box {
        clear: both;
        width: 96%;
        height: auto;
        background-color: #f0fff0;
        font-size: 13px;
        padding: 0px;
        
        }


a { 
  margin-left:30px;
  text-decoration:none; /*---下線を消す----*/
  }
  
/*--------ボタンの型式-------------*/
input[type="button"],button{
         cursor:pointer;
         cursor:hand;
         }
         
/*------フッターリンクボタンの規格-----*/
.linkbotton {
             width:30%;
             height:auto;
             font-size:120%;
             margin-bottom: 5px;
             text-align:center;
             display: inline-block; /*--横に並べる----*/
             padding: 1em 1em;    /*--上下1em、左右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;
                  }

/*---------------------------------------------------------------------------------
------------------フッターＢＯＸ　終了---------------------------------------------
----------------------------------------------------------------------------------*/
.clear{ /*-----フロート解除タグ-----*/
      clear:both;
      }

         
/*-------文章用その他　CLASS設定-----------------*/
.category {
          font-size: 20px;
          text-align:center;
          color: #FFFFFF;
          background-color: #228b22;
          padding: 5px;
          margin: 5px;
          }
          


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

h2 {
          font-size:18px;
          }

h3 {
          font-size: 10px;
          margin: 0px;
   }

p {
          font-size: 10px;
          margin: 0px;
  }

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