@charset 'utf-8';

/* ------------------------------------------------------------ PC ------------------------------------------------------------ */

.second h3 {
	background-color: #00563b;
}

.program_year {
	max-width: 1050px;
	margin: 0 auto 120px;
	text-align: center;
}

.program_year > div {
	width: 100%;
	position: relative;
}

/* 月ごとのディバイド */

.program_year > div.month04 { height: 380px; }
.program_year > div.month05 { height: 370px; }
.program_year > div.month06 { height: 170px; }
.program_year > div.month07 { height: 450px; }
.program_year > div.month08 { height: 370px; }
.program_year > div.month09 { height: 470px; }
.program_year > div.month10 { height: 440px; }
.program_year > div.month11 { height: 370px; }
.program_year > div.month12 { height: 370px; }
.program_year > div.month01 { height: 370px; }
.program_year > div.month02 { height: 420px; }
.program_year > div.month03 { height: 450px; }

.program_year > div h4 {
	position: absolute;
	width: 100px;
	height: 100px;
	line-height: 100px;
	color: #fff;
	font-size: 3rem;
	font-weight: bold;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.month04 h4 { background-color: #a1ce3a; top: 10px; right: 17%; }
.month05 h4 { background-color: #009a59; top: 0px; left: 10%; }
.month06 h4 { background-color: #00563b; top: -130px; right: 8%; }
.month07 h4 { background-color: #f8cb00; top: 200px; left: 15%; }
.month08 h4 { background-color: #f8cb00; top: 50px; right: 29%; }
.month09 h4 { background-color: #eca800; top: 220px; left: 10%; }
.month10 h4 { background-color: #e46b02; top: 100px; right: 22%; }
.month11 h4 { background-color: #f28e00; top: 10px; left: 19%; }
.month12 h4 { background-color: #e46b02; top: 0; right: 28%; }
.month01 h4 { background-color: #80a8c5; top: 220px; left: 26%; }
.month02 h4 { background-color: #3673af; top: 240px; right: 16%; }
.month03 h4 { background-color: #005f9c; top: 120px; left: 45%; }


.program_year img {
	display: block;
}

.month04 p,
.month05 p,
.month06 p { color: #00563b; }
.month07 p,
.month08 p,
.month09 p { color: #eca800; }
.month10 p,
.month11 p,
.month12 p { color: #e46b02; }
.month01 p,
.month02 p,
.month03 p { color: #005f9c; }

.program_year > div p span {
	display: block;
	font-weight: bold;
	margin-top: 10px;
}


/* 画像配置 */

.program_year > div > img,
.program_year > div p {
	position: absolute;
}

.month04_1 { top: 30px; right: 43%; }
.month04_2 { top: 0px; right:38%; }
.month04_3 { top: 40px; right: 28%; }
.month04_3 span { position: absolute; top: 185px; left: -30px; }
.month04_4 { top: 140px; right: 0%; }
.month04 .cube01 { bottom: 50px; left: 0; }

.month05_1 { top: 120px; left: 0%; }
.month05_2 { top: 0; left: 21%; }
.month05_3 { top: 120px; left: 30%; }
.month05 .cube02 { top: 50px; right: 5%; }

.month06_1 { top: -40px; right: 15%; }
.month06_2 { top: 0px; right: 3%; }
.month06 .cube03 { bottom: 50px; left: 0; }

.month07_1 { top: 0px; left: 12%; }
.month07_2 { top: 100px; left: 36%; }
.month07_3 { top: 240px; left: 10%; }
.month07_3 span { position: absolute; left: -10%; bottom: -20px; }
.month07_4 { top: 250px; left: 0; }
.month07 .cube04 { top: 0; right: 0; }
.month07 .cube04_2 { top: 100px; right: 10%; }

.month08_1 { top: -100px; right: 0%; }
.month08_2 { top: 180px; right: 23%; }
.month08_3 { top: 100px; right: 38%; }
.month08 .cube05 { top: -120px; right: 25%; z-index: -1;}
.month08 .cube06 { top: 200px; left: 0; }
.month08 .cube07 { bottom: 0; right: 15%; }

.month09_1 { top: 50px; left: 30%; }
.month09_2 { top: 0px; left: 0%; }
.month09_3 { top: 180px; left: 25%; z-index: 1; }
.month09_4 { top: 120px; left: 50%; }
.month09 .cube08 { top: 100px; right: 0; }
.month09 .cube09 { bottom: 0; left: 8%; }

.month10_1 { top: 10px; right: 44%; }
.month10_2 { top: 120px; right: 37%; }
.month10_3 { top: 0; right: 5%; }
.month10_4 { top: 160px; right: 0%; }
.month10_5 { top: 290px; right: 3%; }
.month10_5 span { position: absolute; top: -35px; left: 10%; }
.month10 .cube10 { top: 0; right: 37%; }
.month10 .cube11 { bottom: 70px; left: 0; }

.month11_1 { top: 80px; left: 0; }
.month11_2 { top: 130px; left: 6%; }
.month11_3 { top: 0; left: 50%; }
.month11_4 { top: 10px; left: 32%; }
.month11 .cube10_2 { top: 50px; right: 0; }
.month11 .cube12 { bottom: 70px; right: 15%; }

.month12_1 { top: 80px; right: 40%; }
.month12_2 { top: 100px; right: 31%; }
.month12_3 { top: 50px; right: 0; }
.month12 .cube13 { top: 50px; left: 5%; }

.month01_1 { top: 80px; left: 0; }
.month01_2 { top: 0; left: 25%; }
.month01 .cube14 { top: 0; left: 45%; z-index: -1; }
.month01 .cube15 { top: 100px; right: 0; }

.month02_1 { top: -20px; right: 0; }
.month02_2 { top: 100px; right: 28%; }
.month02_3 { top: 100px; right: 52%; }
.month02 .cube16 { top: 30px; left: 0; }
.month02 .cube17 { bottom: 0; right: 0; }

.month03_1 { top: 0; left: 4%; }
.month03_2 { top: 10px; left: 4%; }
.month03_2 span { margin-top: 20px; }
.month03_3 { top: 50px; right: 0; }
.month03_4 { top: 120px; right: 5%; }
.month03_5 { top: 250px; right: 37%; }
.month03 .cube14_2 { top: 130px; left: -20px; z-index: 1; }
.month03 .cube18 { bottom: 0; left: 15%; }


/* 課外活動 */

.program_other h4 {
	margin: 0 auto 10px;
	font-size: 1.8rem;
	color: #00563b;
}


/* ムービー */

.program_movie {
	margin: 0 auto;
	clear: both;
	min-height:1px;
	zoom:1;
}

.program_movie:after {
	content:".";
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	font-size:0px;
}

.program_movie li {
	position: relative;
	float: left;
	width: 30%;
	margin: 0 5% 0 0;
	text-align: center;

	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

.program_movie li:nth-of-type(3n) {
	margin: 0;
}

.program_movie li a {
	display: block;
	width: 100%;
	height: 100%;
}

.program_movie li a:before {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -35px);
	-webkit-transform: translate(-50%, -35px);

	width: 50px;
	height: 50px;
	background-color: #a1ce3a;	
	border-radius: 50%; /* CSS3 */
	-moz-border-radius: 50%; /* Firefox */
	-webkit-border-radius: 50%; /* Safari and Chrome */

	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

.program_movie li a:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px 0 0 -6px;
	border-left: 15px solid #fff;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;

	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

.program_movie li a:hover:before {
	background-color: #bfe965;	
}

.program_movie li a:hover:after {
	border-left: 15px solid #00563b;
}

.program_movie li a img {
	width: 100%;
	height: auto;
	border: 2px solid #00563b;
	border-radius: 10px; /* CSS3 */
	-moz-border-radius: 10px; /* Firefox */
	-webkit-border-radius: 10px; /* Safari and Chrome */
}


/* ------------------------------------------------------------ responsive ------------------------------------------------------------ */

@media only screen and (max-width: 768px) {
	
	.program_year {
		max-width: none;
		margin: 0 auto;
	}
	
	.program_year > div {
		width: 100%;
		position: relative;
	}
	
	/* 月ごとのディバイド */

	.program_year > div.month04,
	.program_year > div.month05,
	.program_year > div.month06,
	.program_year > div.month07,
	.program_year > div.month08,
	.program_year > div.month09,
	.program_year > div.month10,
	.program_year > div.month11,
	.program_year > div.month12,
	.program_year > div.month01,
	.program_year > div.month02,
	.program_year > div.month03 { height: auto; }
	
	.program_year > div h4 {
		position: static;
		font-size: 2.6rem;
		line-height: 95px;
	}

	.program_year > div.month04 h4 { }
	.program_year > div.month05 h4 { margin: 0 0 0 auto; }
	.program_year > div.month06 h4 { }
	.program_year > div.month07 h4 { margin: 0 0 0 auto; }
	.program_year > div.month08 h4 { }
	.program_year > div.month09 h4 { margin: 0 0 0 auto; }
	.program_year > div.month10 h4 { }
	.program_year > div.month11 h4 { margin: 0 0 0 auto; }
	.program_year > div.month12 h4 { }
	.program_year > div.month01 h4 { margin: 0 0 0 auto; }
	.program_year > div.month02 h4 { }
	.program_year > div.month03 h4 { margin: 0 0 0 auto; }

	
	/* 画像配置 */

	.program_year > div > img {
		position: static;
	}

	.program_year > div p {
		position: static;
	}

	.program_year > div p span {
		position: static;
		margin-top: 5px;
	}

	.month04_1 { width:60%; margin: -15% 5% 0 auto; }
	.month04_2 { width:20%; margin: -25% auto 0 0; }
	.month04_3 { margin: -10% auto 0; }
	.month04_3 img { width:30%; margin: 0 auto 0 15%; }
	.month04_3 span { position: relative !important; top: -30px; left: 5%; }
	.month04_4 { width:70%; margin: -2% auto; }
	.month04 .cube01 { width:12%; }
	.month04 { margin-bottom: 12%; } /* 次のブロックとのアキ調整 */

	.month05_1 { width:70%; margin: -10% auto 0 5%; }
	.month05_2 { width:50%; margin: 0 auto 0 5%; }
	.month05_3 { width:85%; margin: -11% 0 0 auto; }
	.month05_3 img { margin: 0 0 0 auto; }
	.month05 .cube02 { width:8%; margin: -50% 0 0 auto; }
	.month05 { margin-bottom: 55%; } /* 次のブロックとのアキ調整 */

	.month06_1 { margin: -4% auto 0 0; }
	.month06_1 img { width:70%; margin: 0 auto 0 0; }
	.month06_2 { width:25%; margin: -38% 2% 0 auto; }
	.month06 .cube03 { width:12%; margin: 15% auto 0 0; }
	.month06 { margin-bottom: 15%; } /* 次のブロックとのアキ調整 */

	.month07_1 { width:50%; margin: -20% auto 0 10%; }
	.month07_2 { width:60%; margin: -5% 0 0 auto; }
	.month07_3 { width:76%; margin: 3% auto 0 0; }
	.month07_4 { width:20%; margin: -30% 10% 0 auto; }
	.month07 .cube04 { width:4%; margin: -120% auto 0 5%; }
	.month07 .cube04_2 { width:4%; margin: 120% 0 0 auto; }
	.month07 { margin-bottom: 8%; } /* 次のブロックとのアキ調整 */

	.month08_1 { width:70%; margin: -10% 2% 0 auto; }
	.month08_2 { width:30%; margin: 0 1% 0 auto; }
	.month08_3 { width:90%; margin: -10% auto 0 0; }
	.month08 .cube05 { display: none; }
	.month08 .cube06 { width:10%; margin: 0 auto 0 5%; }
	.month08 .cube07 { display: none; }
	.month08 { margin-bottom: 12%; } /* 次のブロックとのアキ調整 */

	.month09_1 { width: 40%; margin: -20% auto 0 3%; }
	.month09_2 { width: 75%; margin: 1% 0 0 auto; }
	.month09_3 { width: 65%; margin: 5% auto 0 0; }
	.month09_4 { width: 50%; margin: -5% 1% 0 auto; }
	.month09 .cube08 { display: none; }
	.month09 .cube09 { width:10%; margin: -30% auto 0 5%; }
	.month09 { margin-bottom: 45%; } /* 次のブロックとのアキ調整 */

	.month10_1 { width: 50%; margin: -20% 2% 0 auto; }
	.month10_2 { width: 70%; margin: -5% auto 0; }
	.month10_3 { width: 35%; margin: 3% auto 0 5%; }
	.month10_4 { width: 45%; margin: -28% 5% 0 auto; }
	.month10_5 { width: 95%; margin: -5% auto 0; }
	.month10 .cube10 { display: none; }
	.month10 .cube11 { width: 10%; margin: -2% 5% 0 auto; }
	.month10 { margin-bottom: 15%; } /* 次のブロックとのアキ調整 */

	.month11_1 { width: 40%; margin: -15% auto 0 2%; }
	.month11_2 { width: 70%; margin: -28% auto 0; }
	.month11_3 { width: 25%; margin: 1% 5% 0 auto; }
	.month11_4 { width: 70%; margin: -3% 0 0 auto; }
	.month11 .cube10_2 { display: none; }
	.month11 .cube12 { width: 10%; margin: -2% auto 0 5%; }
	.month11 { margin-bottom: 12%; } /* 次のブロックとのアキ調整 */

	.month12_1 { width: 70%; margin: -10% 0 0 auto; }
	.month12_2 { width: 25%; margin: -35% auto 0 10%; }
	.month12_3 { width: 70%; margin: 5% auto 0 3%; }
	.month12 .cube13 { width: 12%; margin: -30% 2% 0 auto; }
	.month12 { margin-bottom: 38%; } /* 次のブロックとのアキ調整 */

	.month01_1 { width: 70%; margin: 0 auto 0 2%; }
	.month01_2 { width: 70%; margin: 1% 0 0 auto; }
	.month01 .cube14 { display: none; }
	.month01 .cube15 { width: 12%; margin: -65% auto 0 0; }
	.month01 { margin-bottom: 65%; } /* 次のブロックとのアキ調整 */

	.month02_1 { width: 70%; margin: -25% 0 0 auto; }
	.month02_2 { width: 70%; margin: 0 auto 0 2%; }
	.month02_3 { width: 20%; margin: -50% 10% 0 auto; }
	.month02 .cube16 { width: 12%; margin: 5% 0 0 auto; }
	.month02 .cube17 { display: none; }
	.month02 { margin-bottom: 17%; } /* 次のブロックとのアキ調整 */

	.month03_1 { width: 40%; margin: -18% auto 0 4%; }
	.month03_2 { width: 90%; margin: -25% auto 0 0; }
	.month03_3 { width: 45%; margin: 2% 2% 0 auto; }
	.month03_4 { width: 90%; margin: 1% auto 0 0; }
	.month03_5 { width: 40%; margin: -1% 5% 0 auto; }
	.month03 .cube14_2 { display: none; }
	.month03 .cube18 { width: 10%; margin: -20% auto 0 5%; }
	.month03 { margin-bottom: 25%; } /* 次のブロックとのアキ調整 */


	/* 課外活動 */
	.program_other {
		margin-bottom: 50px;
	}

	.program_other h4 {
		margin: 0 auto 5px;
		font-size: 1.6rem;
	}

		
	/* ムービー */
	
	.program_movie {
		margin: 0 auto;
	}
	
	.program_movie li {
		float: none;
		width: 100%;
		margin: 0 0 20px 0;
	}
	
	.program_movie li:nth-of-type(3n) {
		margin: 0 0 20px 0;
	}

	.program_movie li a:hover:before {
		background-color: #a1ce3a;	
	}
	
	.program_movie li a:hover:after {
		border-left: 15px solid #fff;
	}	
	
}