@charset "utf-8";

/* KV */
#graduates #main {
	background: url(../images/graduates/index/kv.jpg) center center /cover no-repeat;
}


/* Page Title */
#graduates.inner #page-title {
	background: rgba(255,255,255,.92);
}
#graduates.inner #page-title:before,
#graduates.inner #page-title:after {
    height: 7px;
    background-color: #1e8eac;
	z-index: 50;
}
#graduates.inner #page-title:before {
    top: 0;
}
#graduates.inner #page-title:after {
	bottom: 0;
}
#graduates.inner #page-title h2 {
	color: #000;
}

#graduates.inner #page-title h2:before {
	top: 0;
	left: 0;
}
#graduates.inner #page-title h2:after {
	bottom: 0;
	right: 0;
}

/* graduates01 */
#graduates1 {}
#graduates1 .container {
	padding: 80px 4.166vw 0;
}
#graduates h3 {
	font: normal 45px/1 'crimson',sans-serif;
	text-align: center;
    margin-bottom: 70px;
    color: #000;
}
#graduates h3 small {
	font: normal 12px/1 'nsans',sans-serif;
	display: block;
    margin-top: 10px;
	color: #4c4c4c;
}

.graduates-box1 .news-box {
    padding: 15px;
    background: #f6f6f6;
}
.news-box-lastupdate {
    width: 37.73%;
    float: left;
    background: #fff;
    position: relative;
    height: 25vw;
    overflow: hidden;
    display: block;
}
.news-box-lastupdate img {
    width: 100%;
    height: auto;
}
.news-box-lastupdate .news-date {
    background: #fff;
    position: absolute;
    left: 1.25vw;
    bottom: 6vw;
    width: 11.25vw;
    height: 5.25vw;
    color: #438679;
    z-index: 2;
	border: none;
}
.news-box-lastupdate .news-date-inner {
    position: relative;
    height: 5.25vw;
}
.news-box-lastupdate .news-date-inner .year {
    font: normal 14px/1 'humnst',sans-serif;
    display: block;
    letter-spacing: .05em;
    top: 1vw;
    left: 1vw;
}
.news-box-lastupdate .news-date-inner .month {
    font: bold 20px/1 'humnst',sans-serif;
    left: 1vw;
    bottom: 1.25vw;
    letter-spacing: .05em;
}
.news-box-lastupdate .news-date-inner .date {
    font: bold 40px/1 'humnst',sans-serif;
    border-left: 2px solid #438679;
    padding-left: 1vw;
    top: 1vw;
    right: 1vw;
    bottom: 1vw;
}
.news-box-lastupdate .news-date-inner .year,
.news-box-lastupdate .news-date-inner .month,
.news-box-lastupdate .news-date-inner .date {
    position: absolute;
}
.news-box-lastupdate p {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #438679;
    color: #fff;
    font: 16px/1.5 'humnst','nsans',sans-serif;
    padding: 3.25vw 1.25vw 2.75vw;
}
.news-box-list {
    width: 60.37%;
    height: 25vw;
    float: right;
        position: relative;
}
.news-article {
    background: #fff;
    margin-bottom: 0.1vw;
    display: table;
    padding: .75vw 0;
    width: 100%;
}
.news-article .news-date {
    display: table-cell;
    vertical-align: middle;
    width: 14.75vw;
    border-right: .1vw solid #f6f6f6;
    height: 6.75vw;
}
.news-article .news-date-inner {
    position: relative;
    height: 6.75vw;
}
.news-article .news-date-inner .year,
.news-article .news-date-inner .month,
.news-article .news-date-inner .date {
    position: absolute;
}
.news-article .news-date-inner .year {
    font: normal 14px/1 'humnst',sans-serif;
    top: 2vw;
    left: 2.75vw;
	letter-spacing: .05em;
}
.news-article .news-date-inner .month {
    font: bold 20px/1 'humnst',sans-serif;
    left: 2.75vw;
    bottom: 2vw;
    letter-spacing: .05em;
}
.news-article .news-date-inner .date {
    font: bold 40px/1 'humnst',sans-serif;
    border-left: 3px solid #438679;
    padding-left: 1.25vw;
    top: 1.75vw;
    right: 2.75vw;
    bottom: 1.75vw;
}
.news-article .news-text {
    display: table-cell;
    vertical-align: middle;
    padding: 2vw 1.25vw;
}
.news-article .news-text p {
    color: #438679;
    font: 16px/1.5 'humnst','nsans',sans-serif;
}
.news-more {
    font: 15px/100px 'lato',serif;
    background: #438679;
    color: #fff;
    text-align: center;
    /*display: block;*/
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.news-box a:hover {
	opacity: .75;
}

.news-more:hover {
	color: #fff;
}

.news-box:after {
    content: "";
    display: table;
    clear: both;
}

/* graduates02 */
#graduates2 {}
#graduates2 .container {
	padding: 90px 0 0;
}

