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



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/

.bg_gd{
	
background: -webkit-gradient(linear, left , right , color-stop(0.88, #00DA38), color-stop(0.00, #00B6FF));
background: -webkit-linear-gradient(left, #00B6FF 0%, #00DA38 88%);
background: -moz-linear-gradient(left, #00B6FF 0%, #00DA38 88%);
background: -o-linear-gradient(left, #00B6FF 0%, #00DA38 88%);
background: -ms-linear-gradient(left, #00B6FF 0%, #00DA38 88%);
background: linear-gradient(to right, #00B6FF 0%, #00DA38 88%);
color:#fff;

	}
	

@font-face{ 
	font-family: 'makinas'; /* お好きな名前にしましょう */
	src: url('font/Makinas-Scrap-5.woff'); /* IE9以上用 */
	src: url('font/Makinas-Scrap-5.woff?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('font/Makinas-Scrap-5.woff') format('woff'), /* モダンブラウザ用 */;
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}
.makinas {
	font-family: 'makinas';
	font-weight: normal;
	letter-spacing:-0.05em;
}
.khand {
	font-family: 'Khand';
}
.geo {
	font-family: 'Geo';
}

.fadein{
	opacity:0;
	transform:translateY(-20px);
	-webkit-transform:translateY(-20px);
	}
	.fadein.scrollin{
		opacity:1;
		transition:500ms;
		-webkit-transition:1000ms;
		transform:translateY(0px);
		-webkit-transform:translateY(0px);
		}
		
.fadeout{
	opacity:1;
	display:block;
	text-align:center;
	position:relative;
	font-size:22px;
	letter-spacing:0.1em;
	height:80px;
	width:80px;
	border-radius:50%;
	margin:0 auto;
	margin-top:50px;
	}
.fadeout span{
	position:absolute;
	content:"";
	top:24%;
	left:0;
	right:0;
	display:block;
	width: 80px;
	margin:0 auto;
	}
.fadeout span:after{
	position:absolute;
	content:"";
	bottom:-20%;
	left:0;
	right:0;
	display:block;
	width: 10px;
	margin:0 auto;
	height: 10px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition:transform 500ms;
	-webkit-transition:transform 500ms;
	}
	.fadeout.scrollout{
		opacity:0;
		transition:300ms;
		-webkit-transition:300ms;
		}

.fadeout.sp{
	display: block;
	margin-top:0;
	position:absolute;
	bottom:10%;
	left:50%;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	height:60px;
	width:60px;
	}
.fadeout.sp span{
	top:25%;
	width: 60px;
	font-size:15px;
	}
.fadeout.sp span:after{
	bottom:-40%;
	}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* pc */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 801px){

body{
	padding-left:50vw!important;
	min-width:auto!important;
	}
	
	.main{
		position:fixed;
		width:50vw;
		left:0;
		height:100vh;
		background-size:cover;
		background-position:center;
		z-index: 999;
		background-image: url(../../img/special/oc_guide/top_main_bg.jpg);
		}
	/*
	.main::after{
		content:"";
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		background:rgba(0,0,0,0.3);
		}
		*/
		.main > div.dis_table{
			display:table;
			width:100%;
			height:100%;
			position: absolute;
			top: 0;
			z-index:2;
			}
			.main > div.dis_table > div{
				display:table-cell;
				text-align:center;
				vertical-align:middle;
				color:#fff;
				position: relative;
				}
			.main > div.dis_table > div #top_main{
			}
				.main > div.dis_table > div #top_main img{
					width:45%;
					max-width: 312px;
				}
			.main > div.dis_table > div #top_school {
				font-size: 4.1vw;
				letter-spacing: -0.5vw;
				line-height: 1.4;
				box-sizing: border-box;
				margin: 13.5vw auto 4vw;
				position: relative;
				z-index: 1;
			}
			.main > div.dis_table > div #top_school::before {
				position: absolute;
				content: "";
				top: -10vw;
				left: 0vw;
				right: 0;
				margin: auto;
				width: 40vw;
				height: 31.25vw;
				background-image: url("../../img/special/oc_guide/top_main_school.png");
				background-size: cover;
				z-index: -1;
			}
				.main > div.dis_table > div #top_school span {
/*				background: linear-gradient(transparent 92%, rgba(255,255,255,.5) 8%);*/
				}
				.main > div.dis_table > div #top_fuki {
					position: absolute;
					top: -60%;
					left: 5%;
					font-size: 2vw;
					letter-spacing: -1px;
					line-height: 1.2;
					z-index: 1;
				}
				.main > div.dis_table > div #top_fuki::before {
					position: absolute;
					content: "";
					top: -3vw;
					left: -1vw;
					width: 13.5vw;
					height: 13.5vw;
					background-image: url("../../img/special/oc_guide/top_main_fuki.png");
					background-size: cover;
					z-index: -1;
				}
	
	.oc_logo{
		z-index:2;
		width:100%;
		text-align:center;
		}
		.oc_logo img{
			vertical-align:bottom;
			margin-top:50px;
			}
		.oc_logo img.img1{
			margin-right:20px;
			width:80px;
			}
		.oc_logo img.img2{
			width:180px;
			}

		
	
	#contents{
		overflow:hidden;
		}
			
			
	/* =========================================================== top */
			
			/* アイコンのところ */
			.tit_icon{
				width:33px;
				}
			.waku_white{
				background-image: url(../../img/special/oc_guide/waku_white.png);
				background-repeat: no-repeat;
				/*width: 209px;*/
				width: 123px;
				height: auto;
				margin: auto;
				position: relative;
				text-align: center;
				padding-top: 20px;
				box-sizing: border-box;
				background-position:top center;
				background-size:contain;
				}
			.waku_white::before,
			.waku_white::after{
				width: 1000%;
				content: "";
				background-color: #fff;
				display: block;
				position: absolute;
				/*height: 51px;*/
				height: 30px;
				top: 0;
				}
			.waku_white::before{
				right: 100%;
				}
			.waku_white::after{
				left: 100%;
				}
				
				
				
	#contents.top .sec1{
		text-align:center;
		width:90%;
		margin:auto;
		margin-top:50px;
		}
	#contents.top .sec1 h1{
		color: #00DA38;
		background: -webkit-linear-gradient(left, #00B6FF 0%, #00DA38 88%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size:18px;
		font-weight:bold;
		}
		#contents.top .sec1 p{
			margin-top:20px;
			line-height:2em;
			text-align: left;
			}
		#contents.top .sec1 dl {
			margin: 30px auto;
			text-align: center;
		}
			#contents.top .sec1 dl dt {
				color: #00a0ff;
				background: -webkit-linear-gradient(left, #00a0ff 0%, #00c722 88%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight:bold;
			}
				#contents.top .sec1 dl dt span {
					display: inline-block;
					width: 7px;
					height: 7px;
					margin-bottom: 2px;
					background-size: cover;
				}
				#contents.top .sec1 dl dt span.cl {
					background-image: url("../../img/special/oc_guide/circle_l.png");
					margin-right: 7px;
				}
				#contents.top .sec1 dl dt span.cr {
					background-image: url("../../img/special/oc_guide/circle_r.png");
					margin-left: 7px;
				}
			#contents.top .sec1 dl dd {
				margin-top: 10px;
			}
				#contents.top .sec1 dl dd a {
					display: inline-block;
					font-weight: bold;
					color: #00b193;
					background-color: #ffdb00;
					padding: 5px 24px 5px 10px;
					position: relative;
				}
				#contents.top .sec1 dl dd a::before {
				}

				.btn_y {
					display: inline-block;
					font-weight: bold;
					color: #00b193;
					background-color: #ffdb00;
					padding: 5px;
					width: 310px;
					box-sizing: border-box;
					position: relative;
				}
				.btn_y::before {
					position: absolute;
					content: "";
					top: 0;
					bottom: 2px;
					margin: auto;
					right: 15px;
					width: 6px;
					height: 6px;
					border-top: 1px solid #00b193;
					border-right: 1px solid #00b193;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
					transition-duration: 300ms;
				}
				.btn_y:hover::before {
					right: 10px;
				}
		
	#contents.top h3{
		text-align:center;
		line-height:1.3em;
		margin-top: 10px;
		font-size: 1.5em;
		padding-bottom: 20px;
	}
	
		#contents.top .sec4 {
		}
		#contents.top .sec4 dl {
			padding: 35px 0 0; 
		}
		#contents.top .sec4 dl:nth-child(2) {
			position: relative;
			margin-bottom: 30px;
		}
		#contents.top .sec4 dl:nth-child(2)::before {
			position: absolute;
			content: "";
			width: 100%;
			height: calc(100% - 40px);
			top: 70px;
			left: 0;
			background-color: #efefef;
		}
			#contents.top .sec4 dl dt {
				font-size:17px;
				padding-bottom:25px;
				position:relative;
			}
				#contents.top .sec4 dl dt img {
					width:100%;
					max-width:67px;
				}
			#contents.top .sec4 dl dd {
				text-align: left;
				position: relative;
			}
				#contents.top .sec4 dl dd h4 {
					color: #00b193;
					font-size: 6vw;
					line-height: 1.1;
					letter-spacing: -0.75vw;
					margin-left: -.5vw;
				}
				#contents.top .sec4 dl:nth-child(2) dd h4 {
					text-align: right;
				}
				#contents.top .sec4 dl dd div.sec_img {
					position: absolute;
				}
				#contents.top .sec4 dl:nth-child(1) dd div.sec_img {
					top: 0vw;
					right: 0;
					width: 34%;
				}
				#contents.top .sec4 dl:nth-child(2) dd div.sec_img {
					top: 5vw;
					left: 0;
					width: 30%;
				}
				#contents.top .sec4 dl:nth-child(3) dd div.sec_img {
					top: 4vw;
					right: 0;
					width: 27%;
				}
					#contents.top .sec4 dl dd div.sec_img img {
						max-width: 100%;
					}
				#contents.top .sec4 dl dd p {
					color: #212121;
					margin-top: 15px;
				}

			
			
					
		/* オープンキャンパスに参加する前に */
		#contents.top .sec4,
		#contents.top .sec2{
			overflow:hidden;
			margin-top: 65px;
			}
			#contents.top .sec4 h3,
			#contents.top .sec2 h3{
				margin-top:10px;
				font-size:1.5em;
				padding-bottom:20px;
				}
			#contents.top .sec4 .dl_wrap,
			#contents.top .sec2 .dl_wrap{
				background-color:#fff;
				text-align:center;
				}
			#contents.top .sec2 dl{
				background-position:center;
				background-size:cover;
				padding: 40px 0 60px; 
				}
			#contents.top .sec2 dl:nth-of-type(1){
				background-image: url(../../img/special/oc_guide/point1_bg.jpg);
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: 50% 0%;
				background-color: #999999;
				}
			#contents.top .sec2 dl:nth-of-type(2){
				background-image: url(../../img/special/oc_guide/point2_bg.jpg);
				}
			#contents.top .sec2 dl:nth-of-type(3){
				background-image: url(../../img/special/oc_guide/point3_bg.jpg);
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: 50% 0%;
				background-color: #ededed;
				}
				#contents.top .sec4 dl dt,
				#contents.top .sec4 dl dd,
				#contents.top .sec2 dl dt,
				#contents.top .sec2 dl dd{
					width:90%;
					margin:auto;
					}
				#contents.top .sec4 dl dt,
				#contents.top .sec2 dl dt{
					font-size:17px;
					padding-bottom:25px;
					}
					#contents.top .sec2 dl dt img{
						width:100%;
						max-width:67px;
						margin-bottom:25px;
						}
				#contents.top .sec2 dl dd.text{
					font-weight:bold;
					margin: 0 auto 40px;
					text-align: left;
					}
				#contents.top .sec2 dl.point01 dd.text{
					width: 50%;
					padding-bottom: 20px;
					border-bottom: solid 1px rgba(255,255,255,.5);
				}
					#contents.top .sec2 dl.point01 dd.text div {
						text-align: center;
						line-height: 1;
						padding: 10px 0;
						border-top: solid 1px rgba(255,255,255,.5);
						border-bottom: solid 1px rgba(255,255,255,.5);
					}
					#contents.top .sec2 dl.point01  dd.text ul {
						margin-top: 15px;
					}
						#contents.top .sec2 dl.point01  dd.text ul li {
							text-indent: -1.7em;
							padding-left: 1.7em;
							line-height: 1.6;
						}
						#contents.top .sec2 dl.point01  dd.text ul li + li {
							margin-top: 5px;
						}
					#contents.top .sec2 dl.point01  dd.text ul + div {
						margin-top: 25px;
					}

		#contents.top .sec2 dl.point02 {
		}
			#contents.top .sec2 dl.point02 dt {
			}
			#contents.top .sec2 dl.point02 dd {
			}
				#contents.top .sec2 dl.point02 dd ul {
				}
					#contents.top .sec2 dl.point02 dd ul li {
						width: calc(49.25% - 2px);
						float: left;
						border: solid 1px rgba(255,255,255,.5);
						padding: 10px 5px 10px 35px;
						box-sizing: border-box;
						position: relative;
						letter-spacing: -0.5px;
						line-height: 1.5;
					}
					#contents.top .sec2 dl.point02 dd ul li::before {
						position: absolute;
						content: "";
						top: 0;
						left: 10px;
						bottom: 0;
						margin: auto;
						width: 17px;
						height: 16px;
						background-image: url("../../img/special/oc_guide/check_icon_icon.png");
						background-size: cover;
					}
					#contents.top .sec2 dl.point02 dd ul li:nth-child(even) {
						margin-left: 1.5%;
					}
					#contents.top .sec2 dl.point02 dd ul li:nth-child(n + 3) {
						margin-top: 6px; 
					}
						#contents.top .sec2 dl.point02 dd ul li div {
							display: table;
						}
							#contents.top .sec2 dl.point02 dd ul li p {
								display: table-cell;
								vertical-align: middle;
							}

		#contents.top .sec2 dl.point03 {
		}
			#contents.top .sec2 dl.point03 dt {
			}
			#contents.top .sec2 dl.point03 dd {
			}
				#contents.top .sec2 dl.point03 dd h5 {
					background: -webkit-linear-gradient(left, #00a0ff 0%, #00c722 88%);
					text-align: center;
					line-height: 1.5;
					padding: 10px;
					font-size: 14px;
				}
				#contents.top .sec2 dl.point03 dd ul {
					margin-top: 5px;
				}
				#contents.top .sec2 dl.point03 dd ul + h5 {
					margin-top: 20px;
				}
					#contents.top .sec2 dl.point03 dd ul li {
						margin-top: 8px;
						background-color: #fff;
						cursor: pointer;
						padding: 10px;
					}
					#contents.top .sec2 dl.point03 dd ul li + li {
					}
						#contents.top .sec2 dl.point03 dd ul li div.open {
							color: #212121;
							font-weight: normal;
							position: relative;
							padding-right: 20px;
						}
						#contents.top .sec2 dl.point03 dd ul li div.open::before {
							position: absolute;
							content: "";
							top: 0;
							bottom: 2px;
							margin: auto;
							right: 5px;
							width: 6px;
							height: 6px;
							border-bottom: 1px solid #212121;
							border-right: 1px solid #212121;
							-webkit-transform: rotate(45deg);
							transform: rotate(45deg);
							transition-duration: 300ms;
						}
						#contents.top .sec2 dl.point03 dd ul li div.open.on::before {
							bottom: -2px;
							-webkit-transform: rotate(-135deg);
							transform: rotate(-135deg);
						}
							#contents.top .sec2 dl.point03 dd ul li div.open div {
								color: #00b193;
								font-weight: bold;
								display: block;
								font-size: 16px;
								letter-spacing: 2px;
								position: absolute;
								left: 0;
								top: 0;
								bottom: 0;
								margin: auto;
								line-height: 1;
								height: 16px;
							}
								#contents.top .sec2 dl.point03 dd ul li div.open p {
									float: right;
									width:  calc(100% - 30px);
									line-height: 1.5;
								}
							#contents.top .sec2 dl.point03 dd ul li > p {
								padding-top: 8px;
								color: #212121;
								font-weight: normal;
								display: none;
								line-height: 1.5;
							}
                                #contents.top .sec2 dl.point03 dd ul li > p .box{
                                   display: block;
                                }
                                #contents.top .sec2 dl.point03 dd ul li > p .box + .box{
                                    margin-top: 8px;
                                }

	
		#contents.top .sec5 {
			padding: 40px 5% 60px;
		}
			#contents.top .sec5 .sec_tit {
				text-align: center;
			}
				#contents.top .sec5 .sec_tit dl {
				}
					#contents.top .sec5 .sec_tit dl dt {
					}
						#contents.top .sec5 .sec_tit dl dt div {
							width: 20px;
							margin: auto;
						}
							#contents.top .sec5 .sec_tit dl dt div img {
								max-width: 100%;
							}
						#contents.top .sec5 .sec_tit dl dt p {
							font-size: 22px;
							letter-spacing: 2px;
							margin-top: 8px;
						}
					#contents.top .sec5 .sec_tit dl dd {
						margin-top: 15px;
					}
			#contents.top .sec5 .sec_blo {
				margin: 40px 0 0;
			}
				#contents.top .sec5 .sec_blo .sec_blo_tit {
					text-align: center;
				}
					#contents.top .sec5 .sec_blo .sec_blo_tit span {
						display: inline-block;
						position: relative;
						padding: 0 20px;
						font-weight: bold;
						letter-spacing: 2px;
					}
					#contents.top .sec5 .sec_blo .sec_blo_tit span::after ,
					#contents.top .sec5 .sec_blo .sec_blo_tit span::before {
						position: absolute;
						content: "";
						background-size: cover;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 3px;
						height: 16px;
					}
					#contents.top .sec5 .sec_blo .sec_blo_tit span::before {
						background-image: url("../../img/special/oc_guide/kakko_l.png");
						left: 0;
					}
					#contents.top .sec5 .sec_blo .sec_blo_tit span::after {
						background-image: url("../../img/special/oc_guide/kakko_r.png");
						right: 0;
					}
				#contents.top .sec5 .sec_blo ul {
				}
					#contents.top .sec5 .sec_blo ul li {
						background-color: #efefef;
						margin-top: 10px;
						padding: 15px;
					}
						#contents.top .sec5 .sec_blo ul li dl {
						}
							#contents.top .sec5 .sec_blo ul li dl dt {
								font-weight: bold;
							}
								#contents.top .sec5 .sec_blo ul li dl dt div {
									display: inline-block;
								}
									#contents.top .sec5 .sec_blo ul li dl dt div span {
										color: #00b193;
										font-size: 16px;
									}
								#contents.top .sec5 .sec_blo ul li dl dt p {
									display: inline-block;
									margin-left: 5px;
								}
							#contents.top .sec5 .sec_blo ul li dl dd {
								margin-top: 6px;
							}
			#contents.top .sec5 .sec_blo .btn {
				margin-top: 25px;
			}
			#contents.top .sec5 .sec_blo .btn + .btn {
				margin-top: 10px;
			}
				#contents.top .sec5 .sec_blo .btn a {
					width: 100%;
					text-align: center;
					padding: 8px 5px;
				}
					#contents.top .sec5 .sec_blo .btn a span {
						width: 14px;
						display: inline-block;
						line-height: 1;
						font-size: 0;
						vertical-align: middle;
						margin-left: 5px;
					}
						#contents.top .sec5 .sec_blo .btn a span img {
							max-width: 100%;
						}



		/* Recommend */
		#contents .sec3{
			overflow:hidden;
			padding-bottom:45px;
			margin-top: 45px;
			text-align:center;
			}
			#contents .sec3 h3{
				margin-top:15px;
				font-size:1.5em;
				padding-bottom:20px;
				}
				#contents .sec3 h3 img{
					width:50%;
					max-width:220px;
					}
				#contents .sec3 .detail_list_wrap{
					margin-top:25px;
					}
						#contents .sec3 .detail_list_wrap .ul01 > li{
							padding:20px;
							background-color:#EFEFEF;
							margin:20px;
							}
							#contents .sec3 .detail_list_wrap .ul01 > li img {
								width:100%;
								margin-bottom:10px;
								}
							#contents .sec3 .detail_list_wrap .ul01 > li dl dt{
								font-weight: bold;
								font-size: 18px;
								margin: 5px 10px;
								}
							#contents .sec3 .detail_list_wrap .ul01 > li dl dd{
								margin: 5px 10px 10px;
								}
								
                /*学校の特徴*/
                #contents .sec3 .detail_list_wrap .ul01 > li .point_list{
                    text-align: center;
                }
                    #contents .sec3 .detail_list_wrap .ul01 > li .point_list ul{
                        display: inline-block;
                    }
                        #contents .sec3 .detail_list_wrap .ul01 > li .point_list:after{
                            display: none;
                        }
                            #contents .sec3 .detail_list_wrap .ul01 > li .point_list li{
                                text-align: left;
                                position: relative;
                                padding-left: 1em;
                            }
                                #contents .sec3 .detail_list_wrap .ul01 > li .point_list li:before{
                                    content: '';
                                    display: block;
                                    position: absolute;
                                    width: 8px;
                                    height: 8px;
                                    background-color: #00b193;
                                    border-radius: 100%;
                                    left: 0;
                                    top: 0.5em;
                                }
				#contents .sec3 .detail_list_wrap p {
					text-align: left;
                    padding: 0 5%;
					}
								
								
			#contents .sec3 .btn{
				text-align:center;
				margin-top:40px;
				}
				#contents .sec3 .btn span{
					display:inline-block;
					padding:1px;
					position:relative;
					}
				#contents .sec3 .btn span::after{
					position:absolute;
					content:"";
					top:50%;
					right: 15px;
					width: 6px;
					margin-top:-5px;
					height: 6px;
					border-bottom: 1px solid #00C52D;
					border-right: 1px solid #00C52D;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
					transition:transform 500ms;
					-webkit-transition:transform 500ms;
					}
				#contents .sec3 .btn span::after{
					margin-top:-2px;
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
					transition:transform 500ms;
					-webkit-transition:transform 500ms;
					}
					#contents .sec3 .btn span div{
						background-color:#fff;
						padding:10px;
						width:280px;
						}
						#contents .sec3 .btn span div img{
							width:95px;
							line-height:0;
							vertical-align:middle;
							}
			#contents .sec3 ul.bunya{
				margin-top:15px;
				margin-left:-5px;
				}
				#contents .sec3 ul.bunya li{
					width:calc(100%/3 - 5px);
					float:left;
					margin-left:5px;
					font-weight:bold;
					display:table;
					margin-top:5px;
					padding:5px;
					box-sizing:border-box;
					line-height:1.5em;
					font-size:13px;
					background: #fff !important;
					}
				#contents .sec3 ul.bunya li span{
					display:table-cell;
					vertical-align:middle;
					color: #212121;
					}


	
			/* ボタン */
		#contents .btn_sec{
			margin-top: 25px;
			margin-bottom:15px;
			padding:0 20px;
			}
			#contents .btn_sec a{
				}
			#contents .btn_sec a + a{
				margin-top:15px;
				}
				#contents .btn_sec a::after{
					}
				#contents .btn_sec2 a::after{
					display:none;
					}
				#contents .btn_sec2	 a img{
					position:absolute;
					content:"";
					top:0;
					bottom:0;
					margin:auto !important;
					right: 15px;
					width: 10px !important;
					height: 9px;
					}


		
					
							
		#footer{
			margin-top:0;
			}

