@charset "utf-8";

#calender { width: 100%; max-width: 1100px; margin: 50px auto 0; }
#calender .header { position: relative; text-align: center; padding-bottom: 20px; }
#calender .header .titleBlock { margin-top: 0; }
#calender .header .month { font-size: 2.4rem; color: #36504e; }
#calender.table .header .month { color: #d1af90; }

#calender .header .prev { position: absolute; left: 50px; top: 67%; margin-top: 0px; }
#calender .header .prev a { display: block; }
#calender .header .prev span { position: absolute; top: 50%; right: -13px; display: block; width: 30px; height: 30px; border-radius: 50%; margin-top: -15px; background-color: #36504e; -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2); box-shadow: 3px 3px 5px rgba(0,0,0,0.2); }
#calender.table .header .prev span { background-color: #d1af90; }
#calender .header .prev span:before { position: absolute; top: 1px; right: 1px; display: block; content: ''; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background-color: transparent; }
#calender .header .prev span:after  { position: absolute; display: block; content:''; top: 50%; left: 50%; width: 0; height: 0; margin: -4px 0 0 -7px; border: 4px solid transparent; border-right: 5px solid #fff; -webkit-transition: all .2s; transition: all .2s; }
#calender .header .prev a:hover span:after { left: 40%; }

#calender .header .next { position: absolute; right: 50px; top: 67%; margin-top: 0px; }
#calender .header .next a {  display: block; }
#calender .header .next span { position: absolute; top: 50%; left: -13px; display: block; width: 30px; height: 30px; border-radius: 50%; margin-top: -15px; background-color: #36504e; -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2); box-shadow: 3px 3px 5px rgba(0,0,0,0.2); }
#calender.table .header .next span { background-color: #d1af90; }
#calender .header .next span:before { position: absolute; top: 1px; left: 1px; display: block; content: ''; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background-color: transparent; }
#calender .header .next span:after  { position: absolute; display: block; content:''; top: 50%; left: 50%; width: 0; height: 0; margin: -4px 0 0 -1px; border: 4px solid transparent; border-left: 5px solid #fff; -webkit-transition: all .2s; transition: all .2s; }
#calender .header .next a:hover span:after { left: 60%; }

#calender table { width: 90.909090%; margin: 0 auto; border-collapse: collapse; }
#calender table th { width: 14.285714%; height: 70px; padding: 6px; text-align: left; vertical-align: top; color: #5c5c5c; text-align: center; font-size: 1.8rem;  font-weight: normal; text-transform: uppercase; }
#calender table td { width: 14.285714%; height: 173px; padding: 6px; background-color: #fff; border-top: 1px solid #36504e; font-size: 1.8rem; vertical-align: top; }
#calender.table table td { border-top-color: #d1af90; }

#calender table td div { display: block; width: 100%; }
#calender table td p { line-height: 3.5rem; }
#calender table td a { display: block; width: 130px; padding-left: 4px; background-color: #999; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.4rem; color: #fff; -webkit-transition: all .3s; transition: all .3s; }
#calender table td a:hover { filter: alpha(opacity=60); -moz-opacity:0.60; opacity:0.60; }
#calender table td a + a { margin-top: 3px; }

#calender table td a.event  { background-color: #643328; }/*TABLE EVENTS： イベント　営業時間　休日　その他*/
#calender table td a.open   { background-color: #b2825a; }
#calender table td a.holyday { background-color: #d1af90; }
#calender table td a.other { background-color: #526374; }

#calender table td a.sports  { background-color: #643328; }/*COURT EVENTS： スポーツ利用　撮影利用　発表会利用　その他*/
#calender table td a.photo   { background-color: #b2825a; }
#calender table td a.session { background-color: #d1af90; }
#calender table td a.other { background-color: #526374; }

/*
#643328 散走 stroll
#b2825a イベント event
#d1af90 貸切 charter
#526374 休日 holyday
*/

#calender .cateColor { width: 90.90909%; margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; }
#calender .cateColor li { margin-left: 30px; height: 16px; line-height: 16px; }
#calender .cateColor li:before { display: inline-block; margin-right: 14px; content:''; background-color: #eee; width: 16px; height: 16px; vertical-align: top; }

#calender .cateColor li.event:before  { background-color: #643328; }/*TABLE EVENTS： イベント　営業時間　休日　その他*/
#calender .cateColor li.open:before   { background-color: #b2825a; }
#calender .cateColor li.holyday:before { background-color: #d1af90; }
#calender .cateColor li.other:before { background-color: #526374; }

#calender .cateColor li.sports:before  { background-color: #643328; }/*COURT EVENTS： スポーツ利用　撮影利用　発表会利用　その他*/
#calender .cateColor li.photo:before   { background-color: #b2825a; }
#calender .cateColor li.session:before { background-color: #d1af90; }
#calender .cateColor li.other:before { background-color: #526374; }

