@charset "UTF-8";

/*==========================
    - 〜479px      ：SP portrait
    - 480px〜599px ：SP landscape
    - 600px〜959px ：tablet
    - 960px〜1279px：small PC
    - 1280px〜     ：large PC
    - 1400px〜     ：largest PC
==========================*/
/* 〜479px：SP portrait
------------------------------ */

#title-bar {
	background-image: url("../../../../art/assets/img/h1_bg.png");
	border-top: 2px solid #ffffff;
}
#title-bar h1 {
	top: calc(50% - 5px);
}
#block-classroom {
	background: url("../../../../art/assets/img/bg_paint03.png") no-repeat calc(75% + 80px) 30px / 180px auto,
		url("../../../../art/assets/img/bg_paint08.png") no-repeat calc(25% - 110px) 28.5% / 100px auto,
		url("../../../../art/assets/img/bg_paint07.png") no-repeat calc(75% + 80px) 72.5% / 54px auto,
		url("../../../../art/assets/img/bg_paint01.png") no-repeat calc(25% - 100px) 97.5% / 100px auto;	
}
#block-classroom > .inner {
	width: 100%;
	padding: 85px 0 65px;	
}
.classroom-list {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.8em;
	flex-wrap: wrap;
	width: 92%;
	margin: 0 auto;
}
.classroom-list li {
	max-width: 380px;
	margin: 0 auto 6vw;	
}
.classroom-list li img {	
	height: auto;
	border-radius: 2em 0 2em 0;
	border: 0.6em solid #ffffff;
	box-sizing: border-box;
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25);
}

/* 480px〜599px：SP landscape
------------------------------ */
@media screen and (min-width: 414px) {
}

/* 600px〜959px：tablet
------------------------------ */
@media screen and (min-width: 600px) {
	#block-classroom {
		background-position: calc(75% + 160px) 30px, calc(25% - 200px) 32%, 99% 71%, calc(25% - 100px) 99%;	
		background-size: 240px auto, 130px auto, 70px auto, 160px auto;	
	}
	#block-classroom > .inner {		
		padding-top: 75px 0 65px;	
	}
	.classroom-list {	
		margin-bottom: 2em;
	}
	.classroom-list li {
		width: 49%;
		max-width: inherit;
		margin: 0 0 2vw;
	}
}

/* 960px〜1279px：small PC
------------------------------ */
@media screen and (min-width: 960px) {
	#container #title-bar h1 {
		top: calc(50% - 5px);
	}
	#block-classroom {
		background-position: calc(99% + 0px) 100px, 1% 52%, 97% 71%, calc(20% - 200px) 99%;	
		background-size: 280px auto, 171px auto, 80px auto, 223px auto;	
	}
	section.block > .inner {
		padding: 100px 0 120px;
	}
	#block-classroom > .inner {
		max-width: 1440px;
		padding: 150px 0 120px;
	}
	.classroom-list {
		width: 88%;
	}
	.classroom-list li {
		width: 47.5%;		
		margin-bottom: 5%;		
	}
}

/* 1280px〜：large PC
------------------------------ */
@media screen and (min-width: 1280px) {
	#container #title-bar {
		height: 220px;
	}
	#container #title-bar h1 {
		top: calc(50% + 10px);
	}
	#title-bar {	
		border-top: none;
	}
}

/* 1400px〜：largest PC
------------------------------ */
@media screen and (min-width: 1400px) {

}