/* ===================================================================
CSS information
 file name  : calendar
 author     : honyaclub.com
 date       : 20170921
 update     : 20181016
 about      : calendar
=================================================================== */

@charset "shift_jis";

/*キーワード検索*/
form#quicksearch{text-align:center;margin:0.2rem 0;width: 100%;background-color: #F5E4B9;padding: 10px 0;}
input#id_search{width:23rem; height:1.8rem;}

/*カテゴリー＆ジャンル検索*/
.calendar2018 #cale-search {
	width: 100%;
	background-color:#F5E4B9;
	padding: 10px 0;
}
.calendar2018 #cale-search p{
	text-align: left;
	margin: 1rem 0.5rem 0;
}
.calendar2018 #cale-search span,#quicksearch span{
	font-weight:bold;
	display: inline-block;
	font-size: 120%;
	margin-left: 0.5rem;
}
.calendar2018 #cale-search select{
	vertical-align: middle;
	height:30px;
	width: 180px;
}
.calendar2018 #cale-search #calendar-button{
	display: inline-block;
	margin-left: 30px;	
}
.calendar2018 #cale-item ul li {
    width: 134px;
    text-align: center;
    line-height: 1.3;
    margin: 10px 10px 20px;
    display: inline-block;
    vertical-align: top;
}



.calendar2018 #cale-item ul dl dd.calender_img {
    width: 50rem;
    height: 134px;
    border: 1px dotted #64b22a;
    display: table-cell;
    vertical-align: middle;
    position: relative;
	background-color:#FFFFFF;
}

.calendar2018 #cale-item ul dl dd.calender_img img{
	max-height: 120px;
    max-width: 120px;
}

/*==========  Smt  ==========*/
@media screen and (max-width:750px){
	#contents-container.calendar2018 h1{
		max-width: 750px;
		width: 100%;
	}
	#contents-container.calendar2018 h1 img{
		width: 100%;
	}
	
/*キーワード検索用*/
input#id_search{width: 22rem;height: 3.5rem;}

/*カテゴリー＆ジャンル検索*/
.calendar2018 #cale-search select{
	height:40px;
	width: 65%;
	display: inline-block;
	margin:0 auto 10px;
}
.calendar2018 #cale-search p{
	font-size:0.5rem;
}
.calendar2018 #cale-search #calendar-button{
	font-size:120%;
	display: block;
	margin: auto;
	width: 120px;
	height:40px;
}
.calendar2018 #cale-item ul{
    margin:auto;
}
.calendar2018 #cale-item ul li{
	width:45%;
    margin:10px 2%;
}

.calendar2018 #cale-item ul dl{
	width: 100%;
	text-align: center;
	}
.calendar2018 #cale-item ul dl dd.calender_img img {
	vertical-align: middle;
	}
}