/* CSS Document */

#pagetitle #head {
	background: url(img/extend_topimg.jpg) center center / cover no-repeat;
}

#pagetitle #head #label {
	background: url(img/sub_h2_bg.png) top center / 17px 17px repeat #f30;
	position: relative;
}

#pagetitle #head #label h2,
#pagetitle #head #label h3,
#extend_info h3 {
	margin: 0 auto;
}

#pagetitle #head #label h2,
#pagetitle #head #label h3,
#extend_time .left h4,
#extend_info h3,
#extend_lesson .left h4,
#mom h5 {
	overflow: hidden;
	text-indent: -9999px;
	display: block;
}

#pagetitle #head #label h2 {
	height: 15px;
	width: 92px;
	background: url(img/extend_h2.png) no-repeat;
	background-size: 92px 15px;
}

#pagetitle #head #label h3 {
	position: absolute;
	bottom: -25px;
	left: 0;
	right: 0;
	margin:0 auto;
	height: 40px;
	width: 310px;
	background: url(img/extend_h3_01.png) no-repeat;
	background-size: 310px 40px;
}

#extend_time {
	padding: 40px 0 48px;
}

#extend_time .left, 
#extend_time .right {
	float: left;
	width: 460px;
	height: 285px;
}

#extend_time .left {
	padding: 0 40px 0 0;
}

@media screen and (max-width: 580px) {
	#extend_time .left, 
	#extend_time .right {
	float: none;
	padding: 0;
	width: 100%;
	height: auto;
	}
	
	#extend_time .left {
	padding: 0;
	}
	
	#extend_time .right {
	padding: 30px 0 0;
	}
}

#extend_time .left h4 {
	padding: 0 0 20px;
	height: 79px;
	width: 356px;
	background: url(img/extend_h4.png) no-repeat;
	background-size: 356px 79px;
}
@media screen and (max-width: 580px) {
	#extend_time .left h4 {
	height: 70px;
	width: 100%;
	max-width: 367px;
	background-size: contain;
	margin: 0 0 1%;
	}
}
	
#extend_time .right img {
	width: 100%;
	height: auto;
	display: block;
}

#extend_info {
	padding: 0 0 60px;
}

#extend_info h3 {
	padding: 0 0 20px;
	height: 26px;
	width: 380px;
	background: url(img/extend_h3_02.png) no-repeat;
	background-size: 380px 26px;
}
@media screen and (max-width: 580px) {
	#extend_info h3 {
	width: 100%;
	max-width: 380px;
	background-size: contain;
	}
}
 
#extend_info p {
	text-indent: -1em;
	padding-left: 1em;
}

#extend_info p:nth-child(3) {
	padding-top: 20px;
}

/* 表 */

.table th {
	width: 70px;
}

.table td.width {
	width: 100px;
}
@media screen and (max-width: 580px) {
	.table th,
	.table td.width {
	width: 100%;
	}
}

@media screen and (max-width: 580px) {
	.pc_br {
	display: none;
	}
}

/* 放課後の充実した課外授業 */

#extend_lesson {
	padding: 55px 40px 40px;
	margin: 0 0 60px;
	background: url(img/extend_lesson_bg.png) repeat-x;
	background-size: 40px 1990px;
}
@media screen and (max-width: 580px) {
	#extend_lesson {
	padding: 55px 20px 40px;
	}
}

#extend_lesson .left, 
#extend_lesson .right {
	float: left;
	height: auto;

}

#extend_lesson .left {
	padding: 0 40px 0 0;
	width: 440px;
}

#extend_lesson .right {
	width: 400px;
}

@media screen and (max-width: 580px) {
	#extend_lesson .left, 
	#extend_lesson .right {
	float: none;
	padding: 0;
	width: 100%;
	height: auto;
	}
	
	#extend_lesson .left {
	padding: 0;
	}
	
	#extend_lesson .right {
	padding: 30px 0 0;
	}
}

#extend_lesson .left h4 {
	padding: 0 0 20px;
	height: 78px;
	width: 318px;
	background: url(img/extend_lesson_h4.png) no-repeat;
	background-size: 318px 78px;
}
@media screen and (max-width: 580px) {
	#extend_lesson .left h4 {
	height: 63px;
	width: 100%;
	background-size: contain;
	background-position: center center;
	margin: 0 0 4%;
	}
}

#extend_lesson .left p {
	padding: 0 0 30px;
}

#extend_lesson .left p span {
	font-size: 13px;
	display: block;
	margin: 20px 0 0;
}

#extend_lesson .left img,
#extend_lesson .right h5 img {
	width: 100%;
	height: auto;
	display: block;
}

#extend_lesson .right h5 img {
	padding: 0 0 15px;
}

#extend_lesson .right div {
	padding: 0 0 40px;
	background: url(img/extend_lesson_border.png) no-repeat;
	background-size: 400px 4px;
	background-position: left 0 bottom 15px;
}

#extend_lesson .right div:last-child {
	padding: 0;
	background-image: none;
}

#extend_lesson .right p span {
	font-weight: bold;
	display: block;
	margin: 0 0 15px;
}

#extend_lesson .right p.cap {
	margin: 0 0 5px;
}

/* 保護者コメント */

#mom {
	width: 100%;
	box-sizing: border-box;
	background: #cce699;
	box-shadow: 4px 4px 15px rgba(0,0,0,0.5);
	padding: 30px 22px 0 50px;
	margin: 0 0 70px;
}

#mom h5 {
	height: 27px;
	width: 428px;
	background: url(img/extend_h5.png) no-repeat;
	background-size: 428px 27px;
	padding: 0 0 43px;
}

#mom div {
	width: 100%;
	font-size: 16px;
	background: url(img/extend_h5_border.png) no-repeat;
	background-size: 860px 41px;
	background-position: top 16px left;
	position: relative;
}

#mom div img {
	width: 140px;
	height: 140px;
	padding: 2px 27px 70px 10px;
	display: block;
	float: right;
	filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}
	
#mom div .name {
	position: absolute;
	bottom: 27px;
	right: 27px;
}

@media screen and (max-width: 580px) {
	#mom {
	padding: 30px 20px 30px 25px;
	margin: 0 0 50px;
	}
	
	#mom div {
	background-image: none;
	}
	
	#mom h5 {
	height: 55%;
	width: 92%;
	max-width: 420px;
	background: url(img/extend_h5_mb.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 60px;
	left: 0;
	}
	
	#mom div img {
	width: 45%;
	height: auto;
	padding: 78% 2% 8px 5%;
	}
	
	#mom div p {
	padding: 77% 0 0;
	}

	#mom div .name {
	position: absolute;
	top: 0;
	left: 0;
	width: 190px;
	padding: 0 0 20px;
	}
	
}