@charset "UTF-8";

@media (max-width: 767px){
    .box1       {float: center;
		 width: 100%;
		 background-color: #FFFFFF}
    
    .box3       {float: center;
		 width: 95%;
		 height: 60px;
		 display: block;
		 margin-left: auto;
		 margin-right: auto;
		}
    .box3 h3    {font-size:150%;
		 font-weight:bold;
		 color:#FFFFFF;
		 margin: -4px 0;
		}

    .box4       {float: center;
		 width: 100%}
    
    /* トグルボタン */
    #menubtn         {padding: 6px 12px;
		      border: solid 1px #aaaaaa;
		      border-radius: 5px;
		      background-color: #ffffff;
		      position: absolute;
		      top: 20px;
		      right: 15px;
		      cursor: pointer}
    
    #menubtn:hover    {background-color: #dddddd}
    
    #menubtn:focus    {outline: none}
    
    #menubtn i        {color: #888888;
		       font-size: 18px}
    
/*    #menubtn span     {display: inline-block;
		       text-indent: -9999px}
  */  
    /* ナビゲーションメニュー */
    .menu             {display: none}
    #menu             {background-color: rgba(255,255,255,0.5);}
    .menu ul          {margin: 0;
		       padding: 0;
		       list-style: none}
    
    .menu li a        {display: block;
		       padding: 5px;
		       color: #000000;
		       font-size: 14px;
		       text-decoration: none}

    .menu li a:hover  {background-color: rgba(181,206,0,0.8);}
    .menu li a:active  {background-color: rgba(181,206,0,1);}

    .selected         {background-color: rgba(181,206,0,0.8);}

    .img-size1  {display: block;
		 width: 95%;
		 margin-left: auto;
		 margin-right: auto}

    .btn2 {background: #b1c900;
	   border: 1px solid #707F00;
	   border-radius: 20px;
	   -moz-border-radius: 20px;
	   -webkit-border-radius: 20px;
	   color: #FFFFFF;
	   -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	   -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	   text-shadow:
	   black 1px 1px 0px,
	   black -1px 1px 0px,
	   black -1px -1px 0px,
	   black 1px -1px 0px;
	   width: 95%;
	   padding: 10px 0;
	   margin: 5px 0;
	  }
}

