@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-area {
	position: relative;
	padding-bottom: calc(50vw - 70px);
}

#title-bar {
	background-image: url("../../../../art/assets/img/h1_bg.png");
	border-top: 2px solid #ffffff;
	
	position: relative;
	z-index: 10;
}
#title-bar h1 {
	top: calc(50% - 5px);
}
#title-area #mvimg {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	width: 90%;
	top: 86px;
}
#title-area #mvimg img {
	height: auto;
}

#block-intro {
	background: url("../../../assets/img/bg_paint09.png") no-repeat -10% 100% / 300px auto;
	padding-bottom: 70px;
}
#block-intro > .inner {
	width: 100%;
	padding: 85px 0 65px;	
}
#block-intro .txtarea {
	width: 88%;
	margin: 0 auto 3em;
}
#block-intro ul.list_check {
	background: #ffffff;
	border: 3px solid #fff103;
	border-radius: 1.5em;
	padding: 1.5em 1.5em 1em;
	margin-bottom: 1.8em;
}
#block-intro .txtarea p.txt_em {
	margin-top: 1em;
}
#block-intro .txt_em {
	font-size: 17px;
	color: #464b81;
}


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

/* 600px〜959px：tablet
------------------------------ */
@media screen and (min-width: 600px) {
	#title-area #mvimg {		
		top: 80px;
	}
	#block-intro {
		background-position: calc(50% - 240px) 99%;
		background-size: 370px auto;
		padding-bottom: 100px;
	}
	#block-intro > .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) {
	#title-area {
		padding-bottom: calc(26vw + 90px);
	}
	#title-area #mvimg {		
		top: 148px;
		max-width: 1000px
	}
	#container #title-bar h1 {
		top: calc(50% - 5px);
	}
	#block-intro {
		background-position: calc(50% - 240px) 99%;
		background-size: 476px auto;
		padding-bottom: 100px;
	}
	section.block > .inner {
		padding: 100px 0 120px;
	}
	#block-intro > .inner {
		max-width: 1440px;
		padding: 150px 0 120px;
	}
	section.block h3,
	#block-intro .txt_em,
	#block-intro .txtarea p.txt_em {
		font-size: 21px;
 		line-height: 1.9;
	}
	.txtarea {
		max-width: 950px;
	}
}

/* 1280px〜：large PC
------------------------------ */
@media screen and (min-width: 1280px) {
	#title-area {
		padding-bottom: 24em;
	}
	#title-area #mvimg {		
		top: 170px;		
	}
	#container #title-bar {
		height: 220px;
	}
	#container #title-bar h1 {
		top: calc(50% + 10px);
	}
	#title-bar {	
		border-top: none;
	}
	.txtarea {
		width: 950px;
	}
}

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

}