@charset "UTF-8";


body {
    margin: 0;
   font-family: "Noto Sans JP", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}


/***** サイト名称（ロゴ） *****/
.sitelogo h1 a {
   color: #000000;
   text-decoration: none;
}

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

.sitelogo img {
     border: none;
}


/***** header_areaの下に罫線を挿入（コンテンツページのみ） *****/
.contents .header_area {
   border-bottom: solid 1px #dddddd;
}


/***** 扉絵/slidshow *****/
#slidshow div {
   width:100%;
   height: auto;
   vertical-align: bottom;
}

#slidshow img {
  display: block;
  margin: 0 auto;
}

/***** パンくずリスト *****/
.bread {
   margin-bottom: 20px;
}

.bread ol {
   margin: 0;
   padding: 0;
   list-style: none;
}

.bread li a {
   display: inline-block;
   padding: 5px;
   color: #000000;
   font-size: 14px;
   text-decoration: none;
}

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

.bread ol:after	{
   content: "";
   display: block;
   clear: both;
}

.bread li {
   float: left;
   width: auto;
}

.bread li:after	{
   content: '\003e';
   margin-left: 10px;
   margin-right: 10px;
   color: #888888;
}

.bread li:last-child:after {
   content: '';
}


/***** メニュー/middle_area1 *****/
.middle_area1 a {
   display: block;
   background-color: #222222;
   color: #ffffff;
   text-align: center;
   text-decoration: none;
}

.middle_area1 a:hover {
   opacity: 0.8
}

.middle_area1 img {
   max-width: 100%;
   height: auto;
   border: none;
   margin-bottom: 0px;
   vertical-align: bottom;
}

.middle_area1 h1 {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 2px;
   padding-bottom: 2px;
   font-size: 16px;
   font-weight: normal;

   background:#439d43;
   background:-webkit-gradient(linear, left top, left bottom, color-stop(0.85, #700), color-stop(0.00, #439d43));
   background:-webkit-linear-gradient(top, #439d43 0%, #700 85%);
   background:-moz-linear-gradient(top, #439d43 0%, #700 85%);
   background:-o-linear-gradient(top, #439d43 0%, #700 85%);
   background:-ms-linear-gradient(top, #439d43 0%, #700 85%);
   background:linear-gradient(to bottom, #439d43 0%, #700 85%);
}

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

.error_page h2 {
   margin: 0;
   padding: 10px;
   font-size: 24px;
   font-weight: normal;
}

.error_page img {
   max-width: 90%;
   height: auto;
   border: none;
   margin-bottom: 0px;
   vertical-align: top;
}

/***** お知らせ/TOPIX *****/
.topix {
   padding: 20px;
   border: solid 5px #dddddd;
}

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

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

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

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

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

.topix time {
   float: left;
   width: 60px;
   color: #888888;
   font-weight: bold;
}

.topix .text {
   float: none;
   width: auto;
   margin-left: 60px;
}


/***** bottom_area *****/
.bottom_area {
   display: block;
   background-color: #064f08;
   color: #ffffff;
   padding: 50px;
   text-align: left;
   text-decoration: none;
}

.bottom_area a {
   display: block;
   background-color: #064f08;
   color: #ffffff;
   font-size: 14px;
   text-align: left;
   text-decoration: none;
}

.bottom_area a:hover {
   opacity: 0.8
}

.bottom_area p {
   border-bottom: solid 1px #dddddd;
}


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

.footer {
   padding-top: 5px;
   padding-bottom: 5px;
   background-color: #dddddd;
}

/***** サイドメニュー *****/
.sidemenu {
     margin-left: 10px;
     border: solid 6px #dddddd;
}

.sidemenu h2 {
     margin: 0;
     padding: 10px;
     font-size: 16px;
     font-weight: normal;
}

.sidemenu h2 i {
     margin-right: 5px;
     color: #8abc60;
     font-size: larger;
}

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

.sidemenu li a {
   display: block;
   padding: 5px;
   border-top: solid 1px #dddddd;
   color: #000000;
   font-size: 14px;
   text-decoration: none;
}

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


/* ########### areaの余白設定 ########### */
.header_area, .middle_area1 {
   padding-top: 20px;
   padding-bottom: 10px;
   padding-left: 15px;
   padding-right: 15px;
}

.middle_menu1, .middle_menu2, .middle_menu3, .middle_menu4, .middle_menu5, .middle_menu6 {
   padding-bottom: 10px;
}

.middle_area2 {
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 15px;
   padding-right: 15px;
}

.footer {
   padding-left: 15px;
   padding-right: 15px;
}

.page_area {
   padding-top: 25px;
   padding-bottom: 25px;
}


/* ########### 359px以下 ########### */
@media screen and (max-width: 359px) {

/***** トップロゴ *****/
.sitelogo img {
   width: 225px;
   height: auto;
}

}


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

/***** ナビゲーションメニュー *****/
.navimenu li a {
   padding: 10px 7px;
   font-size: 11px;
}

}


/* ########### 767px以下 ########### */
@media screen and (max-width: 767px) {

/***** トグルボタン *****/
#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;
}

/***** ナビゲーションメニュー（縦並び） *****/

.navimenu {
   display: none;
}

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

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

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

}


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

/***** トグルボタン *****/
#menubtn {
   display: none;
}

/***** ナビゲーションメニュー *****/
#navimenu {
   display: block !important;
}

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

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

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

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

.navimenu li {
   float: left;
   width: auto;
}

/***** sitelogo_areaとnavimenu_areaを横に並べる設定 *****/
.header_area:after {
   content: "";
   display: block;
   clear: both;
}

.sitelogo_area {
   float: left;
   width: auto;
}

.navimenu_area {
   float: right;
   width: auto;
}

/***** middle_menu1～middle_menu3を横に並べる設定 *****/
.middle_area1:after {
   content: "";
   display: block;
   clear: both;
}

.middle_menu1, .middle_menu2, .middle_menu4, .middle_menu5 {
   float: left;
   width: 32%;
   margin-right: 2%
}

.middle_menu3, .middle_menu6 {
   float: left;
   width: 32%;
}

/***** bottom_menu1～bottom_menu3を横に並べる設定 *****/
.bottom_area:after {
   content: "";
   display: block;
   clear: both;
}

.bottom_menu1, .bottom_menu2, {
   float: left;
   width: 32%;
   margin-right: 2%
}

.bottom_menu3 {
   float: left;
   width: 32%;
}

/***** honbun_areaとsidemenu_areaを横に並べる設定 *****/
.page_area:after {
   content: "";
   display: block;
   clear: both;
}

.honbun_area {
   float: right;
   width: 80%;
   padding-left: 20px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

.sidemenu_area	{
   float: left;
   width: 20%;
}

}


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

/***** 全体の横幅を固定に設定 *****/
.middle_area1, .middle_area2, .bottom_area, .footer_area, .page_area {
   width: 1140px;
   margin-left: auto;
   margin-right: auto;
}

}