/*------------ＰＣ用ＣＳＳ--------------------------------*/
@media screen and (min-width:641px)
{
*  { 
          padding : 0px ; 
          margin : 0px ;
          }
          
/*-------------サイトＢＯＸ設定ＣＳＳ-------------*/
#site-box {
          width : 780px;
          height:auto;
          background-image:url(img/nmb002.png);
          border: 5px solid green;
          margin : 5px auto
          }
          
/*------------ヘッダーＴＯＰ　表題　ＢＯＸＣＳＳ-----------------*/
#top-box {
           width:780px;
           height:180px;
           background-image:url(img/kabegami/nmbd002.png);
           
           
           }

.top1box {
           width:480px;
           height:180px;
           
           text-align: center;
           float:left; 
           }

.top1box h1{
            font-size:250%;
            color:#f0f8ff;
            padding: 10px;
            }
            
.top1box h2 { 　/*----自然の館ロゴ文字用----*/ 
      font-size: 200%;
      color: #ff4500;
      padding:0px 20px;
      text-align: center;
      text-shadow:2px 3px 2px #000000;  /*-影の方向、右、下、ぼかし程度、色----*/
      }
.kage {
      font-size: 120%;  /*--fontsizeは反映されるが、text-aliginは反映しない---*/
      text-shadow:2px 3px 2px #000000;  /*-影の方向、右、下、ぼかし程度、色----*/
      }

.kage h1{
         font-size:180%;
         color:#ff4500;
         }
         
.top2box { 
           width:270px;
           height:180px;
           
           text-align: left;
           padding-top:20px;
           float:right;
           }
           
.top2box h1{
            width: 230px;
            color:yellow;
            font-size:90%;
            text-align: center;
            padding: 0px auto;
            }
            
table {
      margin:0px 0px;
      border-collapse:collapse;
      border:solid 2px black;
      background-color: yellow;
      text-align:center;
      font-weight:bold;
      }
      

th {
        padding:0px;
        font-size:15px;
        border-collapse:collapse;
        border:solid 1px black;
        }
        

td {
       padding:3px 3px;
       font-size:10px;
       border-collapse:collapse;
       border:solid 1px black;
       color:black; 
       }

.ex21 {  /*--------thの名称-----*/
       width:100px;
       color:black;
       background:yellow;
       }
       

.ex23 {  /*-------tdの名称------*/
       width:130px;
       color:black;
       background:yellow;
       }
/*------------中段　写真掲載各段　ＣＳＳ------------------*/

    /*------------ a-box　ＣＳＳ-----------------*/
    .a-box {
           width:100%
           height:auto
           
           }
           
    .syasin1 {   /*-----左 写真用　CLASS　ＣＳＳ--------*/
           width:460px;
           height:auto;
           text-align:center;
           margin-top:5px;
           float:left;
           padding:0px;
           
         }
    
           
    .syasin1 h3{
                font-size:100%;
                color:yellow;
                background-color:green;
                
                
                }
                
    .syasin1 img{
                 width:450px;
                 padding-top:5px;
                 }
                 
    .setumei1 {   /*-----右　説明文用CLASS　ＣＳＳ-------*/
               width:280px;
               height:auto;
               padding:10px;
               float:left;
              }
              
/*------------フッターＣＳＳ-----------------------*/
#d-box {
          clear:both;
          width: 780px;
          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;
         width:auto;
         height:auto;
         padding: 0.2em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
         }
         
/*------フッターリンクボタンの規格-----*/
.linkbotton {
             width:auto;
             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;    /*---角を丸く表示する----*/
             }
             
/*------ボタンを押した時動きを加える------*/
.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; /*---下線を消す----*/
  }
  
/*--------------イメージ写真規格　ＣＳＳ-------------------*/

img{
    width:450px;
   }
    
/*--------------文字規格　ＣＳＳ-------------------*/

h1 { /*------ページタイトル--------*/
    font-size: 22px;
    
    
    }
    
h2{ /*-----自然の館タイトル--------*/
     font-size:30px;
     padding:0px 20px;
     
     }
     
h3{ /*----写真タイトル----------*/
     font-size:15px;
     
     }
     

h4{ /*-----説明文章------------*/
     font-size:15px;
     padding-left:20px;
     }
     
h5 { /*-----フッターリンク文字--------*/ 
     font-size:15px;
     }
     
p {
          font-size: 14px;
          margin:0px;
  }
  

         
}  /*---------ＰＣ用　ＣＳＳ完了-------------------*/


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

@media screen and (max-width:640px)
{
/*-----------基本設定--------------------*/
*  { 
          padding : 0px ; 
          margin : 0px ;
          }
          
#site-box {
          width : 100%;
          height:auto;
          background-image:url(img/nmb002.png);
          margin : 0px auto
          }
          
body{
    -webkit-text-size-adjust:100%; /*--スマホを横にしても文字サイズを変えない--*/
    }
    
html{
    box-sizing:border-box; /*---パディング・ボーダー寸法を無視する----*/
    }
          
