@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 green;
       background-image:url(img/nmbd002.png);
       }
       

.a1box {    /*---------自然の館ロゴ配置 CLASS ---------*/
         width:180px;
         height:180px;
         
         float:right;
         }
         
.a1box img {
            margin-top:15px;
            text-align: left;
           }
     
.a1box p {padding-left:30px;}
.a1box h4 {padding-left:30px;}
          
.kage {
      color:#ff8c00;
      font-size:140%;
      text-shadow:1px 2px 2px #000000;
      }
      
.a2box{    /*---------自然の館風景画像配置 CLASS ---------*/
         width:180px;
         height:180px;
         
         text-align: right;
         
         padding-top: 30px;
         float:left;
         }
         

.a3box {    /*-------表題配置　CLASS -----------*/
         
         width:420px;
         height:140px;
         
         padding-top: 40px;
         float:left;
         }
        
.a3box h2 {padding-left: 70px;}
.a3box h1 {padding-left:120px;}

/*------------------------------------------------------*/
/*-----------------中段表示　CLASS -----------------*/
.b-box {
        width:100%;
        height:auto;
        
        padding:0px;
        }
        

.layout {   /*---冒頭使用----------*/
           text-align: center;
          }
          
.layout h1 {
            font-size:120%;
            }
            
.layout p {
           font-size:100%;
           }

.layout button {
              cursor:pointer;
              cursor:hand;
              width:150px;
              height:50px;
              background-color:#ffd700;
              border-width:4;
              color:black;
             }

/*------------------------------------------------------------*/
.layout01 {   /*---冒頭使用----------*/
          
          padding: 10px 30px 0px 30px;
          }
          
.layout01 h1 {
            font-size:130%;
            }
            
.layout01 p {
            font-size:100%;
            
            }
            
.layout02 {   /*---箇条書きに使用----------*/
          padding: 0px 30px 0px 70px;
          
          }

table{
      margin-left:70px;
      width:500px;
      border-collapse:collapse;
      border:solid 2px black;
      text-align:center;
      }
table th{
        padding:0px 10px;
        font-size: 14px;
        border-collapse:collapse;
        border:solid 1px black;
        color:white;
        background:#ff4500;
        }
        
table td{
       padding:3px;       
       font-size: 14px;
       border-collapse:collapse;
       border:solid 1px black;
       color:black;
       background:pink;
       }
       

.gazou {   /*-----馬蹄岩の写真挿入-------*/
         clear:both;
         text-align: center;
         margin: 10px 30px;
         float: left;
       
       }

.gazou0 {
         clear:both;
         text-align: center;
         margin-bottom: 20px;
         
       
       }
       
.gazou1 {
         clear:both;
         text-align: center;
          margin: 20px 50px;
         float: left;
       
       }
.gazou2 {
         clear:both;
         margin: 20px 30px;
         float: left;
       
       }


/*---------ＩＤ　フッター部　ＣＳＳ----------------*/
#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;
         width: 160px;
         height: 40px;
         }
         
/*------フッターリンクボタンの規格-----*/
.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; /*---下線を消す----*/
  }
  
img {
     margin-top:15px;
     }
     
/*------文字規格・その他規格設定----------*/
.kage {
      color:#8b008b;
      font-size:120%;
      text-shadow:1px 1px 2px #000000;
      }
      
h1 {
          font-size: 22px;
          color:#228b22;
   }

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

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

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

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

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

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

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

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

          
/*-------------------ヘッダー部ＩＤ　ＣＳＳ--------------------------*/
#a-box {
       width:100%;
       
       }
       

.a1box {    /*---------自然の館ロゴ配置 CLASS ---------*/
         width:100%;
         
         background-image:url(img/nmbd002.png);
         text-align: center;
         }
         

.kage {
      color:#ff8c00;
      font-size:140%;
      text-shadow:1px 2px 2px #000000;
      }
      
.a2box{    /*---------自画像配置 CLASS ---------*/
         width:100%;
         
         background-image:url(img/nmbd002.png);
         text-align: center;
         
         }
         

.a3box {    /*-------表題配置　CLASS -----------*/
         
         width:100%;
         text-align: center;
         background-image:url(img/nmbd002.png);
         padding-top: 40px;
         padding-bottom:20px;
         }
        

/*------------------------------------------------------*/
/*-----------------中段表示　CLASS -----------------*/
.b-box {
        width:100%;
        height:auto;
        
        }
        
.layout {   /*---冒頭使用----------*/
          padding:10px;
          
          }
           
.layout h1 {
            font-size:100%;
            }


.layout button{
              cursor:pointer;
              cursor:hand;
              width:150px;
              height:50px;
              background-color:#ffa500;
              border-width:4;
              color:black;
             }
/*----------------------------------------------------*/
.layout01 {   /*---冒頭使用----------*/
          
          padding: 0px;
          }
          
.layout01 h1 {
            font-size:110%;
            }
            
.layout01 p {
            
            padding:0px 10px 0px 30px;
            }
            

table{
      margin-left:10px;
      width:100%;
      border-collapse:collapse;
      border:solid 2px black;
      text-align:center;
      }
table th{
        padding:0px 10px;
        font-size: 14px;
        border-collapse:collapse;
        border:solid 1px black;
        color:white;
        background:#ff4500;
        }
        
table td{
       padding:3px;       
       font-size: 14px;
       border-collapse:collapse;
       border:solid 1px black;
       color:black;
       background:pink;
       }
       
.gazou {
         clear:both;
         text-align: center;
         margin-bottom: 20px;
         
       
       }

.gazou0 {
         clear:both;
         width:100%;
         text-align: center;
         margin-bottom: 20px;
         
       
       }
       
.gazou1 {
         clear:both;
         text-align: center;
         margin-bottom: 0px;
       
       }
       
.gazou2 {
         clear:both;
         text-align: center;
         margin-bottom: 30px;
       
       }

/*---------ＩＤ　フッター部　ＣＳＳ----------------*/
#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;
         width: 55%;
         height:50px;
         text-align:center;     /*--ボタン内の文字を中央に--*/
         
         }
         
/*------フッターリンクボタンの規格-----*/
.linkbotton {
             width: 35%; /*--ボタンの幅を一定にする--*/
             height:auto;
             margin-bottom: 5px;    /*--ボタン下部間隔を広げる---*/
             text-align:center;     /*--ボタン内の文字を中央に--*/
             display: inline-block; /*--横に並べる----*/
             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 { 
  text-decoration:none; /*---下線を消す----*/
  }
  
img {
     margin-top:15px;
     }
     
/*------文字規格・その他規格設定----------*/
.kage {
      color:#ff8c00;
      font-size:140%;
      text-shadow:1px 2px 2px #000000;
      padding: 15px;
      }
      
h1 {
          font-size: 100%;
          color:#228b22;
   }

h2 {
          font-size:100%;
          color:#228b22;
          
          
          }

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


h4 {
          font-size: 18px;
          color:black;
          
          }
p {
          font-size: 16px;
          
  }

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