@charset "utf-8";
/* CSS Document */
#cal_inner{
	padding: 5px 0 0;
}
h2{
	padding: 10px 0 0;
}
.block{
	padding: 10px 0 0;
}
.monthbox{
	padding: 10px 0;
	width: 310px;
}
.monthbox_l{
	float: left;
}
.monthbox_r{
	float: right;
}
.monthbox_inner{
	height: 270px;
	background: url("/assets/img/landing/cal/bg_box.png") no-repeat left top;
}
	.monthbox_inner h3{
		line-height: 40px;
		text-align: center;
		color: #fff;
		text-decoration: underline;
	}
		.monthbox_inner h3 span{
			cursor: pointer;
		}
	.monthbox_inner .monthbox_content{
		padding: 20px 0 0 10px;
	}
		.monthbox_inner .monthbox_content .item{
			float: left;
			width: 150px;
			height: 170px;
			background: url("/assets/img/landing/cal/bg_photo.png") no-repeat left top;
		}
		.monthbox_inner .monthbox_content .item .photo{
			padding: 5px 5px 0;
		}
		.monthbox_inner .monthbox_content .item p{
			padding: 0 10px 0 0;
			text-align: center;
			line-height: 35px;
			font-size: 12px;
		}

#detailbox{
	display: none;
	margin: 0 auto;
	width: 660px;
	background: #fff;
	position:absolute;
	top:100px;
	left:50%;
	display:none;
	z-index:300;
	border:1px solid #CCCCCC;
	margin-left:-330px;
}

/* Lightbox表示時に背景を黒に */
#blackwindow{
	display:none;
	background:#000000;
	opacity:0.7;/*黒地の背景の調整はこの数値で調整*/
	filter:alpha(opacity=70);/*黒地の背景の調整はこの数値で調整*/
	position:fixed;
	top:0px;
	left:0px;
	min-width:100%;
	min-height:100%;
	z-index:200;
}

	#detailbox #detailbox_inner{
		padding: 10px;
	}
	#detailbox #headbtn{
		text-align: right;
	}
	#detailbox .detail_wap{
		margin: 0 auto;
		padding: 17px 0 40px;
		width: 630px;
	}
	#detailbox #detailtitle h3{
		padding: 0 10px;
		background: url("/assets/img/landing/cal/bg_month.png") no-repeat left top;
		line-height: 42px;
		color: #fff;
		font-size: 16px;
	}

		#detailcontent .itemblock{
			padding: 11px 0 0;
		}
		#detailcontent .itemblock_inner{
			height: 450px;
			background: url("/assets/img/landing/cal/bg_itemdetail.png") no-repeat left top;
		}
		#detailcontent .bg510{
			height: 510px;
			background: url("/assets/img/landing/cal/bg_itemdetail510.png") no-repeat left top;
		}

			#detailcontent .itemblock_inner .clearfix{
				padding: 20px 20px 0;
			}
		#detailcontent .leftarea{
			float: left;
			width: 278px;
		}
			#detailcontent .leftarea .photo{
				padding: 5px 13px 13px 5px;
				background: url("/assets/img/landing/cal/bg_img_b.png") no-repeat left top;
			}
		#detailcontent .rightarea{
			float: right;
			width: 303px;
		}
			#detailcontent .rightarea h4{
				padding: 0 7px;
				height: 33px;
				line-height: 25px;
				background: url("/assets/img/landing/cal/bg_itemborder.png") no-repeat left bottom;
				font-size: 16px;
			}
		#detailcontent .bottomarea{
			padding: 0 20px 20px;
		}
		#detailcontent .dataarea{
			padding: 13px 0 0 0;
		}
		#detailcontent .databox{
			padding: 5px 0 0 0;
		}
		#detailcontent .databox p{
			padding: 5px 0 0 1px;
			font-size: 12px;
		}
	#detailbox #footbtn{
		padding-bottom: 17px;
		text-align: center;
	}
	.closewindow:hover{
		opacity:0.7;
		filter:alpha(opacity=70);
		cursor: pointer;
	}

@media screen and (max-width: 500px){

#main {
    float: none;
    width: 100%;
    margin: 0 auto;
	padding: 0;
}
ul#pankuzu {
    font-size: 50%;
    margin-top: 0.5em;
}
ul#pankuzu li {
    display: inline;
}

.monthbox_l {
    float: none;
}
.monthbox_r {
    float: none;
}
.monthbox {
    padding: 0;
    width: 100%;
}
.monthbox{
	padding: 0;
	width: 100%;
}
.monthbox_l{
	float: none;
}
.monthbox_r{
	float: none;
}
.monthbox_inner{
	height: auto;
	width: 90%;
	margin: 0 auto 2em;
	background: linear-gradient(180deg, rgba(255,136,0,1) 0%, rgba(255,136,0,1) 21%, rgba(255,255,255,1) 22%, rgba(255,255,255,1) 100%);
	border-radius: 10px 10px 0 0;
}
	.monthbox_inner h3{
		line-height: 40px;
		text-align: center;
		color: #fff;
		text-decoration: none;
	}
	.monthbox_inner .monthbox_content{
		padding: 0;
	}
		.monthbox_inner .monthbox_content .item{
			float: left;
			width: calc(100%/2);
			height: auto;
			background: #fff;
			text-align: center;
		}
		.monthbox_inner .monthbox_content .item .photo{
			padding: 5%;
		}
		.monthbox_inner .monthbox_content .item .photo img{
			width: 100%;
			max-width: 100vw;
		}
		.monthbox_inner .monthbox_content .item p{
			padding: 0;
			text-align: center;
			line-height: 35px;
			font-size: 12px;
		}

}