@charset "UTF-8";
/* CSS Document */

/*------------------- スライダー設定 ------------------------*/
.sliderarea {
	position: relative;
	height: 250px;
}
#learnwith {
	position: absolute;
	right: 10px;
	bottom: 10px;
	background-image: url("../images/slider/learnwith.svg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 110px;
	height: 46px;
	max-width: 180px;
	max-height: 76px;
	text-indent: 101%;
    white-space: nowrap;
	overflow: hidden;
	z-index: 1;
}
.slider div {
	box-sizing: border-box;
	background-attachment: scroll;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	text-indent: 101%;
	white-space: nowrap; 
    overflow: hidden; 
	min-height: 250px;
}

#slider1 {
	background-image: url("../images/slider/slider_small_1.jpg");
}
#slider2 {
	background-image: url("../images/slider/slider_small_2.jpg");
}
#slider3 {
	background-image: url("../images/slider/slider_small_3.jpg");
}
#slider4 {
	background-image: url("../images/slider/slider_small_4.jpg");
}

h2 {
	font-size: 120%;
	color: #034EA2;
	text-align: center;
	background-image: url("../images/home/yellowline.svg");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	background-position: center center;
}
h3 {
	color: #034EA2;
}
/*------------------- 2コースのバナー設定 ------------------------*/
#course_banner a {
	display: block;
	height: 90px;
	max-width: 500px;
    margin: 0px auto 20px auto;
	padding: 0;
    box-sizing: border-box;
	box-shadow: 0 8px 8px -8px hsl(200 50% 20% / 40%);
}
#course_banner div {
	background-image: url("../images/home/check.svg");
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: right 4px bottom 4px;
    background-size: 50px;
	margin: 0;
	padding: 10px;
	height: 100%;
	box-sizing: border-box;
}
#course_banner h4 {
	color: #ffffff;
	font-size: 150%;
	text-align: center;
	margin: 0;
	padding: 0;
	}
#banner_adv {
	background-color: #1753BC;
}
#banner_bsc {
	background-color: #44AF35;
}
#banner_opt {
	background-color: #cd6565;
}



#banner_adv:hover, #banner_bsc:hover, #banner_opt:hover {
    transform: translate(1px, 1px);
	transition: all 0.2s;
}

/*------------------- 季節講習のバナー設定 ------------------------*/
#seasonal {
    margin: 0px auto;
    box-sizing: border-box;
	max-width: 800px;
}
#seasonal a {
	display: block;
	width: 100%;
	height: 100%;
}
#seasonal a:hover {
    transform: translate(1px, 1px);
	transition: all 0.2s;
}
#seasonal img {
	width: 100%;
	height: auto;
	box-shadow: 0 8px 8px -8px hsl(50 50% 20% / 40%);
    border-radius: 10px;
    border: 4px solid #d8e6ff;
	box-sizing: border-box;

}




/*------------------- 全国統一テストのバナー設定 ------------------------*/
#unified_exam {
    margin: 0px auto;
    box-sizing: border-box;
	max-width: 800px;
}
#unified_exam a {
	display: block;
	width: 100%;
	height: 100%;
}
#unified_exam a:hover {
    transform: translate(1px, 1px);
	transition: all 0.2s;
}
#unified_exam img {
	width: 100%;
	height: auto;
	box-shadow: 0 8px 8px -5px hsl(50 50% 20% / 50%);
	border: 5px solid #ED1B24;
	box-sizing: border-box;

}
/*------------------- 理科実験教室バナー設定 ------------------------*/
#scienceclass {
    margin: 0px auto;
    box-sizing: border-box;
	max-width: 800px;
}
#scienceclass a {
	display: block;
	width: 100%;
	height: 100%;
}
#scienceclass a:hover {
    transform: translate(1px, 1px);
	transition: all 0.2s;
}
#scienceclass img {
	width: 100%;
	height: auto;
	box-shadow: 0 8px 8px -5px hsl(50 50% 20% / 50%);
	border-radius: 8px;
	box-sizing: border-box;
}

/*------------------- LPバナー設定 ------------------------*/
#teiki {
    margin: 0px auto;
    box-sizing: border-box;
	max-width: 800px;
}
#teiki a {
	display: block;
	width: 100%;
	height: 100%;
}
#teiki a:hover {
    transform: translate(1px, 1px);
	transition: all 0.2s;
}
#teiki img {
	width: 100%;
	height: auto;
	box-shadow: 0 8px 8px -8px hsl(50 50% 20% / 40%);
    border-radius: 10px;
    border: 4px solid #d8e6ff;
	box-sizing: border-box;
}


/*------------------- 秋生募集のバナー設定 ------------------------*/
#autumn {
    margin: 0px auto;
    box-sizing: border-box;
	max-width: 800px;
}
#autumn a {
	display: block;
	width: 100%;
	height: 100%;
}
#autumn a:hover {
    transform: translate(1px, 1px);
	transition: all 0.2s;
}
#autumn img {
	width: 100%;
	height: auto;
	box-shadow: 0 8px 8px -8px hsl(50 50% 20% / 40%);
    border-radius: 10px;
    border: 4px solid #d8e6ff;
	box-sizing: border-box;
}

/*------------------- LP部活バナーのバナー設定 ------------------------*/
#clubkids {
    margin: 0px auto;
    box-sizing: border-box;
	max-width: 800px;
}
#clubkids a {
	display: block;
	width: 100%;
	height: 100%;
}
#clubkids a:hover {
    transform: translate(1px, 1px);
	transition: all 0.2s;
}
#clubkids img {
	width: 100%;
	height: auto;
	box-shadow: 0 8px 8px -8px hsl(50 50% 20% / 40%);
    border-radius: 10px;
    border: 4px solid #d8e6ff;
	box-sizing: border-box;
}