img{
   max-width:100%;  /*--画面に合わせて縮小する、拡大は原寸（　％）まで--*/
   width/***/:auto;
   }
   
/*------------ＴＯＰ　表題　ＢＯＸＣＳＳ-----------------*/
#top-box {
           width:100%;
           height:auto;
           
           background-image:url(img/kabegami/nmbd002.png); 
           padding-bottom: 0px;
           }

.top1box {
           width:100%;
           height:auto;
           background-image:url(img/kabegami/nmbd002.png);
           text-align: center; 
           padding-bottom: 30px;
           }

.top1box h1{
            font-size:250%;
            color:#f0f8ff;
            }
            
.kage {
      font-size: 120%;  /*--fontsizeは反映されるが、text-aliginは反映しない---*/
      text-shadow:2px 3px 2px #000000;  /*-影の方向、右、下、ぼかし程度、色----*/
      }
      

.kage h1{
         font-size:180%;
         color:#ff4500;
         }
         
.top2box {
           
           width:100%;
           height:auto;
           
           
           padding-bottom:20px;
           background-image:url(img/kabegami/nmbd002.png);
           }

.top2box h1{
            color:yellow;
            font-size:120%;
            text-align:center;
            }
           
table {
      
      border-collapse:collapse;
      border:solid 2px black;
      background-color: yellow;
      text-align:center;
      margin: 0px auto;
      }
      

th {
        padding:0px;
        font-size:15px;
        border-collapse:collapse;
        border:solid 1px black;
        }
        
.ex21 {
        width:30%;
        color:black;
        background:yellow;
       }
       
.ex22 {
        width:30%;
        color:black;
        background:yellow;
       }
       
.ex23 {  /*-------tdの名称------*/
       width:40%;
       color:black;
       background:yellow;
       }
       
td {
       padding:3px 3px;
       font-size:12px;
       border-collapse:collapse;
       border:solid 1px black;
       color:black;
       
       }


/*------------写真掲載各段　ＣＳＳ------------------*/
    /*------------Ａ－　ＢＯＸＣＳＳ-----------------*/
    .a-box {
           width:100%
           height:auto
           }
           
    /*------------左写真名称　CLASS　ＣＳＳ-------------*/
    .meisyou {
             width:100%;
             margin:0px
             }
    /*------------左写真用　CLASS　ＣＳＳ-------------*/
    .syasin1 {
             width:100%;
             height:auto;
             
             margin-bottom:15px;
             float:left;
             padding:0px;
             }
             
     .syasin1 h3{
                font-size:100%;
                color:yellow;
                background-color:green;
                }
                
     img{
         width:100%;
         float:left;   /*----写真を左に寄せる----*/
         padding:0px;  /*----写真を左に寄せる----*/
         
         }
    /*------------右　説明文用CLASS　ＣＳＳ-------------*/
    .setumei1 {
           
              width:90%;
              height:auto;
              padding:0px 10px 0px 20px;
              margin-bottom:10px;
              
              }
/*------------フッターＣＳＳ-----------------------*/
#d-box {
          clear: both;
          width: 100%;
          height:auto;
          text-align: center;
          border-top: 5px solid green;
          background-color: #f0fff0;
          font-size: 15px;
          padding: 10px;
          
        }
        
/*----------フッターリンク部ＣＳＳ---------------*/
#e-box {
          clear: both;
          width: 100%;
          height:auto;
          
          background-color: #f0fff0;
          font-size: 15px;
          padding: 0px;
          
        }
        
/*--------ボタンの型式-------------*/
input[type="button"],button{
         cursor:pointer;
         cursor:hand;
         width:auto;
         height:auto;
         padding: 1em 1em;    /*--上下0.2em、左右1em　ボタンの大きさを変える---*/
         }
         
/*------フッターリンクボタンの規格-----*/
.linkbotton {
             width: 33%;
             height:auto;
             display: inline-block; /*--横に並べる----*/
             text-align: center;
             margin-bottom: 5px;
             padding: 1em 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{
  margin-left:30px;  /*---ボタンを左から中央へ---*/
  text-decoration:none; /*---下線を消す----*/
  }
  
.clear{ /*-----フロート解除タグ-----*/
      clear:both;
      }

    
/*--------------文字規格　ＣＳＳ-------------------*/

h1 { /*------ページタイトル--------*/
    font-size: 22px;
    margin:10px;
    
    }
    
h2{ /*-----自然の館タイトル--------*/
     font-size:30px;
     padding:0px 20px;
     
     }
     
h3{ /*----写真タイトル----------*/
     width:100%;
     text-align:center;
     background-color:green;
     
     padding:0px;
     }
     

h4{ /*-----説明文章------------*/
     
     font-size:15px;
     padding:0px;
     
     }
     
h5 { /*-----フッターリンク文字--------*/ 
     font-size:15px;
     }
     
p {
          font-size: 14px;
          margin:0px;
  }
  

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