@charset "UTF-8";

body      {margin: 0;
          font-family: 'メイリオ',
          'Hiragino kaku Gothic Pro', sans-serif}

/*サイト名*/
.site h1 a    {color: #000000;
               text-decoration: none}

.site h1      {margin: 0;
              font-size: 30px}

.site img     {border: none}

/*ナビゲーション*/
.menu ul      {margin: 0;
              padding: 0;
              list-style: none}

.menu li a    {display: block;
              padding: 10px 15px;
              color: #000000;
              font-size: 14px;
              text-decoration: none}

.menu li a:hover      {background-color: #eeeeee}

.menu ul:after      {content: "";
               display: block;
               clear: both}

.menu li      {float: left;
              width: auto}
/*heder img*/
.topimg       {max-width: 100%;
              height: auto;
              vertical-align: bottom}

/*概要*/
.gaiyou a      {display: block;
               background-color: #222222;
               color: #ffffff;
               text-align: center;
               text-decoration: none}

.gaiyou a:hover      {opacity: 0.8}

.gaiyou i     {display: block;
              padding-top: 40px;
              padding-bottom: 40px;
              font-size: 38px}

.gaiyou .fa-database      {background-color: #bfbd13;}

.gaiyou .fa-signal      {background-color: #c58839}

.gaiyou .fa-envelope      {background-color: #859f46}

.gaiyou h1     {margin-top: 0;
               margin-bottom: 0;
               padding-top: 5px;
               padding-bottom: 5px;
               font-size: 20px;
               font-weight: normal}

.gaiyou p      {margin-top: 0;
               margin-bottom: 0;
               padding-top: 15px;
               padding-bottom: 15px;
               background-color: #524e3c;
               font-size: 12px}

/*news*/
.news      {padding: 20px;
           border: solid 5px #dddddd}

.news h1      {margin-top: 0;
              margin-bottom: 5px;
              font-size: 18px;
              color: #666666}

.news ul      {margin: 0;
              padding: 0;
              list-style:  none}

.news li a    {display: block;
              padding: 5px;
              border-bottom: dotted 2px #dddddd;
              color: #000000;
              font-size: 14px;
              text-decoration: none}

.news li a:hover      {background-color: #eeeeeeee}

.news time      {color: #88888888;
                font-weight: bold}

.news a:after     {content: "";
                  display: block;
                  clear: both}

.news time      {float: left;
                width: 110px}

.news .text      {float: none;
                 width: auto;
                 margin-left: 110px}

/*copyright*/
.copyright p      {margin: 0;
                  color:#666666;
                  font-size: 14px}

.box5             {padding-top: 15px;
                  padding-bottom: 15px;
                  background-color: #dddddd}

/*ボックスの左右*/
.boxA, .box4, .box5, .box6     {padding-left: 15px;
                              padding-right: 15px}

/*ボックスの上下*/
.boxA       {padding-top: 20px;
            padding-bottom: 10px}

.box4       {padding-top: 20px;
            padding-bottom: 20px}

.box6       {padding-top: 20px}

.box6-1, .box6-2, .box6-3      {padding-bottom: 10px}

/*#####599px以下######*/
@media (max-width: 599px){

.menu li a     {padding: 10px 7px;
               font-size: 11px}

}

/*#####768px以上######*/
@media (min-width: 768px) {

  /*BOX1とBOX2を横に並べる*/
.boxA:after   {content: "";
               display: block;
               clear: both}

.box1         {float: left;
               width: auto}

.box2         {float: right;
               width: auto}

/*box4を横に並べる設定 */

/*box6-1,2,3を横に並べる設定*/
.box6:after     {content: "";
               display: block;
               clear: both}

.box6-1       {float: left;
              width: 32%;
              margin-right: 2%}

.box6-2       {float: left;
              width: 32%;
              margin-right: 2%}

.box6-3       {float: left;
              width: 32%}

}

/*#####1190px以上######*/
@media (min-width: 1024px) {

/*全体の横幅を固定*/
.box3, .box4, .boxA-inner, .box5-inner, .box6       {width: 1024px;
                                                    margin-left: auto;
                                                    margin-right: auto}

/*BOX Aの下に罫線を挿入*/
.boxA       {margin-bottom: 20px;
            border-bottom: solid 1px #dddddd}


}