#footer{
	margin-top:80px;
	}
		
	#footer .footer_gray{
		border-top:1px solid #D1D1D1;
		background-color:#F8F8F8;
		padding:20px 10px 30px;
		}
		#footer .footer_gray > div{
			width:auto;
			}
		#footer .footer_gray .footer_sns{
			margin-left:-5%;
			font-size:0;
			letter-spacing:0;
			padding:0 5%;
			text-align: center;
			}
		#footer .footer_gray .footer_sns li{
			display:inline-block;
			width:10%;
			margin-left:5%;
			float:none;
			}
		#footer .footer_gray .footer_sns li img{
			width:100%;
			}
			
		#footer .footer_gray .footer_link{
			margin-top:15px;
			}
		#footer .footer_gray .footer_link li{
			width:45%;
			background:url(../../../img/common/sp/dotted.png) repeat-x;
			padding-top:10px;
			padding-bottom:10px;
			position:relative;
			padding-left:10px;
			font-size:85%;
			box-sizing:border-box;
			}
			#footer .footer_gray .footer_link li::before{
				content:"";
				position:absolute;
				background-image:url(../../../img/common/sp/arrow.png);
				left:0;
				top:1.3em;
				width:4px;
				height:6px;
				background-size:cover;
				}
		#footer .footer_gray .footer_link li:nth-of-type(1),
		#footer .footer_gray .footer_link li:nth-of-type(2){
			background:none;
			}
		#footer .footer_gray .footer_link li:nth-of-type(odd){
			float:left;
			clear:both;
			}
		#footer .footer_gray .footer_link li:nth-of-type(even){
			float:right;
			}
		.footer_content{
			float:none;
			max-width: 600px;
			width:100%;
			margin:auto;
			}
	#footer .footer_bottom{
		background-color:#D71717;
		text-align:center;
		color:#fff;
		padding:5px;
		}
		
	.footer_pr{
		margin: 0 auto;
		margin-bottom: 8%;
		width: 300px;
		text-align: right;
		float: none;
		}
	
				

}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* sp */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (max-width: 800px){
			
	
	.main{
		position:relative;
		background-position:center;
		background-size:cover;
		background-image: url(../../img/special/oc_guide/top_main_bg.jpg);
		}
		.main > div.dis_table{
			}
			.main > div.dis_table > div{
				text-align:center;
				color:#fff;
				padding: 10% 0;
			}
			.main > div.dis_table > div #top_main{
			}
				.main > div.dis_table > div #top_main img{
					width:45%;
					max-width: 312px;
				}
			.main > div.dis_table > div #top_school {
				font-size: 8.2vw;
				letter-spacing: -3px;
				line-height: 1.4;
				box-sizing: border-box;
				margin: 27vw auto 8vw;
				position: relative;
				z-index: 1;
			}
			.main > div.dis_table > div #top_school::before {
				position: absolute;
				content: "";
				top: -20vw;
				left: 0vw;
				right: 0;
				margin: auto;
				width: 80vw;
				height: 62.5vw;
				background-image: url("../../img/special/oc_guide/top_main_school.png");
				background-size: cover;
				z-index: -1;
			}
				.main > div.dis_table > div #top_school span {
				}
				.main > div.dis_table > div #top_fuki {
					position: absolute;
					top: -60%;
					left: 5%;
					font-size: 4vw;
					letter-spacing: -1px;
					line-height: 1.2;
					z-index: 1;
				}
				.main > div.dis_table > div #top_fuki::before {
					position: absolute;
					content: "";
					top: -6vw;
					left: -2vw;
					width: 27vw;
					height: 27vw;
					background-image: url("../../img/special/oc_guide/top_main_fuki.png");
					background-size: cover;
					z-index: -1;
				}
			
				
	.oc_logo{
		width:100%;
		text-align:center;
		}
		.oc_logo img{
			vertical-align:bottom;
			margin-top:30px;
			}
		.oc_logo img.img1{
			margin-right: 15px;
			height: 13px;
			}
		.oc_logo img.img2{
			height: 20px;
			}
	
	/* =========================================================== detail */
			
			/* アイコンのところ */
			.tit_icon{
				width:33px;
				}
			.waku_white{
				background-image: url(../../img/special/oc_guide/waku_white.png);
				background-repeat: no-repeat;
				/*width: 209px;*/
				width: 123px;
				height: auto;
				margin: auto;
				position: relative;
				text-align: center;
				padding-top: 20px;
				box-sizing: border-box;
				background-position:top center;
				background-size:contain;
				}
			.waku_white::before,
			.waku_white::after{
				width: 1000%;
				content: "";
				background-color: #fff;
				display: block;
				position: absolute;
				/*height: 51px;*/
				height: 30px;
				top: 0;
				}
			.waku_white::before{
				right: 100%;
				}
			.waku_white::after{
				left: 100%;
				}
				
				
	#contents.top .sec1{
		text-align:left;
		width:90%;
		margin:auto;
		margin-top:50px;
		}
	#contents.top .sec1 h1{
		color: #00a0ff;
		background: -webkit-linear-gradient(left, #00a0ff 0%, #00c722 88%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size:18px;
		font-weight:bold;
		text-align: center;
		}
		#contents.top .sec1 p{
			margin-top:15px;
			}
		#contents.top .sec1 dl {
			margin: 30px auto;
			text-align: center;
		}
			#contents.top .sec1 dl dt {
				color: #00a0ff;
				background: -webkit-linear-gradient(left, #00a0ff 0%, #00c722 88%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight:bold;
			}
				#contents.top .sec1 dl dt span {
					display: inline-block;
					width: 7px;
					height: 7px;
					margin-bottom: 2px;
					background-size: cover;
				}
				#contents.top .sec1 dl dt span.cl {
					background-image: url("../../img/special/oc_guide/circle_l.png");
					margin-right: 7px;
				}
				#contents.top .sec1 dl dt span.cr {
					background-image: url("../../img/special/oc_guide/circle_r.png");
					margin-left: 7px;
				}
			#contents.top .sec1 dl dd {
				margin-top: 10px;
			}
				#contents.top .sec1 dl dd a {
					display: inline-block;
					font-weight: bold;
					color: #00b193;
					background-color: #ffdb00;
					padding: 5px 24px 5px 10px;
					position: relative;
				}
				#contents.top .sec1 dl dd a::before {
				}

				.btn_y {
					display: inline-block;
					font-weight: bold;
					color: #00b193;
					background-color: #ffdb00;
					padding: 5px;
					width: 280px;
					box-sizing: border-box;
					position: relative;
				}
				.btn_y::before {
					position: absolute;
					content: "";
					top: 0;
					bottom: 2px;
					margin: auto;
					right: 12px;
					width: 6px;
					height: 6px;
					border-top: 1px solid #00b193;
					border-right: 1px solid #00b193;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
				}
		
	#contents.top h3{
		text-align:center;
		line-height:1.3em;
		margin-top: 10px;
		}
	
		#contents.top .sec4 {
		}
		#contents.top .sec4 dl {
			padding: 35px 0 0; 
		}
		#contents.top .sec4 dl:nth-child(2) {
			position: relative;
			margin-bottom: 30px;
		}
		#contents.top .sec4 dl:nth-child(2)::before {
			position: absolute;
			content: "";
			width: 100%;
			height: calc(100% - 40px);
			top: 70px;
			left: 0;
			background-color: #efefef;
		}
			#contents.top .sec4 dl dt {
				font-size:17px;
				padding-bottom:25px;
				position:relative;
			}
				#contents.top .sec4 dl dt img {
					width:100%;
					max-width:70px;
				}
			#contents.top .sec4 dl dd {
				text-align: left;
				position: relative;
			}
				#contents.top .sec4 dl dd h4 {
					color: #00b193;
					font-size: 14vw;
					line-height: 1.1;
					letter-spacing: -1.5vw;
					margin-left: -1.5vw;
				}
				#contents.top .sec4 dl:nth-child(2) dd h4 {
					text-align: right;
				}
				#contents.top .sec4 dl dd div.sec_img {
					position: absolute;
				}
				#contents.top .sec4 dl:nth-child(1) dd div.sec_img {
					top: -1vw;
					right: 0;
					width: 40%;
				}
				#contents.top .sec4 dl:nth-child(2) dd div.sec_img {
					top: 13vw;
					left: 0;
					width: 33%;
				}
				#contents.top .sec4 dl:nth-child(3) dd div.sec_img {
					top: 10vw;
					right: 0;
					width: 30%;
				}
					#contents.top .sec4 dl dd div.sec_img img {
						max-width: 100%;
					}
				#contents.top .sec4 dl dd p {
					color: #212121;
					margin-top: 15px;
				}

					
		/* オープンキャンパスに参加する前に */
		#contents.top .sec4,
		#contents.top .sec2{
			overflow:hidden;
			margin-top: 65px;
			}
			#contents.top .sec4 h3,
			#contents.top .sec2 h3{
				margin-top:10px;
				font-size:1.5em;
				padding-bottom:20px;
				}
			#contents.top .sec4 .dl_wrap,
			#contents.top .sec2 .dl_wrap{
				background-color:#fff;
				text-align:center;
				}
			#contents.top .sec2 dl{
				background-position:center;
				background-size:cover;
				padding: 40px 0 60px; 
				}
			#contents.top .sec2 dl:nth-of-type(1){
				background-image: url(../../img/special/oc_guide/point1_bg.jpg);
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: 50% 0%;
				background-color: #999999;
				}
			#contents.top .sec2 dl:nth-of-type(2){
				background-image: url(../../img/special/oc_guide/point2_bg.jpg);
				}
			#contents.top .sec2 dl:nth-of-type(3){
				background-image: url(../../img/special/oc_guide/point3_bg.jpg);
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: 50% 0%;
				background-color: #ededed;
			}
				#contents.top .sec4 dl dt,
				#contents.top .sec4 dl dd,
				#contents.top .sec2 dl dt,
				#contents.top .sec2 dl dd{
					width:90%;
					margin:auto;
					}
				#contents.top .sec4 dl dt,
				#contents.top .sec2 dl dt{
					font-size:17px;
					padding-bottom:25px;
					position:relative;
					}
					#contents.top .sec2 dl dt img{
						width:100%;
						max-width:70px;
						margin-bottom:25px;
						}
				#contents.top .sec2 dl dd.text{
					font-weight:bold;
					text-align: left;
					margin: 0 auto 40px;
				}
				#contents.top .sec2 dl.point01 dd.text{
					width: 280px;
					padding-bottom: 20px;
					border-bottom: solid 1px rgba(255,255,255,.5);
				}
					#contents.top .sec2 dl.point01 dd.text div {
						text-align: center;
						line-height: 1;
						padding: 10px 0;
						border-top: solid 1px rgba(255,255,255,.5);
						border-bottom: solid 1px rgba(255,255,255,.5);
					}
					#contents.top .sec2 dl.point01  dd.text ul {
						margin-top: 15px;
					}
						#contents.top .sec2 dl.point01  dd.text ul li {
							text-indent: -1.7em;
							padding-left: 1.7em;
							line-height: 1.6;
						}
						#contents.top .sec2 dl.point01  dd.text ul li + li {
							margin-top: 5px;
						}
					#contents.top .sec2 dl.point01  dd.text ul + div {
						margin-top: 25px;
					}

		#contents.top .sec2 dl.point02 {
		}
			#contents.top .sec2 dl.point02 dt {
			}
			#contents.top .sec2 dl.point02 dd {
			}
				#contents.top .sec2 dl.point02 dd ul {
				}
					#contents.top .sec2 dl.point02 dd ul li {
						width: calc(49.25% - 2px);
						float: left;
						border: solid 1px rgba(255,255,255,.5);
						padding: 10px 5px 10px 35px;
						box-sizing: border-box;
						position: relative;
						letter-spacing: -0.5px;
						line-height: 1.5;
					}
					#contents.top .sec2 dl.point02 dd ul li::before {
						position: absolute;
						content: "";
						top: 0;
						left: 10px;
						bottom: 0;
						margin: auto;
						width: 17px;
						height: 16px;
						background-image: url("../../img/special/oc_guide/check_icon_icon.png");
						background-size: cover;
					}
					#contents.top .sec2 dl.point02 dd ul li:nth-child(even) {
						margin-left: 1.5%;
					}
					#contents.top .sec2 dl.point02 dd ul li:nth-child(n + 3) {
						margin-top: 6px; 
					}
						#contents.top .sec2 dl.point02 dd ul li div {
							display: table;
						}
							#contents.top .sec2 dl.point02 dd ul li p {
								display: table-cell;
								vertical-align: middle;
							}

		#contents.top .sec2 dl.point03 {
		}
			#contents.top .sec2 dl.point03 dt {
			}
			#contents.top .sec2 dl.point03 dd {
			}
				#contents.top .sec2 dl.point03 dd h5 {
					background: -webkit-linear-gradient(left, #00a0ff 0%, #00c722 88%);
					text-align: center;
					line-height: 1.5;
					padding: 5px;
					font-size: 14px;
				}
				#contents.top .sec2 dl.point03 dd ul {
					margin-top: 5px;
				}
				#contents.top .sec2 dl.point03 dd ul + h5 {
					margin-top: 20px;
				}
					#contents.top .sec2 dl.point03 dd ul li {
						margin-top: 5px;
						background-color: #fff;
						cursor: pointer;
						padding: 8px;
					}
					#contents.top .sec2 dl.point03 dd ul li + li {
					}
						#contents.top .sec2 dl.point03 dd ul li div.open {
							color: #212121;
							font-weight: normal;
							position: relative;
							padding-right: 20px;
						}
						#contents.top .sec2 dl.point03 dd ul li div.open::before {
							position: absolute;
							content: "";
							top: 0;
							bottom: 2px;
							margin: auto;
							right: 5px;
							width: 6px;
							height: 6px;
							border-bottom: 1px solid #212121;
							border-right: 1px solid #212121;
							-webkit-transform: rotate(45deg);
							transform: rotate(45deg);
							transition-duration: 300ms;
						}
						#contents.top .sec2 dl.point03 dd ul li div.open.on::before {
							bottom: -2px;
							-webkit-transform: rotate(-135deg);
							transform: rotate(-135deg);
						}
							#contents.top .sec2 dl.point03 dd ul li div.open div {
								color: #00b193;
								font-weight: bold;
								display: block;
								font-size: 16px;
								letter-spacing: 2px;
								position: absolute;
								left: 0;
								top: 0;
								bottom: 0;
								margin: auto;
								line-height: 1;
								height: 16px;
							}
								#contents.top .sec2 dl.point03 dd ul li div.open p {
									float: right;
									width:  calc(100% - 30px);
									line-height: 1.5;
								}
							#contents.top .sec2 dl.point03 dd ul li > p {
								padding-top: 8px;
								color: #212121;
								font-weight: normal;
								display: none;
								line-height: 1.5;
							}
                                #contents.top .sec2 dl.point03 dd ul li > p .box{
                                   display: block;
                                }
                                #contents.top .sec2 dl.point03 dd ul li > p .box + .box{
                                    margin-top: 8px;
                                }

	
		#contents.top .sec5 {
			padding: 40px 5% 60px;
		}
			#contents.top .sec5 .sec_tit {
				text-align: center;
			}
				#contents.top .sec5 .sec_tit dl {
				}
					#contents.top .sec5 .sec_tit dl dt {
					}
						#contents.top .sec5 .sec_tit dl dt div {
							width: 20px;
							margin: auto;
						}
							#contents.top .sec5 .sec_tit dl dt div img {
								max-width: 100%;
							}
						#contents.top .sec5 .sec_tit dl dt p {
							font-size: 22px;
							letter-spacing: 2px;
							margin-top: 8px;
						}
					#contents.top .sec5 .sec_tit dl dd {
						margin-top: 15px;
					}
			#contents.top .sec5 .sec_blo {
				margin: 40px 0 0;
			}
				#contents.top .sec5 .sec_blo .sec_blo_tit {
					text-align: center;
				}
					#contents.top .sec5 .sec_blo .sec_blo_tit span {
						display: inline-block;
						position: relative;
						padding: 0 20px;
						font-weight: bold;
						letter-spacing: 2px;
					}
					#contents.top .sec5 .sec_blo .sec_blo_tit span::after ,
					#contents.top .sec5 .sec_blo .sec_blo_tit span::before {
						position: absolute;
						content: "";
						background-size: cover;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 3px;
						height: 16px;
					}
					#contents.top .sec5 .sec_blo .sec_blo_tit span::before {
						background-image: url("../../img/special/oc_guide/kakko_l.png");
						left: 0;
					}
					#contents.top .sec5 .sec_blo .sec_blo_tit span::after {
						background-image: url("../../img/special/oc_guide/kakko_r.png");
						right: 0;
					}
				#contents.top .sec5 .sec_blo ul {
				}
					#contents.top .sec5 .sec_blo ul li {
						background-color: #efefef;
						margin-top: 10px;
						padding: 15px;
					}
						#contents.top .sec5 .sec_blo ul li dl {
						}
							#contents.top .sec5 .sec_blo ul li dl dt {
								font-weight: bold;
							}
								#contents.top .sec5 .sec_blo ul li dl dt div {
									display: inline-block;
								}
									#contents.top .sec5 .sec_blo ul li dl dt div span {
										color: #00b193;
										font-size: 16px;
									}
								#contents.top .sec5 .sec_blo ul li dl dt p {
									display: inline-block;
									margin-left: 5px;
								}
							#contents.top .sec5 .sec_blo ul li dl dd {
								margin-top: 6px;
							}
			#contents.top .sec5 .sec_blo .btn {
				margin-top: 25px;
			}
			#contents.top .sec5 .sec_blo .btn + .btn {
				margin-top: 10px;
			}
				#contents.top .sec5 .sec_blo .btn a {
					width: 100%;
					text-align: center;
					padding: 8px 5px;
				}
					#contents.top .sec5 .sec_blo .btn a span {
						width: 14px;
						display: inline-block;
						line-height: 1;
						font-size: 0;
						vertical-align: middle;
						margin-left: 5px;
					}
						#contents.top .sec5 .sec_blo .btn a span img {
							max-width: 100%;
						}

	
	/* Recommend */
		#contents .sec3{
			overflow:hidden;
			padding-bottom:45px;
			margin-top: 45px;
			text-align:center;
			}
			#contents .sec3 h3{
				margin-top:15px;
				font-size:1.5em;
				padding-bottom:20px;
				}
				#contents .sec3 h3 img{
					width:50%;
					max-width:220px;
					}
				#contents .sec3 .detail_list_wrap{
					margin-top:25px;
					}
					#contents .sec3 .detail_list_wrap > p{
						margin: 0 5%;
						text-align: left;
						}
						#contents .sec3 .detail_list_wrap .ul01 > li{
							padding:20px;
							background-color:#EFEFEF;
							margin:20px;
							}
							#contents .sec3 .detail_list_wrap .ul01 > li img {
								width:100%;
								margin-bottom:10px;
								}
							#contents .sec3 .detail_list_wrap .ul01 > li dl dt{
								font-weight: bold;
								font-size: 16px;
								margin: 5px 0px;
								}
							#contents .sec3 .detail_list_wrap .ul01 > li dl dd{
								margin: 5px 10px 10px;
								}
                /*学校の特徴*/
                #contents .sec3 .detail_list_wrap .ul01 > li .point_list{
                }
                    #contents .sec3 .detail_list_wrap .ul01 > li .point_list ul{
                    }
                        #contents .sec3 .detail_list_wrap .ul01 > li .point_list:after{
                        }
                            #contents .sec3 .detail_list_wrap .ul01 > li .point_list li{
                                text-align: left;
                                position: relative;
                                padding-left: 1em;
                            }
                                #contents .sec3 .detail_list_wrap .ul01 > li .point_list li:before{
                                    content: '';
                                    display: block;
                                    position: absolute;
                                    width: 8px;
                                    height: 8px;
                                    background-color: #00b193;
                                    border-radius: 100%;
                                    left: 0;
                                    top: 0.5em;
                                }
    
    
					#contents .sec3 .detail_list_wrap .ul01 > li p{
						text-align:left;
						}
			#contents .sec3 .btn{
				text-align:center;
				margin-top:40px;
				}
				#contents .sec3 .btn span{
					display:inline-block;
					padding:1px;
					position:relative;
					}
				#contents .sec3 .btn span::after{
					position:absolute;
					content:"";
					top:50%;
					right: 15px;
					width: 6px;
					margin-top:-5px;
					height: 6px;
					border-bottom: 1px solid #00C52D;
					border-right: 1px solid #00C52D;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
					transition:transform 500ms;
					-webkit-transition:transform 500ms;
					}
				#contents .sec3 .btn span::after{
					margin-top:-2px;
					-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
					transition:transform 500ms;
					-webkit-transition:transform 500ms;
					}
					#contents .sec3 .btn span div{
						background-color:#fff;
						padding:10px;
						width:280px;
						}
						#contents .sec3 .btn span div img{
							width:95px;
							line-height:0;
							vertical-align:middle;
							}
			#contents .sec3 ul.bunya{
				margin-top:15px;
				margin-left:-5px;
				}
				#contents .sec3 ul.bunya li{
					width:calc(100%/3 - 5px);
					float:left;
					margin-left:5px;
					font-weight:bold;
					display:table;
					margin-top:5px;
					padding:5px;
					box-sizing:border-box;
					line-height:1.5em;
					font-size:13px;
					background: #fff !important;
					}
				#contents .sec3 ul.bunya li span{
					display:table-cell;
					vertical-align:middle;
					color: #212121;
					font-weight: normal;
					}

	
			/* ボタン */
		#contents .btn_sec{
			margin-top: 20px;
			margin-bottom:15px;
			}
			#contents .btn_sec a{
				}
			#contents .btn_sec a + a{
				margin-top:15px;
				}
				#contents .btn_sec a::after{
					}					
				#contents .btn_sec2 a::after{
					display:none;
					}
				#contents .btn_sec2	 a img{
					position:absolute;
					content:"";
					top:0;
					bottom:0;
					margin:auto !important;
					right: 15px;
					width: 10px !important;
					height: 9px;
					}
							
		#footer{
			margin-top:0;
			}
			
	/* =========================================================== detail end */
		
		
		
		
}