.graduates-box2 {
   	width: 100vw;
    height: 37.5vw;
	position: relative;
}
.graduates-box2 a {
	display: block;
}
.graduates-box2 a:hover {
	opacity: .75;
}
.graduates-box2 .interview1,
.graduates-box2 .interview2,
.graduates-box2 .interview3,
.graduates-box2 .interview4,
.graduates-box2 .interview5 {
	position: absolute;
}
.graduates-box2 .inner {
	position: absolute;
	display: block;
}
.graduates-box2 .interview1,
.graduates-box2 .interview2,
.graduates-box2 .interview3 {
	top: 0;
}
.graduates-box2 .interview4,
.graduates-box2 .interview5 {
	top: 18.75vw;
}
.graduates-box2 .interview2,
.graduates-box2 .interview4 {
	left: 50vw;
}
.graduates-box2 .interview3,
.graduates-box2 .interview5 {
	left: 75vw;
}
.graduates-box2 .interview2,
.graduates-box2 .interview3,
.graduates-box2 .interview4,
.graduates-box2 .interview5 {
	width: 25vw;
}
.graduates-box2 .interview1 {
	width: 50vw;
	left: 0;
}
.graduates-box2 .interview2 a,
.graduates-box2 .interview3 a,
.graduates-box2 .interview4 a,
.graduates-box2 .interview5 a {
	padding-bottom: 18.75vw;
}
.graduates-box2 .interview1 a {
	padding-bottom: 37.5vw;
	background: url(../images/graduates/index/interview1.jpg) no-repeat center center / cover;
}
.graduates-box2 .interview2 a {
	background: url(../images/graduates/index/interview2.jpg) no-repeat 32% 35% / 179% auto;
}
.graduates-box2 .interview3 a {
	background: url(../images/graduates/index/interview3.jpg) no-repeat center center / cover;
}
.graduates-box2 .interview4 a {
	background: url(../images/graduates/index/interview4.jpg) no-repeat 65% 22% / 171% auto;
}
.graduates-box2 .interview5 a {
	background: #438879;
	position: relative;
}
.graduates-box2 .interview1 .inner {
	width: 41.75%;
	height: 70%;
	background: url(../images/graduates/index/bg_interview1.svg) no-repeat center top / 100% auto;
	top: 2vw;
	left: 2vw;
	padding-top: 3.15vw;
}
.graduates-box2 .interview1 .inner .num {
	background: url(../images/graduates/index/bg_interview_num.svg) no-repeat center top / 31% auto;
    padding: 2.7vw 0 2.4vw;
}
.graduates-box2 .interview1 .inner .num p {
	color: #4f9e84;
	font: bold 2.91vw/1 'roboto',sans-serif;
	text-align: center;
}
.graduates-box2 .interview1 .inner p {
	color: #fff;
	text-align: center;
}
.graduates-box2 .interview1 .msg {
    font: bold 1.35vw/1.5 'humnst','nsans',sans-serif;
	position: relative;
	margin: 0 2vw;
	padding: 1vw 0;
}
.graduates-box2 .interview1 .msg:before,
.graduates-box2 .interview1 .msg:after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	border: solid #fff;
}
.graduates-box2 .interview1 .msg:before {
	top: 0;
	left: 0;
	border-width: 3px 0 0 3px;
}
.graduates-box2 .interview1 .msg:after {
	bottom: 0;
	right: 0;
	border-width: 0 3px 3px 0;
}
.graduates-box2 .interview1 .name {
	font: bold 1.35vw/1 'humnst','nsans',sans-serif;
	margin-top: 2vw;
}
.graduates-box2 .interview1 .name-en {
	font: bold 1vw/1 'lato',sans-serif;
	letter-spacing: .15em;
	margin-top: .8vw;
}
.graduates-box2 .interview2 .inner,
.graduates-box2 .interview3 .inner,
.graduates-box2 .interview4 .inner {
	width: 32.5%;
	height: 55%;
	top: 1vw;
	left: 1vw;
	padding-top: 8.625%;
}
.graduates-box2 .interview2 .inner .num,
.graduates-box2 .interview3 .inner .num,
.graduates-box2 .interview4 .inner .num {
	background: url(../images/graduates/index/bg_interview_num.svg) no-repeat center top / 60% auto;
	display: block;
    height: 100%;
}
.graduates-box2 .interview2 .inner .num p,
.graduates-box2 .interview3 .inner .num p,
.graduates-box2 .interview4 .inner .num p {
	font: bold 2.15vw/1 'roboto',sans-serif;
	text-align: center;
	padding-top: 25.52%;
}
.graduates-box2 .interview2 .inner .num p {
	color: #dac500;
}
.graduates-box2 .interview3 .inner .num p {
	color: #46aeb6;
}
.graduates-box2 .interview4 .inner .num p {
	color: #46add5;
}
.graduates-box2 .interview2 .inner {
	background: url(../images/graduates/index/bg_interview2.svg) no-repeat center bottom / 100% auto;
}
.graduates-box2 .interview3 .inner {
	background: url(../images/graduates/index/bg_interview3.svg) no-repeat center bottom / 100% auto;
}
.graduates-box2 .interview4 .inner {
	background: url(../images/graduates/index/bg_interview4.svg) no-repeat center bottom / 100% auto;
}
.graduates-box2 .interview5 .inner {
	display: block;
	height: 100%;
}
.graduates-box2 .interview5 .inner {
	font: bold 1.2vw/100% 'lato',sans-serif;
	letter-spacing: .15em;
	text-align: center;
	color: #fff;
	width: 100%;
}
.graduates-box2 .interview5 a:before {
	content: 'Q';
	font: bold 16.25vw/1 'roboto',sans-serif;
	color: rgba(255,255,255,.23);
	position: absolute;
	width: 100%;
	bottom: 7.25%;
	text-align: center;
	margin: auto;
}


