@charset "utf-8";

/* ----------------------- Browser Default Initialization */
html {
	overflow-y: scroll;
	zoom: 1;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td	{
	margin: 0;	padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var	{
	font-style: normal;
}
caption, th	{
	text-align: left;
}
q:before ,q:after	{
	content: '';
}
object, embed	{
	vertical-align: top;
}
img, abbr, acronym, fieldset	{
	border: 0;
}
img {
  vertical-align: bottom;
}

/* body、link要素
----------------------------------------------------------- */
html, body	{
	_height: 100%;   
    _overflow: auto;
	height:100%;
	margin:0 auto;
	padding:0 0 0 0;
}
body {
	color:#333;
	line-height:150%;
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	background:#FFF;
}
a,a:link	{
	color:#333;
}
a:visited	{
	color:#333;
}
a:hover	{
	text-decoration:none;
}

hr{
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	clear:both;
}

/*------------------------------------------
// header 要素
----------------------------------------- */
#header h1{
	width: 960px;
	height:80px;
	margin: 0 auto;
}

/*------------------------------------------
// container 要素
----------------------------------------- */
#container	{
	width:100%;
	margin:0;
	padding:0;
	background-image:url(../images/bg.gif);
}

.midashi {
	width:960px;
	margin:0 auto;
	padding:0;
	position:relative;
	vertical-align:bottom;
}
/*イベント企画・運営*/
.midashi h2.h2_event {
	position: absolute;
	top: 2em;
	background-color:#1AAAE0;
	padding: 0.5em 2em;
	color: #fff;
	transform: rotate(-4deg);
}
/*まちづくり*/
.midashi h2.h2_machi {
	position: absolute;
	top: 2em;
	background-color:#F8B700;
	padding: 0.5em 2em;
	color: #fff;
	transform: rotate(-4deg);
}
/*国際交流*/
.midashi h2.h2_kokusai {
	position: absolute;
	top: 2em;
	background-color:#E27C9E;
	padding: 0.5em 2em;
	color: #fff;
	transform: rotate(-4deg);
}
/*キャンプ*/
.midashi h2.h2_camp {
	position: absolute;
	top: 2em;
	background-color:#B7CB13;
	padding: 0.5em 2em;
	color: #fff;
	transform: rotate(-4deg);
}
/*物品貸出*/
.midashi h2.h2_buppin {
	position: absolute;
	top: 2em;
	background-color:#663366;
	padding: 0.5em 2em;
	color: #fff;
	transform: rotate(-4deg);
}


/* 写真スライダー要素（トップページ）
----------------------------------------------------------- */
.swiper-container{
	width:960px;
	/*height:330px;*/
	margin:0 auto;
	clear:both;
	z-index:0;
}
.swiper-band{
	position:absolute;
	bottom:0;
	/*right:0;*/
	z-index:999;
}

/*------------------------------------------
// メインメニュー 要素
----------------------------------------- */
#wrap{
	background:#FFF;
	border-top:solid 1px #E5E5E5;
	border-bottom:solid 1px #E5E5E5;
}
ul#menu{
    width:960px;
    margin:0 auto;
    /*overflow:hidden;*/
	font-size:15px;
	font-weight:500;
	display: table;
}
ul#menu li{
    width:160px;
	list-style-type:none;
	display: table-cell;
	vertical-align:middle !important;
}
ul#menu li a{
	height:50px;
	/*line-height:50px;*/
	padding:5px 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */
	vertical-align:middle !important;
    /*display:block;*/
    border-left:solid 1px #E5E5E5;
	text-decoration:none;
	text-align:center;
}
ul#menu li:last-child a{
    border-right:solid 1px #E5E5E5;
}
ul#menu li a img{
	vertical-align:middle !important;
	/*float:left;*/
}
/*協会概要*/
ul#menu li.kyoukai a:hover{
	background-color:#ECECEC;
}
/*イベント企画・運営*/
ul#menu li.event a:hover{
	background-color:#D1EEF9;
}
/*まちづくり*/
ul#menu li.machi a:hover{
	background-color:#FEF1CC;
}
/*国際交流*/
ul#menu li.kokusai a:hover{
	background-color:#F9E5EC;
}
/*キャンプ*/
ul#menu li.camp a:hover{
	background-color:#F1F5D0;
}
/*物品貸出*/
ul#menu li.buppin a:hover{
	background-color:#E0D6E0;
}

