@charset "utf-8";

/* ---------------------------------- */
/*				時間割				  */
/* ---------------------------------- */
#main.event {
	background-image: url(../../event/img/bg.png);
	background-repeat: repeat;
}

.mv {
	margin: 0 0 60px 0;
}

.mv h1 {

}

.mv h1 img {
	width: 100%;
}

.mv h1 img.sp {
	display: none;
}

@media screen and (max-width: 768px) {
	.mv h1 img {
		display: none;
	}
	.mv h1 img.sp {
		display: block;
	}
}

.note {
	text-align: left;
	width: 1000px;
	margin: 0 auto;
	padding: 0 0 40px 0;
}

.month {
	width: 1000px;
	margin: 0 auto 40px auto;
}

.month:after {
	content: "";
	clear: both;
	display: block;
}

.month .title {
	width: 334px;
	height: 333px;
	float: left;
	position: relative;
}

.month .title .desc {
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
	font-weight: bold;
}

.month .title .desc table {
	margin: 0 auto;
}

.month .title .desc table th {
	text-align: right;
}

.month .title .desc table td {
	text-align: left;
	padding: 0 0 0 20px;
}

.month .title .desc table th.ct {
	text-align: center;
}

@media screen and (max-width: 768px) {
	.month .title .desc {
		font-size: 14px;
	}
	.note {
		text-align: left;
		line-height: 1.5;
		width: 95%;
		margin: 0 auto;
		padding: 0 0 30px 0;
	}
	.month {
		width: 95%;
		margin: 0 auto 30px auto;
	}
	.month .title {
		width: 100%;
		height: 90vw;
		float: left;
		position: relative;
	}
}

.month.c1 .title {
	background-color: #37c271;
}

.month.c2 .title {
	background-color: #00b2fa;
}

.month.c3 .title {
	background-color: #efc008;
}

.month.c4 .title {
	background-color: #f7729c;
}

.month .title h2 {
	text-align: center;
}

.month .title h2:after {
	content: "";
	bottom: 18px;
	left: 149px;
	width: 37px;
	height: 5px;
	background-color: #fff;
	display: block;
	position: absolute;
}

@media screen and (max-width: 768px) {
	.month .title h2:after {
		content: "";
		bottom: 18px;
		left: 40vw;
		width: 10vw;
		height: 5px;
		background-color: #fff;
		display: block;
		position: absolute;
	}
}

.month.m4 .title h2 {
	padding: 14px 0 35px 0;
	position: relative;
}

.month.m4 .title h2 img {
	width: 164px;
}

.month.m5 .title h2 {
	padding: 66px 0 35px 0;
	position: relative;
}

.month.m5 .title h2 img {
	width: 159px;
}

.month.m6 .title h2 {
	padding: 65px 0 35px 0;
	position: relative;
}

.month.m6 .title h2 img {
	width: 161px;
}

.month.m7 .title h2 {
	padding: 55px 0 35px 0;
	position: relative;
}

.month.m7 .title h2 img {
	width: 133px;
}

.month.m8 .title h2 {
	padding: 52px 0 35px 0;
	position: relative;
}

.month.m8 .title h2 img {
	width: 154px;
}

.month.m9 .title h2 {
	padding: 42px 0 35px 0;
	position: relative;
}

.month.m9 .title h2 img {
	width: 152px;
}

.month.m10 .title h2 {
	padding: 65px 0 35px 0;
	position: relative;
}

.month.m10 .title h2 img {
	width: 230px;
}

.month.m11 .title h2 {
	padding: 45px 0 35px 0;
	position: relative;
}

.month.m11 .title h2 img {
	width: 205px;
}

.month.m12 .title h2 {
	padding: 43px 0 35px 0;
	position: relative;
}

.month.m12 .title h2 img {
	width: 226px;
}

.month.m1 .title h2 {
	padding: 45px 0 35px 0;
	position: relative;
}

.month.m1 .title h2 img {
	width: 120px;
}

.month.m2 .title h2 {
	padding: 55px 0 35px 0;
	position: relative;
}

.month.m2 .title h2 img {
	width: 164px;
}

.month.m3 .title h2 {
	padding: 42px 0 35px 0;
	position: relative;
}

.month.m3 .title h2 img {
	width: 156px;
}

@media screen and (max-width: 768px) {
	.month.m4 .title h2 {
		padding: 4vw 0 35px 0;
		position: relative;
	}
	.month.m4 .title h2 img {
		width: 42%;
	}
	.month.m5 .title h2 {
		padding: 18vw 0 35px 0;
		position: relative;
	}
	.month.m5 .title h2 img {
		width: 42%;
	}
	.month.m6 .title h2 {
		padding: 18vw 0 35px 0;
		position: relative;
	}
	.month.m6 .title h2 img {
		width: 42%;
	}
	.month.m7 .title h2 {
		padding: 14vw 0 35px 0;
		position: relative;
	}
	.month.m7 .title h2 img {
		width: 34%;
	}
	.month.m8 .title h2 {
		padding: 11vw 0 35px 0;
		position: relative;
	}
	.month.m8 .title h2 img {
		width: 40%;
	}
	.month.m9 .title h2 {
		padding: 42px 0 35px 0;
		position: relative;
	}
	.month.m9 .title h2 img {
		width: 40%;
	}
	.month.m10 .title h2 {
		padding: 17vw 0 35px 0;
		position: relative;
	}
	.month.m10 .title h2 img {
		width: 62%;
	}
	.month.m11 .title h2 {
		padding: 12vw 0 35px 0;
		position: relative;
	}
	.month.m11 .title h2 img {
		width: 55%;
	}
	.month.m12 .title h2 {
		padding: 13vw 0 35px 0;
		position: relative;
	}
	.month.m12 .title h2 img {
		width: 61%;
	}
	.month.m1 .title h2 {
		padding: 12vw 0 35px 0;
		position: relative;
	}
	.month.m1 .title h2 img {
		width: 31%;
	}
	.month.m2 .title h2 {
		padding: 14vw 0 35px 0;
		position: relative;
	}
	.month.m2 .title h2 img {
		width: 43%;
	}
	.month.m3 .title h2 {
		padding: 11vw 0 35px 0;
		position: relative;
	}
	.month.m3 .title h2 img {
		width: 41%;
	}
}