@media (min-width: 768px){
    .boxA:after {content: "";
		 display: block;
		 clear: both}

    .box1       {float: left;
		 width: 25%;
		 height: 670px}

    .box2       {float: left;
		 width: 1%;
		 height: 670px}

    .box3       {float: left;
		 width: 74%;
		 height: 60px;
		}
    .box3 h3    {font-size:150%;
		 font-weight:bold;
		 color:#FFFFFF;
		 margin: -4px 0;
		}

    .box4       {float: left;
		 width: 74%}

    .img-size1  {display: block;
		 width: 95%;
		 margin-left: auto;
		 margin-right: auto}


    /* メニュー (縦並び) */
    .menu ul    {margin: 0;
		 padding: 0;
		 list-style: none}

    /*.menu li a  {display: block;
	     padding: 5px;
	     color: #FFFFFF;
	     font-size: 14px;
	     text-decoration: none}*/
    .menu li a  {display: block;
		 font-size: 14px;
		 text-decoration: none;
		 background: -moz-linear-gradient(top,#d9f700, #b9d200 50%,#b1c900 50%,#798900);
		 background: -webkit-gradient(linear, left top, left bottom, from(#d9f700), color-stop(0.5,#b9d200), color-stop(0.5,#b1c900), to(#798900));
		 background: -ms-linear-gradient(top, #d9f700, #b9d200);
		 color: #FFF;
		 border-radius: 4px;
		 -moz-border-radius: 4px;
		 -webkit-border-radius: 4px;
		 border: 1px solid #798900;
		 -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		 -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		 text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
		 width: 100%;
		 padding: 10px 0;
		 margin: 2px 5px;}


    /*.menu li a:hover {color: #FFFF00}*/
    .menu li a:hover {background: -moz-linear-gradient(top,#b1c900, #798900 50%,#748400 50%,#627000);
		      background: -webkit-gradient(linear, left top, left bottom, from(#b1c900), color-stop(0.5,#798900), color-stop(0.5,#748400), to(#627000));
			 background: -ms-linear-gradient(top,#b1c900, #798900);
		      color: #FFF;
		      border-radius: 4px;
		      -moz-border-radius: 4px;
		      -webkit-border-radius: 4px;
		      border: 1px solid #627000;
		      -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
		      width: 100%;
		      padding: 10px 0;
		      margin: 2px 5px;
		     }

    .menu li a:active {background: #627000;
		      color: #FFF;
		      border-radius: 4px;
		      -moz-border-radius: 4px;
		      -webkit-border-radius: 4px;
		      border: 1px solid #627000;
		      -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
		      width: 100%;
		      padding: 10px 0;
		      margin: 2px 5px;
		     }

    .selected        {background: -moz-linear-gradient(top,#b1c900, #798900 50%,#748400 50%,#627000);
		      background: -webkit-gradient(linear, left top, left bottom, from(#b1c900), color-stop(0.5,#798900), color-stop(0.5,#748400), to(#627000));
		      		 background: -ms-linear-gradient(top, #b1c900, #798900);
		      color: #FFF;
		      border-radius: 4px;
		      -moz-border-radius: 4px;
		      -webkit-border-radius: 4px;
		      border: 1px solid #627000;
		      -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
		      width: 100%;
		      padding: 10px 0;
		      margin: 2px 5px;
		     }

    /* ボタン設定 */
    /*
.btn1    {background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0C419A);
          background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0C419A));
          color: #FFF;
          border-radius: 4px;
          -moz-border-radius: 4px;
          -webkit-border-radius: 4px;
          border: 1px solid #0C419A;
          -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
          -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
          text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
          width: 100%;
          padding: 5px 0;
	  margin: 2px 0;
	 }
   */

    .btn2 {background: #b1c900;
	   border: 1px solid #707F00;
	   border-radius: 20px;
	   -moz-border-radius: 20px;
	   -webkit-border-radius: 20px;
	   color: #FFFFFF;
	   -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	   -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	   text-shadow:
	   black 1px 1px 0px,
	   black -1px 1px 0px,
	   black -1px -1px 0px,
	   black 1px -1px 0px;
	   width: 95%;
	   padding: 10px 0;
	   margin: 5px 0;
	  }

    .margin1 {margin: 3px 3px 3px 3px}
}

@media (min-width: 1000px){
    .boxA:after {content: "";
		 display: block;
		 clear: both}

    .box1       {float: left;
		 width: 250px;
		 height: 670px}

    .box2       {float: left;
		 width: 30px;
		 height: 670px}

    .box3       {float: left;
		 width: 700px;
		 height: 60px;
		}
    .box3 h3    {font-size:150%;
		 font-weight:bold;
		 color:#FFFFFF;
		 margin: -4px 0;
		}

    .box4       {float: left;
		 width: 700px}

    .img-size1  {width: 700px}

    /* メニュー (縦並び) */
    .menu ul    {margin: 0;
		 padding: 0;
		 list-style: none}

    /*.menu li a  {display: block;
	     padding: 5px;
	     color: #FFFFFF;
	     font-size: 14px;
	     text-decoration: none}*/
    .menu li a  {display: block;
		 font-size: 14px;
		 text-decoration: none;
		 background: -moz-linear-gradient(top,#d9f700, #b9d200 50%,#b1c900 50%,#798900);
		 background: -webkit-gradient(linear, left top, left bottom, from(#d9f700), color-stop(0.5,#b9d200), color-stop(0.5,#b1c900), to(#798900));
		 background: -ms-linear-gradient(top, #d9f700, #b9d200);
		 color: #FFF;
		 border-radius: 4px;
		 -moz-border-radius: 4px;
		 -webkit-border-radius: 4px;
		 border: 1px solid #798900;
		 -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		 -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		 text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
		 width: 100%;
		 padding: 10px 0;
		 margin: 2px 5px;}


    /*.menu li a:hover {color: #FFFF00}*/
    .menu li a:hover {background: -moz-linear-gradient(top,#b1c900, #798900 50%,#748400 50%,#627000);
		      background: -webkit-gradient(linear, left top, left bottom, from(#b1c900), color-stop(0.5,#798900), color-stop(0.5,#748400), to(#627000));
			 background: -ms-linear-gradient(top, #b1c900, #798900);
		      color: #FFF;
		      border-radius: 4px;
		      -moz-border-radius: 4px;
		      -webkit-border-radius: 4px;
		      border: 1px solid #627000;
		      -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
		      width: 100%;
		      padding: 10px 0;
		      margin: 2px 5px;
		     }

    .menu li a:active {background: #627000;
		      color: #FFF;
		      border-radius: 4px;
		      -moz-border-radius: 4px;
		      -webkit-border-radius: 4px;
		      border: 1px solid #627000;
		      -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
		      width: 100%;
		      padding: 10px 0;
		      margin: 2px 5px;
		     }

    .selected        {background: -moz-linear-gradient(top,#b1c900, #798900 50%,#748400 50%,#627000);
		      background: -webkit-gradient(linear, left top, left bottom, from(#b1c900), color-stop(0.5,#798900), color-stop(0.5,#748400), to(#627000));
		      			 background: -ms-linear-gradient(top, #b1c900, #798900);
		      color: #FFF;
		      border-radius: 4px;
		      -moz-border-radius: 4px;
		      -webkit-border-radius: 4px;
		      border: 1px solid #627000;
		      -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
		      text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
		      width: 100%;
		      padding: 10px 0;
		      margin: 2px 5px;
		     }    

    /* ボタン設定 */
    /*
.btn1    {background: -moz-linear-gradient(top,#BFD9E5, #3D95B7 50%,#0080B3 50%,#0C419A);
          background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#3D95B7), color-stop(0.5,#0080B3), to(#0C419A));
          color: #FFF;
          border-radius: 4px;
          -moz-border-radius: 4px;
          -webkit-border-radius: 4px;
          border: 1px solid #0C419A;
          -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
          -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
          text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
          width: 100%;
          padding: 5px 0;
	  margin: 2px 0;
	 }
   */

    .btn2 {background: #b1c900;
	   border: 1px solid #707F00;
	   border-radius: 20px;
	   -moz-border-radius: 20px;
	   -webkit-border-radius: 20px;
	   color: #FFFFFF;
	   -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	   -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3),inset 0px 0px 3px rgba(255,255,255,0.5);
	   text-shadow:
	   black 1px 1px 0px,
	   black -1px 1px 0px,
	   black -1px -1px 0px,
	   black 1px -1px 0px;
	   width: 100%;
	   padding: 10px 0;
	   margin: 5px 0;
	  }
}