/* contents要素
----------------------------------------------------------- */
#contents{
	width:960px;
	margin:10px auto;
	padding:0;
	background-color:#FFF !important;
	overflow:hidden;
	clear:both;
	z-index:3;
}

#contents p{
	margin:0.5em;
}

.pankuzu	{ width: 580px; margin-bottom: 12px; }
.pankuzu li	{ display: inline; }

/*------------------------------------------
// mainBox 要素
----------------------------------------- */
#mainBox{
	width:660px;
	float:left;
}

/*写真枠に影つける*/
#mainBox img{
	margin:0 auto;
	display:block;
	box-shadow:0px 5px 10px -5px rgba(0, 0, 0, 0.8);
	-moz-box-shadow:0px 5px 10px -5px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow:0px 5px 10px -5px rgba(0, 0, 0, 0.8);
}

/*写真枠に影つける*/
#mainBox img .caption {
	font-size:130%;
	text-align:center;
	padding-top:80px;
	color:#fff;
}
#mainBox img .mask {
	width:100%;
	height:100%;
	position:absolute;	/* 絶対位置指定 */
	top:0;
	left:0;
	opacity:0;	/* マスクを表示しない */
	background-color:rgba(0,0,0,0.4);
	-webkit-transition:	all 0.2s ease;
	transition:	all 0.2s ease;
}
#mainBox img a:hover .mask{
	opacity:1;
}

#mainBox li{
	margin:0.2em 0 0 4em;
}

#mainBox h3{
	position: relative;
	margin:0.5em 0;
	padding:0 0 10px 25px;
	font-weight:normal;
	font-size:20px;
	border-bottom:solid 1px #F5F4EA;
	clear:both;
}
#mainBox h3:before{
	position: absolute;
	top: 8px;
	left: 0px;
	width: 20px;
	height: 5px;
	content: "";
}
/*イベント企画・運営（青）*/
#mainBox h3.h3_event:before{
	background-color:#1AAAE0;
}
/*まちづくり（橙）*/
#mainBox h3.h3_machi:before{
	background-color:#F8B700;
}
/*国際交流（桃）*/
#mainBox h3.h3_kokusai:before{
	background-color:#E27C9E;
}
/*キャンプ（緑）*/
#mainBox h3.h3_camp:before{
	background-color:#B7CB13;
}
/*物品貸出（紫）*/
#mainBox h3.h3_buppin:before{
	background-color:#663366;
}

section{
	margin-bottom:2em;
}

/*------------------------------------------
// sideBox 要素
----------------------------------------- */
#sideBox{
	width:280px;
	float:right;
}
.contactBox h4{
	background:#ECECEC;
	padding:5px;
}
.contactBox ul{
	margin:0;
	padding:0;
	list-style:none;
}
.contactBox ul li.map{
	background:url(../images/list.png) no-repeat left;
	margin:0 0 0 8.5em;
	padding:0 0 0 1.5em;
}

.bannerBox{
	color:#666;
	font-size:13px;
	line-height:1.5;
}

/* table要素
----------------------------------------------------------- */
table {
    border-spacing:0;
    width: 100%;    
}

/* 並びボックス
----------------------------------------------------------- */
#parent {
	width: 680px;
	margin:0 -10px 0 0;
}

#parent .child {
	width: 320px;
	margin:0 10px 20px 0;
	padding:0em;
	float: left;
	background:#FFF;
	color:#666;
	font-size:13px;
}



/* ボタン要素
----------------------------------------------------------- */
a.btn {
    margin: 0;
    padding:10px;
    border: 1px solid #AAA;
    background: #ECECEC;
    display: inline-block;
    position: relative;
    z-index: 0;
    background:-o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:-ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:-moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:-webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    background:linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
    /*box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;*/
    text-shadow: 0 1px #FFF;
	float:right;
	clear:both;
}


