@charset "UTF-8";

/*ÏŒӥک`¥¸¹²Í¨CSS¥Õ¥¡¥¤¥ë*/

/* ----------------------------------------------------------------------------------------------------
*  header
* --------------------------------------------------------------------------------------------------*/

/*----header------------------------------*/

#header_inner{
	height: 715px;
	background-color: #fff;
}
#header_inner .left{
	float: left;
	max-width: 600px;
	width: 47%;
}
#header_inner .home_back{
	width: 100%;
}
#header_inner .home_back a{
	font-size: 1.4rem;
	color: #fff;
	background: #424f80;
	padding: 12px 15px;
	display: block;
	transition: opacity 0.2s ease-out;
}
#header_inner .home_back a:before {
	content: '';
	display: inline-block;
	vertical-align: sub;
	background: url(/with-rehabilitation/img/grad/back_arrow_icon.png) no-repeat center;
	background-size: 100%!important;
	width: 16px;
	height: 16px;
	margin-right: 10px;
}
#header_inner .txt{
	padding: 125px 0 0 100px;
}
#header_inner .logo{
	width: 333px;
}
#header_inner .page_cate{
	font-size: 2.4rem;
	letter-spacing: 0.1em;
	color: #fff;
	text-align: center;
	display: inline-block;
	background: #434f81;
	width: 225px;
	border-radius: 50px;
	padding: 8px 5px;
	margin-top: 30px;
}
.ie #header_inner .page_cate{
	padding: 12px 5px 5px;
}
#header_inner .catch{
	font-size: 2.2rem;
	line-height: 1.7;
	margin-top: 60px;
}
#header_inner .right{
	float: right;
	text-align: right;
	min-width: calc(100% - 600px + 1px);
	width: 53%;
	height: 100%;
	position: relative;
	overflow: hidden;
	margin-left: -1px;
	z-index: 1;
}
#header_inner .right img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);
	margin: auto;
}

/*hover*/

#header_inner .home_back a:hover{
	opacity: 0.8;
}

/*end*/


@media screen and (max-width: 1581px) {

	#header_inner .right img{
		width: auto;
		height: 100%;
	}

}
@media screen and (max-width: 1350px) {

	#header_inner .txt {
		padding: 130px 0 0 10%;
	}

}
@media screen and (max-width: 768px) {

	#header_inner{
		height: auto;
	}
	#header_inner .right{
		float: none;
		width: 100%;
		max-width: 100%;
	}
	#header_inner .right img{
		position: static;
		transform: translateY(0) translateX(0);
		-ms-transform: translateY(0) translateX(0);
		-moz-transform: translateY(0) translateX(0);
		height: auto;
		width: 100%;
	}
	#header_inner .left{
		float: none;
		width: 100%;
		max-width: 100%;
	}
	#header_inner .left .home_back{
		display: none;
	}
	#header_inner .txt{
		padding: 12% 0 18%;
		width: 61.1%;
		margin: auto;
	}
	#header_inner .logo{
		width: 100%;
	}
	#header_inner .page_cate{
		font-size: 1.6rem;
		max-width: 225px;
		width: 67.10%;
		padding: 6px 5px;
		margin: 11% auto 0;
		display: block;
	}
	#header_inner .catch{
		display: none;
	}

}


/*----nav------------------------------*/

nav{
	padding: 63px 30px;
}
nav .top{
	width: 160px;
	float: left;
	position: relative;
}
nav .top:after{
	content: '';
	position: absolute;
	right: 0;
	height: 64px;
	width: 1px;
	background: #bebcbd;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	margin: auto;
}
nav .top a{
	font-size: 1.8rem;
	color: #424f80;
	transition: 0.2s;
}
nav .link{
	margin-top: 0;
}

/*hover*/

nav .top a:hover{
	color: #000;
	border-bottom: 1px solid #000;
}
nav .link ul li.current a, nav .link ul li a:hover{
	border-bottom: 1px solid #424f80;
	color: #424f80;
}

/*end*/

@media screen and (max-width: 768px) {

	nav{
		padding: 7% 1%;
		max-width: 370px;
		margin: auto;
	}
	nav .top{
		display: none;
	}
	nav .link{
		width: 100%;
		max-width: 100%;
		text-align: left;
	}
	nav .link ul{
		display: block;
		text-align: center;
	}
	nav .link ul li:nth-child(3), nav .link ul li:last-child{
		margin-right: 0;
	}

}


/* ----------------------------------------------------------------------------------------------------
*  contents
* --------------------------------------------------------------------------------------------------*/

/*----topics------------------------------*/

#topics{
	margin-top: 0;
	align-items: stretch;
}
#topics > .slider{
	width: 50%;
}
#topics > div.pat01{
	width: 25%;
}
#topics > div.pat01 a{
	width: 100%;
	height: 100%;
	position: relative;
	transition: background 0.2s ease-out;
}
#topics > div.pat01 a:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: auto;
	width: 16%;
	max-width: 53px;
	padding-top: 16%;
	background: url(/with-rehabilitation/img/graduate/topics_deco01.png) no-repeat right 0;
	background-size: 100%!important;
}
#topics .txtbox{
	width: 100%;
	margin: auto;
}
#topics .txtbox:before{
	display: none;
}