/* graduates3 */
#graduates3 {}
#graduates3 .container {
	padding: 80px 4.166vw 0;
}

.graduates-box3 {
	background: #f6f6f6;
	padding: 15px;
	letter-spacing: -.4em;
	font-size: 0;
	margin: 0 -7.5px;
}
.graduates-box3 a {
	display: block;
	padding-bottom: 18.75vw;
}
.graduates-box3 a:hover {
	opacity: .75;
}
.graduates-box3 .links01,
.graduates-box3 .links02 {
	letter-spacing: normal;
	display: inline-block;
	vertical-align: top;
	width: 50%;
	padding: 0 7.5px;
}
.graduates-box3 .links01 a {
	position: relative;
	background: url(../images/graduates/index/bg_links1a.jpg) no-repeat left top / 100% auto;
}
.graduates-box3 .links01 a:before,
.graduates-box3 .links01 a:after {
	content: "";
    position: absolute;
    display: block;
	border: solid #438b79
}
.graduates-box3 .links01 a:before {
	content: "";
    position: absolute;
    display: block;
    top: .8vw;
    left: .8vw;
    right: .8vw;
    bottom: .8vw;
    border-width: 1px;
}
.graduates-box3 .links01 a:after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-width: 7px;
}
.graduates-box3 .links01 .inner {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.graduates-box3 .links01 .cell {
	background: url(../images/graduates/index/bg_links1b.svg) center 55.3333333% /12% no-repeat;
}
.graduates-box3 .links01 p {
	color: #438b79;
	text-align: center;
	font: normal 14px/1 'nsans',sans-serif;
	margin: 0;
}
.graduates-box3 .links01 .links-tit {
	font: 35px/1 'nserif',serif;
	margin-bottom: 21.3333333333%;
}
.graduates-box3 .links02 a {
	position: relative;
	background: url(../images/graduates/index/bg_links2a.png) no-repeat left top / cover;
}
.graduates-box3 .links02 a:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 117%;
	top: -20px;
	background: url(../images/graduates/index/bg_links2b.svg) no-repeat center top / 100% auto;
}


/* graduates4 */
#graduates4 {}
#graduates4 .container {
	padding: 80px 0 0;
}

.graduates-box4 {
	background: url(../images/common/contact-bg.jpg) center center /cover no-repeat;
    padding: 6.25vw 8.5% 12.5vw;
    position: relative;
}
.graduates4 h3 {
    text-align: center;
    margin-bottom: 5.5vw;
}