/*------------------------------------------
// マステ見出し付き枠（トップページ）
----------------------------------------- */
.note_event,
.note_machi,
.note_kokusai,
.note_camp {
	width:320px;
	height:250px;/*枠内に背景色を入れるのに必要。もし今後、説明文の行数が多くなると高さ指定数も増やさなければならない。*/
	position: relative;
	margin:20px 10px 10px 0;
	padding: 1em 0em;
	display: inline-block;
	float:left;
	/*z-index: 0;*/
}

/*イベント企画・運営*/
.note_event a{
	box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	border:1px dashed #1AAAE0;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:#D1EEF9;
}
.note_event a:hover{
	box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	-moz-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	border:2px solid #1AAAE0;
	border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
.note_event h5 {
	position: absolute;
	top: -1em;
	background-color:#1AAAE0;
	padding: 0.25em 2em;
	color: #fff;
	transform: rotate(-4deg);
	z-index: 999;
}
.note_event p{
	color:#127398;
	font-weight:bold;
	padding:0 5px;
	position: absolute;
}

/*まちづくり*/
.note_machi a{
	box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	border:1px dashed #F8B700;
	border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:#FEF1CC;
}
.note_machi a:hover{
	box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	-moz-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	border:2px solid #F8B700;
	border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
.note_machi h5 {
	position: absolute;
	top: -1em;
	background-color:#F8B700;
	padding: 0.25em 2em;
	color: #fff;
	transform: rotate(-4deg);
	z-index: 999;
}
.note_machi p{
	color:#AA8000;
	font-weight:bold;
	padding:0 5px;
	position: absolute;
}

/*国際交流*/
.note_kokusai a{
	box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	border:1px dashed #E27C9E;
	border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:#F9E5EC;
}
.note_kokusai a:hover{
	box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	-moz-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	border:2px solid #E27C9E;
	border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
.note_kokusai h5 {
	position: absolute;
	top: -1em;
	background-color:#E27C9E;
	padding: 0.25em 2em;
	color: #fff;
	transform: rotate(-4deg);
	z-index: 999;
}
.note_kokusai p{
	color:#8B1F42;
	font-weight:bold;
	padding:0 5px;
	position: absolute;
}

/*キャンプ*/
.note_camp a{
	box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 5px 0px rgba(0,0,0,0.2);
	border:1px dashed #B7CB13;
	border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:#F1F5D0;
}
.note_camp a:hover{
	box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	-moz-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
	border:2px solid #B7CB13;
	border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
.note_camp h5 {
	position: absolute;
	top: -1em;
	background-color:#B7CB13;
	padding: 0.25em 2em;
	color: #fff;
	transform: rotate(-4deg);
	z-index: 999;
}
.note_camp p{
	color:#8D9B0F;
	font-weight:bold;
	padding:0 5px;
	position: absolute;
}


/*------------------------------------------
// footer 要素
----------------------------------------- */
#footer	{
	width:100%;
	background-image:url(../images/bg.gif);
}

address{
	width:960px;
	margin:0 auto;
	font-size:x-small;
	text-align:center;
	clear:both;
}

/*------------------------------------------
// ページ先頭へ
----------------------------------------- */
.pageTop {
    position: fixed;
    /*bottom:0px;*/
    right: 20px;
    font-size:13px;
}
.pageTop a {
    background:#333;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding:10px;
    text-align: center;
    display: block;
    border-radius: 10px; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.pageTop a:hover {
    text-decoration: none;
    background: #999;
}

/*------------------------------------------
// アイコンの自動付与
----------------------------------------- */
#mainBox a[href*=".pdf"]{ 
	background-image: url(../images/icon_pdf.gif) no-repeat right center;
	padding-right:20px;
	display: inline-block;
}

#mainBox a[href^="http"]{ 
	background-image: url(../images/icon_opwin.gif) no-repeat right center;
	padding-right:20px;
	display: inline-block;
}
#mainBox a img[href^="http"]{ 
	padding-right:0;
}