@charset "UTF-8";

body,p{
  font-family:'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;
  margin:0;
  padding:0;
  color:#5A3D1B;
}

a:link {
  color:#5f6527;
	font-size:95%;
	line-height:135%;
	border-bottom-color:#5f6527;
}

a:visited {
  color:#5f6527;
	font-size:95%;
	line-height:135%;
  text-decoration:none;
}

a:hover {
  color:#82ae46;
	font-size:95%;
	line-height:135%;
  text-decoration:none;
}

.subbox p{
  margin:0 auto;
  padding:0 auto;
  font-size:14px
}

.bold{
	font-weight:bold;
	font-size:98%;
	position:relative;
	margin:0 auto;
	padding:0 auto;
}

/* サイト名 */
.toplogo h1{
	margin:0;
	font-size:22px;
	font-family:'Yu Gothic'
}

.toplogo h1 a{
	text-decoration:none;
	color:#000000
}

.toplogo h1 a:hover{
	opacity:0.6
}

.toplogo img{
  border:none;
	vertical-align:middle
}

.toplogo .text{
	margin-left:30px;
	margin-bottom:5px
}

/* トップメニュー */
.topmenu ul{
  margin:0;
  padding:0;
  list-style:none;
}

.topmenu ul:after{
  content:"";
  display:block;
  clear:both
}

.topmenu li {
	display:inline-block;
	float:left;
	width:auto;
	margin:0;
	list-style-type: none;
	}

.topmenu li a{
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	}

/*各メニューの指定*/
.menu01 a{
	background-image:url(../img/menubar-off.png);
	width:120px;
	height:45px;
	background-position:-25px 0px;
	margin:0;
	}

.menu02 a{
	background-image:url(../img/menubar-off.png);
	width:120px;
	height:45px;
	background-position:-145px 0px;
	margin:0px;
	}

.menu03 a{
	background-image:url(../img/menubar-off.png);
	width:80px;
	height:45px;
	background-position:-265px 0px;
	}

.menu04 a{
	background-image:url(../img/menubar-off.png);
	width:90px;
	height:45px;
	background-position:-345px 0px;
	}

.menu05 a{
	background-image:url(../img/menubar-off.png);
	width:75px;
	height:45px;
	background-position:-435px 0px;
	}

.menu06 a{
	background-image:url(../img/menubar-off.png);
	width:105px;
	height:45px;
	background-position:-510px 0px;
	}

.menu07 a{
	background-image:url(../img/menubar-off.png);
	width:120px;
	height:45px;
	background-position:-615px 0px;
	}

/*各トップメニューのhoverの指定*/
.menu01 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-25px 0px;
	margin:0
	}

.menu02 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-145px 0px;
	width:120px;
	}

.menu03 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-265px 0px;
	width:80px;
	}

.menu04 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-345px 0px;
	width:90px;
	}

.menu05 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-435px 0px;
	width:75px;
	}

.menu06 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-510px 0px;
	width:105px;
	}

.menu07 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-615px 0px;
	width:120px;
	}

/*記事*/
.kiji h1{
  margin-top:0;
  margin-bottom:20px;
  font-size:36px
}

.kiji p{
  margin-top:0;
  margin-bottom:20px
}

.kiji ul{
  margin:0;
  padding:0;
  padding-left: 20px;
  list-style:disc;
}

.kiji img{
  max-width:100%;
  height:auto
}

/*記事の小見出し*/

.kiji h2{
  margin-top:40px;
  padding-left:10px;
  border-left:solid 10px #7cbac1;
  font-weight:normal
}

.kiji h3{
  margin-top:0;
  margin-bottom:20px;
  font-size:18px;
  color:#5f6527;
}

/*記事の分類*/
.kijicat{
  margin-bottom:25px
}

.kijicat ul{
  margin:0;
  padding:0;
  list-style:none
}

