@charset "utf-8";
/* Copyright 2019 FSFIELD All Rights Reserved. */

@media screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	卒業生の進路

	------------------------------------------------------------ */

	/* グローバルナビアクティブ
	---------------------------------------------- */
	.nav_global ul li.s11::before{background: #00AE8F;}
	
	.nav_global ul li.s11 a:hover{opacity: 1;}
	
	/* ページタイトル
	---------------------------------------------- */
	.pagettl::before{background: url("../graduates/img/pc/bg_pagettl01.png") no-repeat 0 center;}
	
	/* コンテンツ
	---------------------------------------------- */
	.lead{margin-bottom: 75px;}
	
	.grade{
		background: url("../graduates/img/pc/img_pyramid01.png") no-repeat 0 0;
		background-size: contain;
		margin-bottom: 80px;
	}
	
	.grade_inner{position: relative;}
	
	.grade_inner::before{
		content:"";
		display: block;
		background-size: 32px;
		background-repeat: no-repeat;
		background-position: 0 0;
		width: 32px;
		height: 30px;
		position: absolute;
		top: 15px;
	}
	
	.grade_inner:nth-child(1){padding: 55px 0 55px 230px;}
	
	.grade_inner:nth-child(1)::before{
		background-image: url("../img/ico_arrow12.png");
		left: 170px;
	}
	
	.grade_inner:nth-child(2){padding: 24px 0 24px 280px;}
	
	.grade_inner:nth-child(2)::before{
		background-image: url("../img/ico_arrow13.png");
		left: 230px;
	}

	.grade_inner:nth-child(3){padding: 66px 0 66px 320px;}
	
	.grade_inner:nth-child(3)::before{
		background-image: url("../img/ico_arrow14.png");
		left: 265px;
	}
	
	.grade_inner .completed{display: none;}

	.grade_inner .profession{
		font-weight: bold;
		line-height: 1.2;
		margin-bottom: 3px;
	}
	
	.grade_inner .profession span{font-size: 1.2rem;}

	.grade_inner .example{
		font-size: 1.3rem;
		line-height: 1.4;
	}
	
	/*--進路--*/
	.wrap_course{
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-justify-content:space-between;/*--safari用--*/
		justify-content:space-between;
	}
	
	.course h3{
		font-size: 2rem;
		font-weight: bold;
		margin-bottom: 15px;
	}
	
	.course h3 span{font-size: 1.5rem;}
	
	.course.col01,
	.course.col02{width: 405px;}

	.course.col03{
		max-width: 860px;
		margin: 0 auto 100px;
	}
	
	/*テーブル*/
	/*生物学類卒業生の進路*/
	.table_graduates01{
		width: 100%;
		border-bottom: 1px solid #E0E0D8;
		position: relative;
	}

	.table_graduates01::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-color: #00AE8F transparent transparent transparent;
		border-width: 16px 16px 0 0;
		position: absolute;
		top: 0;
		left: -1px;
	}

	.table_graduates01 td{padding: 5px 10px;}
	
	.table_graduates01 td:last-of-type{text-align: center;}
	
	.table_graduates01 tr:nth-child(odd){background: #F6F6F3;}
	
	.table_graduates01 tr:nth-child(1){background: #234356;}
	
	.table_graduates01 tr:nth-child(1) td{color: #FFFFFF;}
	
	.table_graduates01 tr:nth-child(1) td:first-of-type{
		width: 75%;
		border-right:1px solid #436478;
		border-left: 1px solid #234356;
	}
	
	.table_graduates01 tr:nth-child(2) td:last-of-type span{
		background: #00AE8F;
		color: #FFF;
		position: relative;
		border-radius: 50%;
		padding: 4px 7px;
		line-height: 1;
	}
	
	.table_graduates01 tr:nth-child(2) td:last-of-type span::before{
		content: "";
		display: block;
		background:url("../img/ico_arrow14.png") no-repeat 0 0;
		background-size: 32px;
		width: 32px;
		height: 20px;
		position: absolute;
		top: 5px;
		right: -59px;
	}
	
	.table_graduates01 tr:not(:first-of-type) td:first-of-type{border-left: 1px solid #E0E0D8;}
	
	.table_graduates01 tr:not(:first-of-type) td:last-of-type{border-right: 1px solid #E0E0D8;}
	
	/*生物学類卒業生の大学院等進路*/
	.table_graduates02{
		width: 100%;
		border: 1px solid #E0E0D8;
		border-left: none;
		position: relative;
	}
	
	.table_graduates02::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-color: #00AE8F transparent transparent transparent;
		border-width: 16px 16px 0 0;
		position: absolute;
		top: 1px;
		left: 0;
	}

	.table_graduates02 th,
	.table_graduates02 td{padding: 6px 10px;}

	.table_graduates02 th{
		background: #234356;
		width: 22%;
		color: #FFF;
		line-height: 1.2;
	}
	
	.table_graduates02 td:last-of-type{
		text-align: center;
		width: 20%;
	}
	
	.table_graduates02 tr:first-of-type th{
		border-top: 1px solid #234356;
		border-bottom: 1px solid #436478;
	}

	.table_graduates02 tr:nth-child(4) td{border-bottom: 1px solid #f2f2ee;}

	.table_graduates02 tr:nth-child(odd) td{background: #F6F6F3;}
	
	/*大学院修了者等の進路*/
	.table_graduates03{
		width: 100%;
		margin-bottom: 10px;
		position: relative;
	}

	.table_graduates03::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-color: #00AE8F transparent transparent transparent;
		border-width: 16px 16px 0 0;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.table_graduates03 th{
		color: #FFFFFF;
		padding: 6px 10px;
		text-align: center;
		vertical-align: middle;
	}

	.table_graduates03 td{padding: 6px 10px;}
	
	.table_graduates03 td:not(:first-of-type){text-align: center;}
	
	.table_graduates03 td:last-of-type{border-right:1px solid #E0E0D8;}
	
	.table_graduates03 tr:nth-child(1) th{
		background: #234356;
		border-right: 1px solid #436478;
	}
	
	.table_graduates03 tr:nth-child(1) th:not(:first-child){width: 11%;}
	
	.table_graduates03 tr:nth-child(1) th:last-of-type{border-right: 1px solid #234356;}
	
	.table_graduates03 tr:nth-child(2) th{background: #FF7966;}
	
	.table_graduates03 tr:nth-child(3) th{background: #3758CA;}
	
	.table_graduates03 tr:not(:first-child) th{width: 11%;}
	
	.table_graduates03 tr:nth-child(odd) td{background: #F6F6F3;}
	
	.table_graduates03 tr:last-of-type td{border-bottom:1px solid #E0E0D8;}
	
	/*--テキスト--*/
	.graduates_note01{
		font-size: 1.3rem;
		text-align: right;
	}


}/*--@media--*/


@media screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	卒業生の進路

	------------------------------------------------------------ */

	/* ページタイトル
	---------------------------------------------- */
	.pagettl_inner{background: url("../graduates/img/sp/bg_pagettl01.jpg") no-repeat center center;}

	/* コンテンツ
	---------------------------------------------- */
	.lead{margin-bottom: 45px;}

	.grade{margin-bottom: 45px;}
	
	.grade_inner .completed{
		background: #234356;
		padding: 5px 15px;
		color: #FFF;
		font-weight: bold;
		display: block;
		position: relative;
		margin-bottom: 10px;
	}

	.grade_inner .completed::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 16px 16px 0 0;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.grade_inner:nth-child(1) .completed::before{border-color: #FF7966 transparent transparent transparent;}
	
	.grade_inner:nth-child(2) .completed::before{border-color: #3758CA transparent transparent transparent;}
	
	.grade_inner:nth-child(3) .completed::before{border-color: #00AE8F transparent transparent transparent;}

	.grade_inner .profession{
		font-weight: bold;
		line-height: 1.2;
		margin-bottom: 10px;
	}
	
	.grade_inner .profession span{font-size: 1.1rem;}

	.grade_inner .example{
		font-size: 1.3rem;
		line-height: 1.4;
	}
	
	.grade_inner .detail{
		margin-bottom: 25px;
		padding-left: 30px;
		background-size: 25px !important;
		background-repeat: no-repeat;
		background-position: 0 0.1em;
	}
	
	.grade_inner:nth-child(1) .detail{background-image: url("../img/ico_arrow12.png");}
	
	.grade_inner:nth-child(2) .detail{background-image: url("../img/ico_arrow13.png");}
	
	.grade_inner:nth-child(3) .detail{background-image: url("../img/ico_arrow14.png");}
	
	.grade_inner:last-of-type .detail{margin-bottom: 0;}

	/*--進路--*/	
	.course h3{
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.2;
		margin-bottom: 20px;
	}
	
	.course h3 span{font-size: 1.4rem;}

	.course.col01{margin-bottom: 40px;}

	.course.col03{margin-bottom: 60px;}
	
	.course.col03 h3{padding: 0 30px;}
	
	/*テーブル*/
	/*生物学類卒業生の進路*/
	.table_graduates01{
		width: 100%;
		border-bottom: 1px solid #E0E0D8;
		position: relative;
	}

	.table_graduates01::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-color: #00AE8F transparent transparent transparent;
		border-width: 16px 16px 0 0;
		position: absolute;
		top: 0;
		left: 0;
	}

	.table_graduates01 td{padding: 5px 10px;}
	
	.table_graduates01 td:last-of-type{text-align: center;}
	
	.table_graduates01 tr:nth-child(odd){background: #F6F6F3;}
	
	.table_graduates01 tr:nth-child(1){background: #234356;}
	
	.table_graduates01 tr:nth-child(1) td{color: #FFFFFF;}
	
	.table_graduates01 tr:nth-child(1) td:first-of-type{
		width: 80%;
		border-right:1px solid #436478;
		border-left: 1px solid #234356;
	}
	
	.table_graduates01 tr:not(:first-of-type) td:first-of-type{border-left: 1px solid #E0E0D8;}
	
	.table_graduates01 tr:not(:first-of-type) td:last-of-type{border-right: 1px solid #E0E0D8;}
	
	/*生物学類卒業生の大学院等進路*/
	.table_graduates02{
		width: 100%;
		border: 1px solid #E0E0D8;
		border-left: none;
		position: relative;
	}
	
	.table_graduates02::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-color: #00AE8F transparent transparent transparent;
		border-width: 16px 16px 0 0;
		position: absolute;
		top: 1px;
		left: 0;
	}

	.table_graduates02 th,
	.table_graduates02 td{
		padding: 10px;
		line-height: 1.2;
	}

	.table_graduates02 th{
		background: #234356;
		width: 25%;
		color: #FFF;
	}
	
	.table_graduates02 td:last-of-type{
		text-align: center;
		width: 20%;
	}
	
	.table_graduates02 tr:first-of-type th{
		border-top: 1px solid #234356;
		border-bottom: 1px solid #436478;
	}

	.table_graduates02 tr:nth-child(4) td{border-bottom: 1px solid #f2f2ee;}

	.table_graduates02 tr:nth-child(odd) td{background: #F6F6F3;}
	
	/*大学院修了者等の進路*/
	.table_graduates03{
		width: 100%;
		position: relative;
	}
	
	.scroll{
		overflow:scroll;
		position: relative;
		padding: 0 30px;
	}
	
	.arrow_scroll01{
		animation: arrow1 1s linear 0s infinite forwards;
		background: url("../img/ico_arrow04.png") no-repeat 0 0;
		background-size: 9px;
		width: 9px;
		height: 15px;
		position: absolute;
		top: 10px;
		right: 0;
		z-index: 1;
	}

	.table_graduates03::before{
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-color: #00AE8F transparent transparent transparent;
		border-width: 16px 16px 0 0;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.table_graduates03 th,
	.table_graduates03 td{white-space: nowrap;}
	
	.table_graduates03 th{
		color: #FFFFFF;
		padding: 6px 10px;
		text-align: center;
		vertical-align: middle;
	}

	.table_graduates03 td{padding: 6px 10px;}
	
	.table_graduates03 td:not(:first-of-type){text-align: center;}
	
	.table_graduates03 td:last-of-type{border-right:1px solid #E0E0D8;}
	
	.table_graduates03 tr:nth-child(1) th{
		background: #234356;
		border-right: 1px solid #436478;
	}
	
	.table_graduates03 tr:nth-child(1) th:not(:first-child){width: 11%;}
	
	.table_graduates03 tr:nth-child(1) th:last-of-type{border-right: 1px solid #234356;}
	
	.table_graduates03 tr:nth-child(2) th{background: #FF7966;}
	
	.table_graduates03 tr:nth-child(3) th{background: #3758CA;}
	
	.table_graduates03 tr:not(:first-child) th{width: 11%;}
	
	.table_graduates03 tr:nth-child(odd) td{background: #F6F6F3;}
	
	.table_graduates03 tr:last-of-type td{border-bottom:1px solid #E0E0D8;}

	/*--テキスト--*/
	.graduates_note01{
		font-size: 1.2rem;
		line-height: 1.4;
		padding: 0 30px;
		margin-top: 10px;
	}


}/*--@media--*/


@keyframes arrow1{
	0%{
		opacity: 0;
		transform: translate3d(-16px,0,0);
	}
	50%{
		opacity: 1;
		transform: translate3d(-8px,0,0);
	}
	100%{
		opacity: 0;
		transform: translate3d(0,0,0);
	}
}