.month .fig1 {
	width: 333px;
	float: left;
}

.month .fig1 img {
	width: 100%;
	display: block;
}

.month .fig1 img.sp {
	display: none;
}

.month .fig2 {
	width: 333px;
	float: left;
}

.month .fig2 img {
	width: 100%;
	display: block;
}

.month .fig2 img.sp {
	display: none;
}

.month .fig12 {
	width: 666px;
	float: left;
}

.month .fig12 img {
	width: 100%;
	display: block;
}

.month .fig12 img.sp {
	display: none;
}

@media screen and (max-width: 768px) {
	.month .fig1 {
		width: 100%;
		float: none;
	}
	.month .fig1 img {
		display: none;
	}
	.month .fig1 img.sp {
		display: block;
	}
	.month .fig2 {
		width: 100%;
		float: none;
	}
	.month .fig2 img {
		display: none;
	}
	.month .fig2 img.sp {
		display: block;
	}
	.month .fig12 {
		width: 100%;
		float: none;
	}
	.month .fig12 img {
		display: none;
	}
	.month .fig12 img.sp {
		display: block;
	}
}

.month .title .ico {
	display: block;
	position: absolute;
	z-index: 2;
}

.month .title .ico img {
	width: 100%;
}

.month.m4 .title .ico1 {
	top: 10px;
	right: 10px;
	width: 54px;
}

.month.m4 .title .ico2 {
	top: 110px;
	left: 20px;
	width: 46px;
}

.month.m5 .title .ico1 {
	top: 19px;
	left: 19px;
	width: 69px;
}

.month.m6 .title .ico1 {
	top: 20px;
	right: 22px;
	width: 52px;
}

.month.m6 .title .ico2 {
	left: 20px;
	bottom: 20px;
	width: 57px;
}

.month.m7 .title .ico1 {
	top: -20px;
	right: 0;
	width: 96px;
}

.month.m8 .title .ico1 {
	top: -11px;
	right: -10px;
	width: 90px;
}

.month.m9 .title .ico1 {
	top: -10px;
	right: -10px;
	width: 110px;
}

.month.m9 .title .ico2 {
	left: 12px;
	bottom: 95px;
	width: 82px;
}

.month.m10 .title .ico1 {
	left: 20px;
	bottom: 20px;
	width: 66px;
}

.month.m11 .title .ico1 {
	top: -10px;
	right: -6px;
	width: 69px;
}

.month.m12 .title .ico1 {
	top: -11px;
	right: 10px;
	width: 72px;
}

.month.m1 .title .ico1 {
	top: 20px;
	right: -11px;
	width: 95px;
}

.month.m1 .title .ico2 {
	left: 19px;
	bottom: 60px;
	width: 72px;
}

.month.m2 .title .ico1 {
	top: -12px;
	left: 10px;
	width: 70px;
}

.month.m3 .title .ico1 {
	top: 20px;
	right: 20px;
	width: 60px;
}

@media screen and (max-width: 768px) {
	.month.m4 .title .ico1 {
		top: 5vw;
		right: 5vw;
		width: 8%;
	}
	.month.m4 .title .ico2 {
		top: auto;
		left: 5vw;
		bottom: 5vw;
		width: 8%;
	}
	.month.m5 .title .ico1 {
		top: 5vw;
		left: 5vw;
		width: 14%;
	}
	.month.m6 .title .ico1 {
		top: 5vw;
		right: 5vw;
		width: 12%;
	}

	.month.m6 .title .ico2 {
		left: 5vw;
		bottom: 5vw;
		width: 13%;
	}
	.month.m7 .title .ico1 {
		top: -5vw;
		right: 5vw;
		width: 18%;
	}
	.month.m8 .title .ico1 {
		top: -2vw;
		right: -1vw;
		width: 20%;
	}
	.month.m9 .title .ico1 {
		top: 5vw;
		right: 5vw;
		width: 24%;
	}
	.month.m9 .title .ico2 {
		left: 5vw;
		bottom: 5vw;
		width: 17%;
	}
	.month.m10 .title .ico1 {
		left: 5vw;
		bottom: 5vw;
		width: 17%;
	}
	.month.m11 .title .ico1 {
		top: -4vw;
		right: -1vw;
		width: 15%;
	}
	.month.m12 .title .ico1 {
		top: 5vw;
		right: 5vw;
		width: 10%;
	}
	.month.m1 .title .ico1 {
		top: 5vw;
		right: 5vw;
		width: 27%;
	}
	.month.m1 .title .ico2 {
		left: 5vw;
		bottom: 23vw;
		width: 17%;
	}
	.month.m2 .title .ico1 {
		top: -1vw;
		left: 3vw;
		width: 17%;
	}
	.month.m3 .title .ico1 {
		top: 5vw;
		right: 5vw;
		width: 15%;
	}
}

#main.event .data_since {
	width: 1000px;
	padding: 0 0 20px;
	margin: 0 auto;
	line-height: 1.4;
	text-align: right;
}

@media screen and (max-width: 1020px){
	#main.event .data_since {width: 90%;}
}