.kijicat li a{
  display:block;
  margin-right:5px;
  padding:3px 5px;
  border-radius:2px;
  background-color:#5e5757;
  color:#ffffff;
  font-size:12px;
  text-decoration:none
}

.kijicat li a:hover{
  opacity:0.8
}

.kijicat ul:after{
  content:"";
  display:block;
  clear:both
}

.kijicat li{
  float:left;
  width:auto
}

/*SNSのシェアボタン*/
.share{
  margin-top:40px
}

.share ul{
  margin:0;
  padding:0;
  list-style:none
}

.share li a{
  display:block;
  padding:10px 5px;
  color:#ffffff;
  font-size:14px;
  text-align:center;
  text-decoration:none
}

.share-tw{
  background-color:#55acee
}

.share-fb{
  background-color:#3b5998
}

.share-gp{
  background-color:#dd4b39
}

.share i{
  margin-right:10px;
  font-size:24px;
  vertical-align:middle
}

.share li a:hover{
  opacity:0.8
}

.share ul:after{
  content:"";
  display:block;
  clear:both;
}

.share li{
  float:left;
  width:33.3333%
}


/*サイドメニュー*/
.sidemenu h1{
  margin-top:0;
  margin-bottom:10px;
  border-bottom:dotted 2px #dddddd;
  color:#666666;
  font-size:18px;
}

.sidemenu ul{
  margin:0;
  padding:0;
  list-style:none
}

.sidemenu li a{
  display:block;
  padding:5px;
  color:#000000;
  font-size:14px;
  text-decoration:none
}

.sidemenu li a:hover{
  background-color:#eeeeee
}

.sidemenu{
  margin-bottom:30px
}



/*おすすめメニュー*/
.osusume h1{
  margin-top:0;
  margin-bottom:10px;
  border-bottom:dotted 2px #dddddd;
  color:#666666;
  font-size:18px;
}

.osusume ul{
  margin:0;
  padding:0;
  list-style:none
}

.osusume li a{
  display:block;
  padding:0;
  margin-bottom:10px;
  color:#000000;
  font-size:14px;
  text-decoration:none
}

.osusume li a:hover{
  background-color:#eeeeee;
  opacity:0.8
}

.osusume{
  margin-bottom:30px
}

.osusume img{
  width:100%;
  height:auto;
  border:none;
  vertical-align:bottom
}

.osusume .text{
  padding:10px 10px;
  background-color:rgba(0,0,0,0.5);
  color:#ffffff;
}

/*オススメ記事メニューのテキストを重ねる設定*/
.osusume a{
  position:relative
}

.osusume .text{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}


/*活動について*/
.katudou h1{
  margin-top:0;
  margin-bottom:10px;
  border-bottom:dotted 2px #dddddd;
  color:#666666;
  font-size:18px;
}

.katudou ul{
  margin:0;
  padding:0;
  list-style:none
}

.katudou li a{
  display:block;
  padding:5px;
  border-bottom:dotted 1px #dddddd;
  color:#000000;
  font-size:14px;
  text-decoration:none;
}

.katudou li a:hover{
  background-color:#eeeeee
}

.katudou li a img{
  border:none
}

.katudou a:after{
  content:"";
  display:block;
  clear:both
}

.katudou img{
  float:left;
  width:60px
}

.katudou .text{
  float:none;
  width:auto;
  color:#2288bb;
  background-color:rgba(0, 0, 0, 0);
  margin-left:60px;
  padding-left:15px;
}

/*subboxを横に並べる*/
.subbox{
	margin:0 auto;
	padding:0 10px 10px 20px;
	background-color:#FFF;
	float:left;
	}



/*box2をバーの形にする*/
.box2{
	padding:0.5em 1.0em;
	margin-bottom:20px;
	color: #5d627b;
	background: #D2B48C	;
	border-top: solid 5px #5d627b;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.box3{
	border-top:dotted 5px #dddddd
}

.box5{
	border-top:dotted 5px #dddddd
}

