*{
	padding: 0px;
	margin: 0px;
	border: none;
}

body{
	font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", sans-serif;
	color: #444444;
	text-align: center;
	font-size: 14px;
    letter-spacing: 0.1em;
	line-height: 170%;
}

a { color: #A4B601; text-decoration: none; overflow: hidden;}
a:hover { color: #BAD001; text-decoration:none;}

li { list-style-type: none;}
br { letter-spacing: 0;}

.red { color:#FF3333;}
.pink { color:#FF66CC;}
.orange { color: #FF9900;}
.blue { color: #0099FF;}
.green { color: #3A9E18;}
.small { font-size: 80%;}
.big { font-size: 120%;}
.b { font-weight: bold;}
.mb50 { margin-bottom: 50px;}
.mb20 { margin-bottom: 20px;}

.center{text-align: center;}

/*------------------ clear ------------------*/

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

.clear { clear: both; margin: 0px; padding: 0px;}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}


p { font-size: 14px; text-align: justify;}

#container {
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}


/*------------------ header ------------------*/

header {
	width: 1000px;
	height: 130px;
}

header h1{
	width: 400px;
	height: 100px;
	float: left;
	margin: 15px 0 0 25px;
}

header h1 a {
	width: 430px;
	height: 100px;
	background: url(../common/img/logo.jpg) no-repeat;
	text-indent: -9999px;
	display: block;
}


header ul {
	float:right;
	margin-top: 20px;
}

header ul li {
	float: right;
}
header ul li#btn_cnt {
	width: 135px;
	height: 96px;
}
header ul li#btn_cnt a {
	width: 135px;
	height: 96px;
	display: block;
	text-indent: -9999px;
	background: url(../common/img/header_cnt.jpg) no-repeat left top;
}

header ul li#btn_cnt a:hover {
	background-position: -135px 0;
	}

/*------------------ nav ------------------*/

nav {
	clear: both;
}

nav ul{
	display: table;
	width: 100%;
	height: 70px;
	background-color: #9dc400;
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;
border-radius: 10px;
}

nav ul li{
	display: table-cell;
	font-weight: bold;
	position: relative;
	font-size: 18px;
	padding: 3px 0;
}

nav ul li a{
	display: block;
	width: 100%;
	text-decoration: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
}

nav ul li a:hover{
	color: #fff;
	background-color: #bedb00;
	}


/*------------------ main_image ------------------*/

#slideshow {
margin: 0 0 20px;
    position:relative;
    height:320px;
}

#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
opacity:0.0;}

#slideshow img.active {
    z-index:10;
	opacity:1.0;
}

#slideshow img.last-active {
    z-index:9;
}



/*------------------ sub_image ------------------*/

#top h2 {
	background: url(../common/img/sub_img.jpg) no-repeat center;
	width: 960px;
	height: 270px;
	text-indent:-9999px;
	display: block;
	margin: 0 auto 40px;
}


/*------------------ main ------------------*/


#content {
	width: 980px;
	text-align: center;
	margin: 0 auto;
}

#content #infoarea {
	width: 980px;
	margin: 0 0 30px;
	padding-bottom: 20px;
}

#content #infoarea #info_event {
	float: left;
	width: 460px;
	margin-right: 60px;
}
#content #infoarea #info_event p {
	background: url(../common/img/title_event.gif) no-repeat;
	width: 460px;
	height: 40px;
	text-indent: -9999px;
	}
#content #infoarea #info_community {
	float: left;
	width: 460px;

}
#content #infoarea #info_community p {
	background: url(../common/img/title_community.gif) no-repeat;
	width: 460px;
	height: 40px;
	text-indent: -9999px;
	}

.infobox {
	width: 460px;
	height: 270px;

}


.infobox ul {
	padding: 10px;
	text-align: left;
	overflow-y: auto;
}

.infobox ul li {
	margin-bottom: 10px;
	color: #999;
	clear: both;
	}
.infobox ul li img {
	padding: 0px 20px 10px 0;
	float: left;
	}

.infobox ul li a:hover img {
	 opacity: 0.7;
	}


.infobox ul li p {
	padding: 10px;
	float: left;
	margin-bottom: 3px;
	color: #999;
	}



/*------------------ sub ------------------*/

#sub {
	clear: both;
	width: 980px;
	height: 292px;
	margin-bottom: 30px;
	padding-top: 20px;
	}

#sub ul#banner {
	float: left;
	width: 270px;
 }

#sub ul#banner li#banner1,
#sub ul#banner li#banner2,
#sub ul#banner li#banner3{
	float: left;
	width: 270px;
 }


#sub ul#banner li a {
	margin-bottom: 15px;
	width: 270px;
	text-indent: -9999px;
	display: block;
	}

#sub ul#banner li#banner1 a {
	background: url(../common/img/banner1.jpg) no-repeat left top;
	height: 76px;
}
#sub ul#banner li#banner2 a {
	background: url(../common/img/banner2.jpg) no-repeat left top;
	height: 76px;
}
#sub ul#banner li#banner3 a{
	height: 76px;
        width: 270px;
	background: url(../common/img/banner3.jpg) no-repeat left top;
}
#sub ul#banner li#banner_sapporo a{
	height: 94px;
	background: url(../common/img/banner_sapporo.jpg) no-repeat left top;
}
#sub ul#banner li#banner_akaihane a{
	height: 57px;
	background: url(../common/img/banner_akaihane.jpg) no-repeat left top;
}

