@charset "UTF-8";



/*-------------------------------------------------------
highschool
 --------------------------------------------------------*/
.circle_impression{
	width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    justify-content: center;
    padding: 0;
}
		.circle_impression li{
			display: block;
			width: 150px;
			height: 150px;
			border-radius: 75px;
			background: #FFF;
			margin: 0 1vw;
			text-align: center;
			padding: 45px 0 0;
			font-size: 20px;
			font-weight: 600;
			letter-spacing: -0.05em;
			color: rgba(0,0,0,1);
			/*background-color: #D6A3DC;*/
			background: rgba(214,163,220,0.35);
		}
		.circle_impression li:nth-child(even){
			margin: 150px 1vw 0 1vw;
		}
		.circle_impression li:nth-child(2){
			/*background-color: #F7DB70;*/
			background: rgba(247,219,112,0.35);
		}
		.circle_impression li:nth-child(3){
			/*background-color: #EABEBF;*/
			background: rgba(234,190,191,0.35);
		}
		.circle_impression li:nth-child(4){
			/*background-color: #75CCE8;*/
			background: rgba(117,204,232,0.35);
		}
		.circle_impression li:last-child{
			/*background-color: #A5DEE5;*/
			background: rgba(165,222,229,0.35);
		}

.title_banner{
	background-image: url("../images/highschool/highschool_01.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 30px 0;
}
		.title_banner span.text_wavy{
			color: #3164B9;
			font-weight: 600;
			font-size: 34px;
			line-height: 1.6em;
			text-decoration-line: underline;
			text-decoration-style: wavy;
			text-decoration-color: yellow;
			-moz-text-decoration-style: wavy;
			-moz-text-decoration-color: yellow; 
			-webkit-text-decoration-style: wavy;
			-webkit-text-decoration-color: yellow;
			-ms-text-decoration-style: wavy;
			-ms-text-decoration-color: yellow;
		}

h4.content_inner_title{
	text-align: center;
	font-size: 34px;
	font-weight: 600;
	color: #3164B9;
	margin-bottom: 20px;
}
		h4.content_inner_title em{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			vertical-align: bottom;
			font-style: normal;
			font-weight: 600;
			line-height: -1.1 !important;
		}
		h4.content_inner_title .ico_left{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			width: 38px;
			height: 64px;
			background-image: url("../images/highschool/highschool_02.png");
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			vertical-align: bottom;
			margin-right: 15px;
		}
		h4.content_inner_title .ico_right{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			width: 38px;
			height: 64px;
			background-image: url("../images/highschool/highschool_03.png");
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			vertical-align: bottom;
			margin-left: 11px;
		}

.wrap_opencampus_banner{
	text-align: center;
	background-color: #3164B9;
}
		.wrap_opencampus_banner .wrap{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			text-align: center;
			padding: 70px 200px;
			position: relative;
		}
		.wrap_opencampus_banner .ico_opencampus_banner_01{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			width: 158px;
			height: 222px;
			background-image: url("../images/graduated/graduated_04.png");
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			position: absolute;
			left: 0;
			top: 30px;
		}
		.wrap_opencampus_banner .ico_opencampus_banner_02{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			width: 131px;
			height: 222px;
			background-image: url("../images/graduated/graduated_05.png");
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			position: absolute;
			right: 0;
			top: 30px;
		}
		.wrap_opencampus_banner h3{
			font-size: 40px;
			font-weight: 600;
			color: #FFFFFF;
			letter-spacing: -0.02em;
			margin-bottom: 20px;
		}
		.wrap_opencampus_banner h3 span{
			display: block;
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 10px;
		}
		.wrap_opencampus_banner p a{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			padding: 6px 40px;
			border: solid 2px #FFFFFF;
			letter-spacing: -0.02em;
			text-decoration: none;
			font-weight: 600;
			font-size: 20px;
			color: #FFFFFF;
			background-color: #3164B9;
		}
		.wrap_opencampus_banner p a:hover{
			color: #3164B9;
			background-color: #FFFFFF;
		}


/* -- Media query	761px以下の場合 スマートフォン設定------------------------------------------------------------- */
@media screen and (max-width: 761px ) {

/*-------------------------------------------------------
highschool
 --------------------------------------------------------*/
.circle_impression{
	display: block;
	text-align: center;
	position: relative;
	height: 480px;
	margin-bottom: 40px;
}
		.circle_impression li{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			margin: 0;
			background: rgba(214,163,220,0.35);
			position: absolute;
			right: 50%;
			top: 0;
		}
		.circle_impression li:nth-child(even){
			margin: 0;
		}
		.circle_impression li:nth-child(2){
			right: auto;
			left: 50%;
			top: 20%;
		}
		.circle_impression li:nth-child(3){
			right: 50%;
			top: 40%;
		}
		.circle_impression li:nth-child(4){
			right: auto;
			left: 50%;
			top: 60%;
		}
		.circle_impression li:last-child{
			right: 50%;
			top: 80%;
		}

.title_banner{
}
		.title_banner span.text_wavy{
			font-size: 22px;
		}

h4.content_inner_title{
	font-size: 20px;
	line-height: 1.0em;
}
		h4.content_inner_title .ico_left{
			display: none;
		}
		h4.content_inner_title .ico_right{
			display: none;
		}

.wrap_opencampus_banner{
}
		.wrap_opencampus_banner .wrap{
			padding: 20px 10px;
		}
		.wrap_opencampus_banner .ico_opencampus_banner_01{
			display: none;
		}
		.wrap_opencampus_banner .ico_opencampus_banner_02{
			display: none;
		}
		.wrap_opencampus_banner h3{
			font-size: 24px;
			margin-bottom: 20px;
		}
		.wrap_opencampus_banner h3 span{
			font-size: 16px;
			margin-bottom: 10px;
		}
		.wrap_opencampus_banner p a{
			padding: 2px 20px;
			font-size: 16px;
		}
		.wrap_opencampus_banner p a:hover{
			color: #FFFFFF;
			background-color: #3164B9;
		}

}