/* init **************/
html                        {font-family:Helvetica,sans-serif;font-size:150.01%;overflow-y:scroll;}
body                        {font-size:large;}
img, h1, ul, li             {margin:0;padding:0;}
img                         {border:none;vertical-align:bottom;}
input, select, textarea     {font:inherit;}
body                        {text-align:center;}
.wrap                       {text-align:left;}

/* width *************/
/*.wrap                       {width:950px;} */
.wrap                       {width:100%;}

/* font  ********/
body                        {color:#000000}
footer                      {color:#000000;}

.slogan,
.navi ul li a:link,
.navi ul li a:visited,
.mainmenu ul li a:hover	{color:#ffffff;}
.navi ul li a:hover,
.mainmenu ul li a:link,
.mainmenu ul li a:visited	{color:#006600;}
.footer,
.footer a:visited,
.footer a:link              {color:#ffffff;}

/* background color **/
body,div.wrap               {background:rgba(245,255,245,0.4);}
.navi,
.navi ul li.active     {background-color:#006600;}
.navi ul li a:hover,
.mainmenu,
.mainmenu ul li.active	{background-color:#F5FFF5;}
/*.footer                     {background-color:#F5FFF5;}
.slogan                     {background-color:#F5FFF5;}*/

/* background image **/
body                        {
                             background-image:url(images/bg.png);
                             background-repeat:repeat-x;repeat-y;
				 background-position: top center;
				 background-attachment: fixed;
                            }
div.content                 {
                             background-image:url(images/content_bg.gif);
                             background-repeat:repeat-x;
                            }

/* block layout *******/
div.header			{background-color:#eeffee;
/*				 background-color:#eeFFee;
                             width:928px; */
				 width:100%;
				 height:130px;
				 border-top:solid 1px #006600;
				 border-bottom:solid 1px #006600;
				 border-right:solid 1px #006600;
				 border-left:solid 1px #006600;
/*				 padding-top:10px;*/
				 padding-top:0px;
				 padding-left:10px;
				 padding-right:10px;
				}
div.header h1               {font-size:36px;
				 font-family:sans-serif;
				 color:#007700;
				 margin-bottom:0px;
				 text-shadow: gray 1px 1px 5px;
				}
div.header h2               {font-size:18px;
				 color:#007700;
				 margin-bottom:0px;
				 text-shadow: gray 1px 1px 2px;
				 max-height:18px;
				}
div.header h3               {font-size:14px;
				 font-family:sans-serif;
				 color:red;
				 text-shadow: gray 1px 1px 2px;
				 max-height:14px;
				}
div.header a               {text-decoration:none;}
div.wrap                    {border:1px solid #ddd;}

div.wrap                    {
                             margin:1px auto;
                             box-shadow:0 0 15px #cdcdcd;
                             -moz-box-shadow:0 0 15px #cdcdcd;
                             -webkit-box-shadow:0 0 20px #e5e5e5;
                            }
div.slogan                  {
                             padding:0px;
				 color:#007700;
                            }
div.navi ul                 {
				 display: none;
				 border-bottom:solid 1px #006600;
				 border-left:solid 1px #006600;
				 border-right:solid 1px #006600;
                             overflow:hidden;
				 zoom:1;
                             list-style-type:none;
                            }
div.navi ul li              {
                             float:left;
                             letter-spacing:1px;
                            }

div.navi ul li a            {
                              display:block;
                              padding: 2px 5px;
                            }
div.navi ul li a:link,
div.navi ul li a:visited    {
				  text-decoration: none;
                            }

div.content                 {
/*                           margin-left:150px; */
                             margin-right:15px;
				 animation: bgchange 30s ease infinite;
/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
                             margin-left:15px;
				 overflow:hidden;
			/*	 zoom:1;*/
                             padding:20px;
                             border-top:1px solid #eee;
                           	 }

	@keyframes bgchange{
	      0%   {background:rgba(245,255,245,0.5);}/*変化させたい色 old #ffe6e1;*/
	      25%  {background:rgba(245,255,245,0.5);}/*変化させたい色 old #fdcb9e;*/
	      50%  {background:rgba(253,251,193,0.5);}/*変化させたい色 old #fdcbc1;*/
	      75%  {background:rgba(255,255,140,0.5);}/*変化させたい色*/
	      90%  {background:rgba(178,223,251,0.5);}/*変化させたい色*/
	      100% {background:rgba(245,255,245,0.5);}/*変化させたい色 old #ffe6e1;*/
	}
#video-area{
	    position: fixed;
	    opacity:0.8;
	    z-index: -1;/*最背面に設定*/
	    top: 0;
	    right:0;
	    left:0;
	    bottom:0;
	    overflow: hidden;
}

#video {
	    /*天地中央配置*/
	    position: absolute;
	    opacity:0.8;
	    z-index: -1;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    /*縦横幅指定*/
	    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
	    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
	    min-height: 100%;
	    min-width: 100%;
}
}

div.footer                  {
				 border-top:solid 1px #006600;
                             /*padding:30px;*/
                             text-align:center;
                            }
div.footercs                {
                             float: right;
				 height:30px;
				 border: none;
                            }
div.icon                    {
 				 height:20px;
				 border: none;
                            }
div.mainmenu			{
/*				 float:left;
				 position:fixed; */
				 right:0;
				 position:fixed;
/*				 height:500px; */
				 height:auto;
				 width:130px; 
				 margin:0px;
				 padding:10px;
				 border-top:solid 1px #006600;
				 border-bottom:solid 1px #006600;
				 border-right:solid 1px #006600;
				 border-left:solid 1px #006600;
				 font-size: 80%;
			    }
div.mainmenu ul		{
				 display:auto;
				 cursor: pointer;
				 margin-left:0px;
			    }
div.mainmenu ul li		{
				 display:inline;
				 float:left;
				 text-align:left;
			    }
div.mainmenu ul li a		{
				 height:20px;
				 width:130px;
				 display:block;
				 position:relative;
				 text-decoration:none;
				 padding:1px 1px 1px 1px;
			    }
div.mainmenu ul li a:hover	{
				 text-decoration:underline;
				 font-weight:bold;
			    }