#sub ul#banner li#banner1 a:hover,
#sub ul#banner li#banner2 a:hover,
#sub ul#banner li#banner3 a:hover {
	background-position: 0 -76px;
}

#sub ul#banner li#banner_sapporo a:hover,
#sub ul#banner li#banner_akaihane a:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

#sub #snsarea {
	width: 700px;
	height: 292px;
	float: right;
}

#sub #snsarea .snsbox {
	width: 330px;
	height: 260px;
	padding-top: 32px;
	float: left;
	margin: 0 0 0 20px;
	}

#facebook {
	background: url(../common/img/facebook.jpg) no-repeat;
	width: 330px;
	height: 292px;
	}

ul#btnarea {
	float: left;
	width: 330px;
	height: 260px;
	margin: 0 0 0 20px;
}

ul#btnarea li#btn1 {
	margin-bottom: 15px;
}
ul#btnarea li#btn2 {
}

ul#btnarea li#btn1 a {
	width: 330px;
	height: 130px;
	display: block;
	background: url(../common/img/btn1.jpg) no-repeat left top;
	text-indent: -9999px;
	}

ul#btnarea li#btn2 a {
	width: 330px;
	height: 105px;
	display: block;
	background: url(../common/img/btn2.jpg) no-repeat left top;
	text-indent: -9999px;
	}

ul#btnarea li#btn1 a:hover,
ul#btnarea li#btn2 a:hover {
	background-position: -330px 0;
	}



/*------------------ side ------------------*/

#side {
	width: 270px;
	float: left;
}

#side ul {
	width: 270px;
	magin-top: 20px;
	magin-bottom: 20px;
}

#side ul li{
	margin-bottom: 15px;
}

#side ul li a{
	width: 270px;
	display: block;
	text-indent: -9999px;
}

#side ul li#banner1 a{
	height: 76px;
	background: url(../common/img/banner1.jpg) no-repeat left top;
}

#side ul li#banner2 a{
	height: 76px;
	background: url(../common/img/banner2.jpg) no-repeat left top;
}
#side ul li#banner3 a{
	height: 76px;
	background: url(../common/img/banner3.jpg) no-repeat left top;
}

#side ul li#banner1 a:hover,
#side ul li#banner2 a:hover,
#side ul li#banner3 a:hover {
	background-position: 0 -76px;
}


/*------------------ article ------------------*/

article {
	width: 670px;
	float: right;
}

article h2 {
	width: 670px;
	height: 220px;
	text-indent: -9999px;
	margin-bottom: 20px;
	}

article section {
	width: 670px;
	text-align: center;
	clear: both;
	margin-bottom: 30px;
}

article section h3 {
	width: 670px;
	height: 43px;
	background: url(../common/img/h3_titlebar.gif) no-repeat;
	text-align: left;
	padding-left: 20px;
	line-height: 40px;
	letter-spacing: 2px;
	font-size: 20px;
	font-weight: normal;
	color: #FFF;
	margin-bottom: 20px;
}


article section .box {
clear: both;
	width: 650px;
	text-align: left;
	padding: 0 10px;
	margin: 0 0 40px;
	}

article section .box .photo_r {
	float: right;
	margin: 0 0 20px 20px;
	}
article section .box .photo_l {
	float: left;
	margin: 0 20px 20px 0;
	}

article section .box p {
	margin-bottom: 20px;
	}

/*------------------ googlecalender ------------------*/

article section .googlecal {
 width: 670px;
	height: 600px;
	padding-bottom: 10px;
}

article section .googlecal iframe {
	width: 670px;
 	height: 600px;
	overflow:  hidden;
	background-color: transparent;
}


/*------------------ pagetop ------------------*/

.pt {
	clear: both;
	text-align: right;
	}

/*------------------ footer ------------------*/

#bottom {
	clear: both;
	height: 230px;
	background-color: #BAD001;
	margin-top: 30px;
	text-align: center;
 }

#bottom footer {
	width: 1000px;
	height: 230px;
	margin: 0 auto;
	}

#bottom footer p {
	width: 330px;
	height: 75px;
	float: left;
	padding-top: 30px;
}

#bottom footer p#footer_logo {
	float: left;
	width: 330px;
	height: 55px;
}

#bottom footer p a {
	background: url(../common/img/footer_logo.jpg) no-repeat;
	display: block;
	text-indent: -9999px;
	width: 330px;
	height: 65px;
}
#bottom footer ul {
	float: left;
	padding-top: 30px;
	padding-left:65px;
	text-align: left;

	}
#bottom footer ul li a {
	color:#F5FF9B;
	margin-bottom: 5px;
	}

#bottom footer ul li a:hover {
	color:#FFF;
	}

#bottom footer small {
	display: block;
	clear: both;
	padding-top: 30px;
	width: 1000px;
	text-align: right;
	color: #fff;
	}


/*------------------ pagetop ------------------*/

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
#page-top a {
    background: #3A9E18;
    text-decoration: none;
    color: #fff;
    width: 80px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #40AF1B;
}