﻿@charset "utf-8";  
/*------------------------------------------------------------ 
    TOP css
------------------------------------------------------------*/  

/* slide */

#slideArea{
	width:100%;
	height:440px;
	margin-bottom:30px;
	position:relative;
	overflow:hidden;
}

.slide-btn{
	width:45px;
	height:71px;
	position:absolute;
	top:185px;
	z-index:30;
}

.slide-btn a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:71px;
	background:#0066cc;
}

#headline{
	width:642px;
	height:35px;
	position:absolute;
	top:247px;
	left:191px;
	z-index:5;
}

#prevBtn{ left:0;}
#nextBtn{ right:0;}

#pager{
	width:100%;
	height:13px;
	text-align:right;
	position:absolute;
	right:20px;
	bottom:20px;
	z-index:30;
}

#pager a{
	display:inline-block;
	width:13px;
	height:13px;
	margin-left:10px;
	background:url(../img/icon-circle.png) no-repeat -13px 0;
}

#pager a:hover,
#pager .activeSlide{
	background-position:0 0;
}

#leftColumn{
	width:680px;
	float:left;
	overflow:hidden;
}

#rightColumn{
	width:312px;
	float:right;
	overflow:hidden;
}

#rightColumn-inner{ width:312px;}

/*------------------------------------------------------------ 
    left column
------------------------------------------------------------*/  

.section{
	width:100%;
	overflow:hidden;
}

.section h2{
	float:left;
	line-height:30px;
	font-size:175%;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
}

.section .blue{
	color:#0066cc;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
}

.section p{
	width:200px;
	height:30px;
	float:right;
}

.section a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:30px;
	color:#fff;
	font-weight:bold;
	background:#0066cc;
	border-radius:3px;
}

.section a:hover{ background:#34495E;}

/* NEWS */

#newsList{ margin:10px 0 45px;}

#newsList li{
	width:100%;
	padding:15px 0;
	border-bottom:1px solid #ECF0F1;
	overflow:hidden;
}

.date{
	width:100px;
	float:left;
	color:#666;
	line-height:20px;
}

.ttl{
	width:580px;
	float:left;
}

.ttl a{
	color:#0066cc;
	font-size:125%;
	font-weight:bold;
	line-height:20px;
}

.ttl a:hover{ color:#34495E;}

#eventList-pickup{
	margin:25px 0;
	min-height:360px;
}

#eventList-pickup > li{
	width:680px;
	overflow:hidden;
}

#eventList-pickup ul{
	width:726px;
	overflow:hidden;
}

#eventList-pickup ul li{
	width:196px;
	min-height:360px;
	float:left;
	margin-right:23px;
	padding-right:22px;
	border-right:1px solid #ECF0F1;
}

#eventList-pickup a{
	display:block;
	width:100%;
	height:100%;
}

.icon-wrap{
	width:100%;
	letter-spacing:-0.4em;
}

.venue{
	display:inline-block;
	width:196px;
	text-align:center;
	line-height:20px;
	padding:3px 0;
	margin-bottom:6px;
	font-weight:bold;
	color:#333;
	background:#F2C311;
	letter-spacing:normal;
}

.event-ttl{
	padding:4px 0 10px;
	font-size:117%;
	color:#666;
	font-weight:bold;
}


.recommend{
	display:inline-block;
	width:80px;
	height:26px;
	text-align:center;
	line-height:26px;
	font-weight:bold;
	color:#fff;
	background:#E60012;
	letter-spacing:normal;
}

.event-date{ color:#333;}

a:hover .event-ttl{ color:#0066cc;}

#pager2{
	width:100%;
	height:13px;
	margin-top:27px;
	text-align:right;
}

#pager2 a{
	display:inline-block;
	width:13px;
	height:13px;
	margin-left:10px;
	background:url(../img/icon-circle.png) no-repeat -26px 0;
}

#pager2 a:hover,
#pager2 .activeSlide{ background-position:0 0;}


/* TODAY'S EVENTS */

.eventList li{
	width:100%;
	border-bottom:1px solid #ECF0F1;
}

.eventList a{
	display:block;
	width:100%;
	overflow:hidden;
	padding:15px 0;
}

.thumb{
	width:100%;
	height:100%;
	max-height:196px;
	position:relative;
}

.thumb:before{
	display:none;
	content:"";
	width:100%;
	height:100%;
	background:url(../common/img/img-rollover.png) no-repeat 50% 50%;
	background-color:rgba(0,102,204,.7);
	position:absolute;
	top:0;
	left:0;
}

a:hover .thumb:before{ display:block;}

.detail{
	width:532px;
	float:right;
}

.detail .venue{
	width:220px;
	margin:0 6px 6px 0;
}

.detail .event-ttl{ font-size:125%;}

.eventList .thumb{
	float:left;
	width:120px;
	height:120px;
}

#bannerList{
	width:705px;
	overflow:hidden;
	margin-top:45px;
}

#bannerList li{
	width:210px;
	height:60px;
	float:left;
	margin:0 25px 25px 0
}

/*------------------------------------------------------------ 
    right column
------------------------------------------------------------*/  