/*------------------- トップページのバナー設定 ------------------------*/
.lp-banner {
	margin: 0px auto;
    box-sizing: border-box;
	max-width: 800px;
}
.lp-banner a:hover {
    transform: translate(1px, 1px);
	transition: all 0.2s;
}
.lp-banner img {
	width: 100%;
	height: auto;
}




/*------------------- トップの合格実績リスト ------------------------*/
#university, #highschool, #juniorhigh {
	margin: 0 0 20px 0;
}
h2.achievementtitle {
	color: #fff;
	font-size: 125%;
	background-color: #1753BC;
	border-radius: 8px;
	background-image: none;
	margin: 0 0 1em;
	padding: 10px;
}
.excerpt {
	margin: 0 0 2em 0;
	color: #666666;
}
.excerpt div {
	display: inline;
}
.division {
	color: #5aa3d7;
}
.emphasized {
	font-weight: 600;
    color: #1753BC;
    font-size: 120%;
}
.excerpt p {
	display: inline;
}
.pastresults {
	margin: 0 auto;
	padding: 1em;
	background-color: #5aa3d7;
	font-size: 140%;
	border-radius: 10px;
	color: #FFF;
	max-width: 600px;
	text-align: center;
	box-shadow: 0 10px 10px -8px hsl(200 50% 20% / 70%);
}
.pastresults:hover {
	    transform: translate(2px, 2px);
		opacity: 0.8;
}

.pass-exam__list {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 2em;
	list-style-type: none;
	margin: 0.5em 0 1em;
	padding: 0;
}
.pass-exam__list li strong {
	font-weight: 700;
	color: #1753BC;
	font-size: 125%;
}



/*------------------- メディア切替 ------------------------*/
/*====================================================================
想定端末　小型のAndroid の縦構え（Portrait）　 360×640px
====================================================================*/
@media screen and (min-width:360px) {
}/*360×640px*/


/*====================================================================
想定端末　iPhone 6~8 の縦構え（Portrait）　 375×667px
====================================================================*/
@media screen and (min-width:375px) {
}/*375×667px*/

/*====================================================================
想定端末　pixel2 の縦構え（Portrait）　 411×731px
====================================================================*/
@media screen and (min-width:411px){
}/*411×731px*/

/*====================================================================
想定端末　iPhone XR, 11, XsMax の縦構え（Portrait）　 414×896px
====================================================================*/
@media screen and (min-width:414px){
}/*414×896px*/




/*====================================================================
想定端末　Surface Duo の縦構え（Portrait）　540×720px
====================================================================*/
@media screen and (min-width:540px){

}



/*↑ここまでスマホ縦（Portrait）
==============================================================================================================================================
↓ここからスマホ横（Landscape）*/

/*====================================================================
想定端末　iPhoneSE の横構え（Landscape）　 568×320px
====================================================================*/
@media screen and (min-width:568px){
	#learnwith {
		width: 180px;
		height: 76px;
	}
}


/*====================================================================
想定端末　iPhone 6~8 の横構え（Landscape）　667×375px
====================================================================*/
@media screen and (min-width:667px){
	.sliderarea, .slider div  {
		height: 400px;
	}
}
/*====================================================================
想定端末　iPhone 6~8Plus の横構え（Landscape）　736×414px
====================================================================*/
@media screen and (min-width:736px){
}

/*====================================================================
想定端末　iPhone X, Xs,11Pro の横構え（Landscape）　812×375px
====================================================================*/
@media screen and (min-width:812px){
}/*812×375px*/




/*↑ここまでスマホ横（Landscape）
==============================================================================================================================================
↓ここからタブレット縦（Portrait）*/

/*====================================================================
想定端末　iPad 9.7inch, 10.2inch の縦構え（Portrait） 768×1024px
====================================================================*/
@media screen and (min-width:768px) and (min-height:500px) {
        #slider1 {
            background-image: url("../images/slider/slider_large_1.jpg");
        }
        #slider2 {
            background-image: url("../images/slider/slider_large_2.jpg");
            }
        #slider3 {
            background-image: url("../images/slider/slider_large_3.jpg");
        }
        #slider4 {
            background-image: url("../images/slider/slider_large_4.jpg");

        }
}


/*====================================================================
想定端末　iPad Air, iPad Pro 10.5inch の縦構え（Portrait） 834×1112px
====================================================================*/
@media screen and (min-width:834px) and (min-height:500px) {
}/*834×1112px*/




/*====================================================================
想定端末　iPad Pro 11inch の縦構え（Portrait） 834×1169px
====================================================================*/
@media screen and (min-width:834px) and (orientation: portrait) {



}/*834×1169px*/




/*====================================================================
想定端末　iPad Pro 12.9inch の縦構え（Portrait） 1024×1366px
====================================================================*/
@media screen and (min-width:1024px) {
		.sliderarea, .slider div {
		height: 600px;
	}
	#course_banner {
        display: flex;
        justify-content: space-evenly;
	}
	.banner {
		width: 30%;
		}
}/*1024×1366px*/







/*↑ここまでタブレット横（Landscape）
==============================================================================================================================================
↓ここからPC　＝  マウスポインターがあるという前提、hoverの発想アリ 　*/

/*====================================================================
想定端末　小型のモニター 幅1367px以上
====================================================================*/
@media screen and (min-width:1367px) {
}