/*boxの上下の感覚*/
.box1{
  padding-top:8px;
  padding-bottom:8px
}

.box3{
  padding-top:40px;
  padding-bottom:30px
}

.box4{
  padding-top:40px;
  padding-bottom:30px
}

.box5{
  padding-top:15px;
  padding-bottom:15px
}

/*ボックスの左右に確保する余白*/
.box1,.boxA,.box2-inner,.box5-inner{
  padding-left:15px;
  padding-right:15px
}




/*599px以下*/
@media (max-width:599px){

/*トップロゴ*/
.toplogo h1{
	font-size:16px;
}

.toplogo img{
	width:120px;
	height:auto
}

/*トップメニュー*/
.topmenu li {
  padding:0
}

.menu01 a{
	background-image:url(../img/menubar-off.png);
	background-size:cover;
	width:50px;
	height:20px;
	background-position:-10px 0px;
	margin:0px 0px 0px 0px;
	}

.menu02 a{
	background-image:url(../img/menubar-off.png);
	background-size:cover;
	width:52px;
	height:20px;
	background-position:-60px 0px;
	margin:0px;
	}

.menu03 a{
	background-image:url(../img/menubar-off.png);
	background-size:cover;
	width:40px;
	height:20px;
	background-position:-112px 0px;
	}

.menu04 a{
	background-image:url(../img/menubar-off.png);
	background-size:cover;
	width:40px;
	height:20px;
	background-position:-152px 0px;
	}

.menu05 a{
	background-image:url(../img/menubar-off.png);
	background-size:cover;
	width:30px;
	height:20px;
	background-position:-192px 0px;
	}

.menu06 a{
	background-image:url(../img/menubar-off.png);
	background-size:cover;
	width:40px;
	height:20px;
	background-position:-222px 0px;
	}

.menu07 a{
	background-image:url(../img/menubar-off.png);
	background-size:cover;
	width:50px;
	height:20px;
	background-position:-262px 0px;
	}

/*各トップメニューのhoverの指定*/
.menu01 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-10px 0px;
	margin:0px 0px 0px 0px;
	}

.menu02 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-60px 0px;
	width:50px;
	}

.menu03 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-112px 0px;
	width:40px;
	}

.menu04 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-152px 0px;
	width:40px;
	}

.menu05 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-192px 0px;
	width:30px;
	}

.menu06 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-222px 0px;
	width:40px;
	}

.menu07 a:hover{
	background-image:url(../img/menubar-on.png);
	background-position:-262px 0px;
	width:50px;
	}

/*サイト名と記事のタイトル*/

.kiji h1{
  font-size:26px
}

/*ボックスの上下の間隔*/
.box1{
  padding-top:4px;
  padding-bottom:4px;
}

.box3{
  padding-top:25px
}

/*SNSのシェアボタン*/
.share span{
  padding-right:5px;
  display:inline-block;
  text-indent:-9999px
}

}


@media (min-width:600px) and (max-width:767px){

/*Box4-1とBox4-2を横に並べる設定*/
.box4:after{
  content:"";
  display:block;
  clear:both
}

.box4-1{
  float:left;
  width:50%
}

.box4-2{
  float:left;
  width:50%
}

/*Box4-1とBox4-2の左右の感覚*/
.box4-1{
  padding-right:20px
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}

.box4-2{
  padding-left:20px
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}

}

@media (min-width:768px){

/*Box3とBox4横並び*/
.boxA:after{
  content:"";
  display:block;
  clear:both
}

.box3{
  float:left;
  width:70%
}

.box4{
  float:left;
  width:30%
}

/*Box3とBox4の左右の感覚*/
.box3{
  padding-right:50px;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}

}

@media (min-width:1040px){

/*全体の横幅を固定*/
.box1,.boxA,.box2-inner,.box5-inner{
  width:1000px;
  margin-left:auto;
  margin-right:auto

}

}