@media screen and (max-width:799px) {
	
	/* graduates1 */
	#graduates1 .container {
		padding: 45px 0 0;
	}
	#graduates1 h3,
	#graduates2 h3,
	#graduates3 h3 {
    	font: normal 8vw/1 'crimson',sans-serif;
		margin-bottom: 45px;
	}
	.news-box-lastupdate {
		width: auto;
		float: none;
		height: 53.6vw;
		margin-bottom: 2.4vw;
	}
	.news-box-lastupdate .news-date {
		left: 4vw;
		bottom: 12vw;
		width: 32.8vw;
		height: 14.4vw;
	}
	.news-box-lastupdate .news-date-inner {
		height: 14.4vw;
	}
	.news-box-lastupdate .news-date-inner .year {
		font-size: 4vw;
		top: 3.0vw;
		left: 4vw;
	}
	.news-box-lastupdate .news-date-inner .month {
		font-size: 4.8vw;
		left: 4vw;
		bottom: 3.0vw;
	}
	.news-box-lastupdate .news-date-inner .date {
		font-size: 9.6vw;
		line-height: 8vw;
		border-left: .8vw solid #438679;
		padding-left: 2.4vw;
		top: 3.2vw;
		right: 4vw;
		bottom: 3.2vw;
	}
	.news-box-lastupdate p {
		font-size: 3.2vw;
		line-height: 4.4vw;
		padding: 10vw 4vw 4vw;
	}
	.news-box-list {
		width: auto;
		height: 57.6vw;
		float: none;
	}
	.news-article {
		margin-bottom: 0.8vw;
		padding: 1.2vw 0;
	}
	.news-article .news-date {
		width: 34.4vw;
		border-right: .2vw solid #f6f6f6;
		height: 16vw;
	}
	.news-article .news-date-inner {
		height: 16vw;
	}
	.news-article .news-date-inner .year {
		font-size: 4vw;
		top: 3.6vw;
		left: 4.8vw;
	}
	.news-article .news-date-inner .month {
		font-size: 4.8vw;
		left: 4.8vw;
		bottom: 3.6vw;
	}
	.news-article .news-date-inner .date {
		font-size: 9.6vw;
		line-height: 8vw;
		border-left: .8vw solid #438679;
		padding-left: 1.25vw;
		top: 4vw;
		right: 4.8vw;
		bottom: 4vw;
	}
	.news-article .news-text {
		padding: 0vw 5.6vw;
	}
	.news-article .news-text p {
		font-size: 3.2vw;
		line-height: 1.5;
	}
	.news-more,
	.news-more:hover {
		font-size: 4.8vw;
		line-height: 18.4vw;
	}
	
	
	/* graduates2 */
	#graduates2 .container {
		padding: 45px 0 0;
	}
	.graduates-box2 {
		height: 153.6vw;
	}
	.graduates-box2 .interview1 {
		width: 100vw;
	}
	.graduates-box2 .interview1 a {
		height: 76.8vw;
	}
	.graduates-box2 .interview1 .inner {
		width: 41.6vw;
		height: 52.8vw;
		padding-top: 4.8vw;
		top: 4.8vw;
		left: 4.8vw;
	}
	.graduates-box2 .interview1 .inner .num {
		background: url(../images/graduates/index/bg_interview_num.svg) no-repeat center top / 31% auto;
		padding: 5.4vw 0;
	}
	.graduates-box2 .interview1 .inner .num p {
		font: bold 5.8vw/1 'roboto',sans-serif;
	}
	.graduates-box2 .interview1 .msg {
		margin: 0 2.5vw;
		padding: 1vw 0;
	}
	.graduates-box2 .interview1 .msg:before,
	.graduates-box2 .interview1 .msg:after {
		width: 1.5vw;
		height: 1.5vw;
	}
	.graduates-box2 .interview1 .msg:before {
		border-width: 2px 0 0 2px;
	}
	.graduates-box2 .interview1 .msg:after {
		border-width: 0 2px 2px 0;
	}
	.graduates-box2 .interview2 .inner,
	.graduates-box2 .interview3 .inner,
	.graduates-box2 .interview4 .inner {
		width: 16vw;
    	height: 20.5vw;
		top: 2.4vw;
		left: 2.4vw;
		padding-top: 12.32%;
	}
	.graduates-box2 .interview2 .inner .num,
	.graduates-box2 .interview3 .inner .num,
	.graduates-box2 .interview4 .inner .num {
		background: url(../images/graduates/index/bg_interview_num.svg) no-repeat center top / 74.8% auto;
	}
	.graduates-box2 .interview2 .inner .num p,
	.graduates-box2 .interview3 .inner .num p,
	.graduates-box2 .interview4 .inner .num p {
		font: bold 4.5vw/1 'roboto',sans-serif;
		padding-top: 33.95%;
	}
	.graduates-box2 .interview2 a,
	.graduates-box2 .interview3 a,
	.graduates-box2 .interview4 a,
	.graduates-box2 .interview5 a {
		width: 50vw;
		height: 38.4vw;
	}
	.graduates-box2 .interview2,
	.graduates-box2 .interview3 {
		top: 76.8vw;
	}
	.graduates-box2 .interview4,
	.graduates-box2 .interview5 {
		top: 115.2vw;
	}
	.graduates-box2 .interview2,
	.graduates-box2 .interview4 {
		left: 0;
	}
	.graduates-box2 .interview3,
	.graduates-box2 .interview5 {
		left: 50vw;
	}
	.graduates-box2 .interview5 a:before {
		content: 'Q';
		font: bold 34.25vw/1 'roboto',sans-serif;
		bottom: 4.25%;
	}
	
	
	/* graduates3 */
	#graduates3 .container {
		padding: 45px 0 0;
	}
	.graduates-box3 {
		margin: 0;
	}
	.graduates-box3 a {
		padding-bottom: 42.5vw;
	}
	.graduates-box3 .links01,
	.graduates-box3 .links02 {
		padding: 0;
		width: 100%;
		display: block;
	}
	.graduates-box3 .links01 {
		margin: 0 0 15px;
	}
	.graduates-box3 .links01 a:after {
		border-width: 5px;
	}
	.graduates-box3 .links01 a:before {
		top: 2vw;
		left: 2vw;
		right: 2vw;
		bottom: 2vw;
	}
	.graduates-box3 .links01 .inner {
		padding: 5.25vw 8.25vw;
	}
	.graduates-box3 .links01 .cell {
		background: url(../images/graduates/index/bg_links1b.svg) center 52.875% /13.5vw no-repeat;
	}
	.graduates-box3 .links01 p.links-tit {
    	font: 5.75vw/1 'nserif',serif;
		margin-bottom: 17.5vw;
	}
	.graduates-box3 .links01 p {
	    font: normal 2.5vw/1.4 'nsans',sans-serif;
	}
	.graduates-box3 .links02 a:before {
		top: -2.5%;
		height: 105%;
		background: url(../images/graduates/index/bg_links2b.svg) no-repeat center top / auto 100%;
	}
	
	
	/* graduates4 */
	#graduates4 .container {
		padding: 0;
	}
	.graduates-box4 {
		padding: 12.8vw 4.8vw 32vw
	}
	.graduates-box4 h3 {
		margin-bottom: 8.8vw;
	}
	.graduates-box4 h3 img {
		width: 77.6vw;
		height: auto;
	}
	
	.contact-box{
		border:none;padding:0;
	}
	.contact-address,
	.contact-accessmap,
	.contact-receipt,
	.contact-tel,.contact-fax {
		float: none;
		padding-left: 17.6vw;
		letter-spacing: .1em;
		width:auto;
	}
	.contact-address {
		font-size: 3.8vw;
		line-height: 11.2vw;
		background: url(../images/zip-mark.svg) left center /11.2vw no-repeat;
		margin-bottom: 8vw;
	}
	.contact-accessmap {
		font-size: 3.8vw;
		line-height: 11.2vw;
		background: url(../images/map-mark.svg) left center /11.2vw no-repeat;
		margin-bottom: 8vw;
	}
	.contact-receipt {
		font-size:3.8vw;
		line-height:6vw;
		background:url(../images/clock-mark.svg) left center /11.2vw no-repeat;padding:0.2vw 0;
		padding-left:17.6vw;
		margin-bottom:8vw;
	}
	.contact-tel{
		font-size: 8vw;
		line-height: 11.2vw;
		background: url(../images/tel.svg) left center /11.2vw no-repeat;
		margin-top: 1.5vw;
		margin-bottom: 8vw;
	}
	.contact-fax{
		font-size: 8vw;
		line-height: 11.2vw;
		background: url(../images/fax.svg) left center /11.2vw no-repeat;
		margin-top: 1.5vw;
	}
	.contact-receipt dt,.contact-receipt dd {
		display: table-cell;
		vertical-align: top;
	}
	.contact-receipt dt {
		width: 25vw;
	}
	.contact-holiday p {
		font-size: 4vw;
		line-height: 19.2vw;
		text-align: left;
		padding: 0 5.6vw;
	}
	.contact-holiday p:after{
		font-size: 12vw;
		margin-top :-6vw;
		right: 5.6vw;
	}
}