@media screen and (max-width: 768px) {

	#topics > .slider{
		width: 100%;
	}
	#topics > div.pat01{
		width: 100%;
	}
	#topics > div + div{
		margin-top: 1%;
	}
	#topics > div.pat01 a{
		padding: 5% 0;
	}
	#topics > div.pat01 a:before{
		top: 50%;
		right: 2%;
		width: 6%;
		height: 0;
		padding-top: 6.2%;
		margin-top: -3%;
		background: url(/with-rehabilitation/img/graduate/topics_arrow_icon.png) no-repeat 0 0;
	}

}

/*----news------------------------------*/

#news .newsbox ul{
	border-left: 1px solid #b8b6b7;
	padding: 20px 0 20px 2.5%;
}
#news .newsbox ul li{
	padding-left: 130px;
}
#news .left{
	position: relative;
	width: 57%;
}
#news h2 .sub{
	font-size: 1.5rem;
	vertical-align: super;
}
#news h2 img{
	width: 38%;
	max-width: 264px;
	vertical-align: text-bottom;
}
#news .left .btn{
	position: absolute;
	top: 0;
	right: 0;
	width: 145px;
	max-width: 145px;
	width: 22%;
}
#news .left .btn a{
	color: #fff;
	font-size: 1.4rem;
	display: block;
	background: #424f80;
	text-align: center;
	padding: 10px 0;
	transition: opacity 0.2s ease-out;
}
.ie #news .left .btn a{
	padding: 12px 0 8px;
}
#news .left .btn a:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: all 0.2s ease-out;
}
#news .right{
	text-align: right;
	position: relative;
	margin-top: 0;
	max-width: 593px;
	width: 40%;
}
#news .right > img{
	width: 593px;
	position: absolute;
	bottom: 0;
	left: 0;
}
#news .right .link{
	max-width: 415px;
	width: 90%;
	position: relative;
	z-index: 1;
	margin: auto;
	padding-bottom: 22px;
}
#news .right .link li + li{
	margin-top: 17px;
}
#news .right .link li a{
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	background: #fff;
	position: relative;
}
#news .right .link li .imgbox{
	width: 133px;
}
#news .right .link li .imgbox img{
	vertical-align: middle;
}
#news .right .link li .txtbox{
	width: calc(100% - 133px);
	padding-left: 30px;
}
#news .right .link li .txtbox .name{
	font-size: 2.2rem;
	color: #333333;
	transition: 0.2s;
}
#news .right .link li .txtbox .name span{
	font-size: 0.9rem;
	color: #424f80;
	display: block;
}

/*hover*/

#news .left .btn a:hover{
	opacity: 0.7;
}
#news .right .link li a:hover .imgbox img{
	opacity: 1;
}
#news .right .link li a:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 10px solid #424f80;
	transition: 0.2s;
	opacity: 0;
}
#news .right .link li a:hover:before {
	opacity: 1;
}
#news .right .link li a:hover .txtbox .name{
	color: #424f80;
}

/*end*/

@media screen and (max-width: 768px) {

	#news .left{
		width: 94%;
	}
	#news h2 img{
		width: 50%;
	}
	#news h2 .sub{
		font-size: 1rem;
	}
	#news .newsbox ul{
		border-left: 0;
		padding: 0 3%;
	}
	#news .newsbox ul li{
		padding-left: 80px;
	}
	#news .left .btn{
		position: static;
		width: 100%;
		max-width: 100%;
		margin-top: 8%;
	}
	#news .left .btn a{
		font-size: 1.5rem;
		padding: 17px 0;
	}
	#news .right{
		width: 100%;
		max-width: 100%;
		margin: 10% 0 0%;
		background: url(/with-rehabilitation/img/graduate/news_img01_sp.png) no-repeat top left;
		background-size: cover!important;
	}
	#news .right .link{
		max-width: 10;
		width: 94%;
		padding: 6% 0;
	}
	#news .right .link li + li{
		margin-top: 3%;
	}
	#news .right .link li .imgbox{
		width: 25%;
	}
	#news .right .link li .txtbox{
		width: 75%;
		padding-left: 7%;
	}
	#news .right .link li .txtbox .name{
		font-size: 1.4rem;
	}
	#news .right .link li .txtbox .name span{
		font-size: 0.7rem;
		margin-top: 2%;
	}
}


/* ----------------------------------------------------------------------------------------------------
*  footer
* --------------------------------------------------------------------------------------------------*/

footer .inner{
	padding: 80px 0 80px;
}
#info{
	margin: 0 auto;
}
#info .page_cate {
	font-size: 1.6rem;
	color: #fff;
	letter-spacing: 0.1em;
	text-align: center;
	background: #434f81;
	width: 210px;
	border-radius: 50px;
	padding: 8px 5px;
	margin: 20px auto 0;
}
.ie #info .page_cate{
	padding: 10px 5px 6px;
}
#info .access{
	margin-top: 30px;
}
#footer_under{
	margin-top: 180px;
}

@media screen and (max-width: 768px) {

	footer{
		padding-top: 0;
	}
	footer .inner{
		padding: 17.2% 0 8%;
		background: url(/with-rehabilitation/img/common/footer_bg01_sp.jpg) no-repeat center bottom;
		background-size: cover;
	}
	#info .page_cate{
		font-size: 1.2rem;
		max-width: 210px;
		width: 47%;
		margin: 5% auto 0;
		padding: 6px 5px;
	}
	#info .access{
		margin-top: 5.7%;
	}
	#footer_under{
		margin-top: 40%;
	}



}