#topRequestBtn{
	display:block;
	padding:10px 15px 15px;
	margin-bottom:12px;
	color:#fff;
	background:#0066cc url(../img/icon-arrow.png) no-repeat right 15px top 23px;
}

#topRequestBtn:hover{ background-color:#34495E;}

#topRequestBtn dt{
	font-size:125%;
	line-height:34px;
	font-weight:bold;
	padding:6px 0 0 52px;
	background:url(../img/icon-request.png) no-repeat 0 50%;
}

#topRequestBtn dd{
	border-top:1px solid #fff;
	padding-top:15px;
	margin-top:15px;
	font-size:117%;
}

#topInfo{
	width:auto;
	padding:15px;
	margin-bottom:12px;
	color:#fff;
	font-size:117%;
	background:#0066cc;
}

.sideList{
	width:324px;
	overflow:hidden;
}

.sideList li{
	width:150px;
	height:150px;
	float:left;
	margin:0 12px 12px 0;
}

.topBtnArea{
	width:100%;
	margin:5px 0 15px;
	overflow:hidden;
}

.topBtnArea li{
	width:150px;
	height:50px;
}

.topBtnArea .chikahomap{
	width:100%;
	margin-bottom:12px;
}

.topBtnArea .link{ float:left;}
.topBtnArea .sitemap{ float:right;}

.topBtnArea a{
	display:block;
	width:auto;
	height:100%;
	padding-left:54px;
	line-height:50px;
	color:#333;
	font-size:109%;
	background:no-repeat #ECF0F1;
	position:relative;
}

.topBtnArea a:hover{
	color:#fff;
	background-color:#0066cc;
}

.topBtnArea a:before{
	display:block;
	content:"";
	width:30px;
	height:30px;
	background:url(../common/img/icons.png) no-repeat;
	position:absolute;
	left:18px;
	top:12px;
}

.topBtnArea .chikahomap a:before{ background-position:-336px 0;}
.topBtnArea .link a:before{ background-position:-366px 0;}
.topBtnArea .sitemap a:before{ background-position:-396px 0;}

.topBtnArea .chikahomap a:hover:before{ background-position:-336px -30px;}
.topBtnArea .link a:hover:before{ background-position:-366px -30px;}
.topBtnArea .sitemap a:hover:before{ background-position:-396px -30px;}



/*

.topBtnArea .link a{ background-position:0 -50px;}
.topBtnArea .link a:hover{ background-position:-150px -50px;}

.topBtnArea .sitemap a{ background-position:0 0;}
.topBtnArea .sitemap a:hover{ background-position:-150px 0;}

.topBtnArea .chikahomap a:hover{ background-position:0 -50px;}
*/

/* カレンダー */

#calendar{
	width:284px;
	padding:0 13px;
	margin-top:15px;
	border:1px solid #ccc;
}

#calendarHd{
	width:284px;
	overflow:hidden;
	padding:20px 0 12px;
	border-bottom:1px solid #ccc;
}

#calendarHd h3{
	width:164px;
	height:20px;
	line-height:20px;
	float:left;
	text-align:center; 
	font-size:125%;
	font-weight:bold;
	color:#0066cc;
}

#prevMonth{
	width:60px;
	height:20px;
	float:left;
}

#nextMonth{
	width:60px;
	height:20px;
	float:right;
}

#prevMonth a{
	display:block;
	width:40px;
	height:100%;
	line-height:20px;
	padding-left:20px;
	font-size:117%;
	color:#0066cc;
	font-weight:bold;
	background:url(../img/icon-prev.png) no-repeat left 50%;
}

#nextMonth a{
	display:block;
	width:40px;
	height:100%;
	text-align:right;
	line-height:20px;
	padding-right:20px;
	font-size:117%;
	color:#0066cc;
	font-weight:bold;
	background:url(../img/icon-next.png) no-repeat right 50%;
}

#calendar table{
	width:100%;
    border-spacing: 1px;
	border-collapse: separate;
}

#calendar th,
#calendar td{
	width:40px;
	height:40px;
	text-align:center;
	vertical-align:middle;
	font-size:125%;
	font-weight:bold;
	color:#333;
}

#calendar .sun{ color:#CC0000;}
#calendar .event a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:40px;
	font-weight:bold;
	color:#fff;
	background:#0066cc;
}
#calendar .next{ color:#ccc;}

#calendarMenu{
	width:100%;
	margin-top:10px;
	padding:15px 0;
	overflow:hidden;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

#calendarMenu li{
	height:20px;
	line-height:20px;
}

.menu-event{
	float:left;
	padding-left:28px;
	font-size:117%;
	position:relative;
}

.menu-event:before{
	display:block;
	content:"";
	width:20px;
	height:20px;
	background:url(../img/icon-event.png) no-repeat;
	position:absolute;
	left:0;
	top:0;
}

.menu-more{ float:right;}

.menu-more a{
	display:block;
	height:100%;
	line-height:20px;
	padding-right:25px;
	color:#0066cc;
	font-size:117%;
	font-weight:bold;
	background:url(../img/button-calendar.png) no-repeat right;
}

#fbArea{
	height:500px;
	margin-bottom:15px;
	background:url(../common/img/loading.gif) no-repeat 50% 50%;
}



