@charset "UTF-8";



/*-------------------------------------------------------
graduated
 --------------------------------------------------------*/
.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: 162px;
			height: 162px;
			border-radius: 81px;
			background: #FFF;
			margin: 0 -0.3vw;
			text-align: center;
			padding: 50px 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(2){
			/*background-color: #F7DB70;*/
			background: rgba(247,219,112,0.35);
			margin: 150px -0.1vw 0 -0.1vw;
		}
		.circle_impression li:nth-child(3){
			width: 234px;
			height: 234px;
			background: rgba(255,255,255,1.0);
			background-image: url('../images/graduated/graduated_02.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			margin: 0 0.5vw 0 -0.3vw;
		}
		.circle_impression li:nth-child(4){
			/*background-color: #75CCE8;*/
			background: rgba(234,190,191,0.35);
			vertical-align: top;
			margin: -50px -0.1vw 0 -0.1vw;
		}
		.circle_impression li:last-child{
			/*background-color: #A5DEE5;*/
			background: rgba(117,204,232,0.35);
			margin: 150px -0.1vw 0 -0.1vw;
		}

.circle_graph{
	display: inline-block;
	*display: inline;
	*zoom: 1;
	background-image: url("../images/graduated/graduated_01.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width: 282px;
	height: 282px;
	vertical-align: middle;
	margin-right: 20px;
}
		.circle_graph_text{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			color: #3164B9;
			font-size: 24px;
			font-weight: 600;
			color: #3164B9;
		}
		.circle_graph_text em{
			font-style: normal;
			font-size: 34px;
			font-weight: 600;
			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;
		}
		.wrap_circle_graph{
			text-align: center;
			margin: 20px 0;
		}


h4.content_inner_title{
	font-size: 24px;
	text-align: center;
	font-weight: 600;
	color: #3164B9;
	margin-bottom: 20px;
}
		h4.content_inner_title em{
			font-size: 34px;
			font-style: normal;
			font-weight: 600;
			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;
		}

.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 ) {

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

.circle_graph{
	width: 220px;
	height: 220px;
	vertical-align: middle;
	margin-right: 10px;
}
		.circle_graph_text{
			display: inline-block;
			*display: inline;
			*zoom: 1;
			color: #3164B9;
			font-size: 24px;
			font-weight: 600;
			color: #3164B9;
			margin-top: 15px;
		}
		.circle_graph_text em{
			font-style: normal;
			font-size: 34px;
			font-weight: 600;
			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;
		}
		.wrap_circle_graph{
			text-align: center;
			margin: 20px 0;
		}

h4.content_inner_title{
	font-size: 20px;
	line-height: 1.0em;
	margin-top: 20px;
}

.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;
		}

}