#eventList { width: 1000px; margin: 10px auto 140px; min-height: 400px; }
#eventList .posts ul li .cate {}

#eventList .posts ul li .cate.event   { background-color: #643328; }/*TABLE EVENTS： イベント　営業時間　休日　その他*/
#eventList .posts ul li .cate.open    { background-color: #b2825a; }
#eventList .posts ul li .cate.holyday { background-color: #d1af90; }
#eventList .posts ul li .cate.other   { background-color: #526374; }

#eventList .posts ul li .cate.sports  { background-color: #643328; }/*COURT EVENTS： スポーツ利用　撮影利用　発表会利用　その他*/
#eventList .posts ul li .cate.photo   { background-color: #b2825a; }
#eventList .posts ul li .cate.session { background-color: #d1af90; }
#eventList .posts ul li .cate.other   { background-color: #526374; }


.posts { width: 1000px; margin: 120px auto 120px; }
.posts .noPosts { width: 100%; text-align: center; height: 200px; margin-top: 100px; font-size: 1.6rem; }

.pageNav { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.pageNav li { width: 150px; text-align: right; }
.pageNav li a { text-decoration: none; }
.pageNav li.center { text-align: center; font-size: 2.4rem; color: #36504e; }
.table .pageNav li.center { color: #d1af90; }
.pageNav li.center + li { text-align: left; }

.pageNav li p { font-size: 1.4rem; height: 30px; line-height: 30px; }
.pageNav li .prev { }
.pageNav li .prev a { display: block; }
.pageNav li .prev span { position: relative; display: inline-block; width: 30px; height: 30px; border-radius: 50%; margin-right: 17px; background-color: #36504e; vertical-align: top; -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2); box-shadow: 3px 3px 5px rgba(0,0,0,0.2); }
.table .pageNav li .prev span { background-color: #d1af90; }
.pageNav li .prev span:before { position: absolute; top: 1px; right: 1px; display: block; content: ''; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background-color: transparent; }
.pageNav li .prev span:after  { position: absolute; display: block; content:''; top: 50%; left: 50%; width: 0; height: 0; margin: -4px 0 0 -7px; border: 4px solid transparent; border-right: 5px solid #fff; -webkit-transition: all .2s; transition: all .2s; }
.pageNav li .prev a:hover span:after { left: 40%; }

.pageNav li .next { }
.pageNav li .next a {  display: block; }
.pageNav li .next span { position: relative;  display: inline-block; width: 30px; height: 30px; border-radius: 50%; margin-left: 17px; background-color: #36504e; vertical-align: top; -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2); box-shadow: 3px 3px 5px rgba(0,0,0,0.2); }
.table .pageNav li .next span { background-color: #d1af90; }
.pageNav li .next span:before { position: absolute; top: 1px; left: 1px; display: block; content: ''; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background-color: transparent; }
.pageNav li .next span:after  { position: absolute; display: block; content:''; top: 50%; left: 50%; width: 0; height: 0; margin: -4px 0 0 -1px; border: 4px solid transparent; border-left: 5px solid #fff; -webkit-transition: all .2s; transition: all .2s; }
.pageNav li .next a:hover span:after { left: 60%; }

@media screen and (max-width: 767px) {
	
	#calender .header { width: 320px; margin: 0 auto; }
	#calender .header .month img { width: 47px; }
	#calender .header nav p img { width: 40px; }
	#calender .header .prev { left: 0; }
	#calender .header .next { right: 0; }
	#calender .header nav p.prev span { margin-top: -30px; }
	#calender .header nav p.next span { margin-top: -30px; }
	
	#calender table { width: 320px; }
	#calender table th { font-size: 1.2rem; padding: 1.5px; height: 64px; }
	#calender table td { font-size: 1.2rem; padding: 1.5px; height: 99px; }
	#calender table td a { font-size: 1.2rem; width: 41px; padding-left: 2px; padding: 0;  }
	#calender table td a { text-overflow: clip; text-overflow: '.'; }
	
	#calender .cateColor { width: 320px; margin: 0 auto; }
	#calender .cateColor li { font-size: 1.3rem; height: 13px; line-height: 13px; margin-left: 15px; }
	#calender .cateColor li:before { width: 8px; height: 8px; vertical-align: middle; }
	
	#mainContent .cont { margin: 30px auto 30px; }
	
	#eventList { width: 320px; margin: 10px auto 70px; min-height: 400px; }
	.pageNav li { width: 33.33%; height: 30px; line-height: 30px; }
	.pageNav li p { font-size: 1.3rem; }

	
	
}