@charset "UTF-8";

:root{
	--body : #282728;
	--link : #333;
	--primary : #725f92;
	--secondary : #e8e6eb;
	--third : #eff5f8;
}

/*--------------------------------------------
TEACHER
---------------------------------------------*/

#teacher .controller{
	display : flex;
	align-items : center;
}

#teacher .controller a{
	display : flex;
	color : #17131d;
	background : url("/libr/assets/img/ui/parts/arrow/down01.png") left center no-repeat;
	color : #17131d;
	letter-spacing : .04em;
}

#teacher .list-teacher{
	border-bottom-style : solid;
	border-bottom-color : #69635b;
}

#teacher .list-teacher li li{
	border-top-style : solid;
	border-top-color : #69635b;
	cursor : pointer;
}

#teacher .list-teacher .box01{
	display : -ms-grid;
	display :     grid;
	align-content : center;
	background-repeat : no-repeat;
	background-position-y : center;
	background-image : url("/libr/assets/img/ui/icon/plus02.png");
	transition : background .3s ease-in;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : background;
}

#teacher .list-teacher .box01 picture{
	-ms-grid-row : 1;
	-ms-grid-row-span : 5;
	    grid-row : 1/6;
	-ms-grid-column : 1;
	-ms-grid-column-span : 1;
	    grid-column : 1/2;
}

#teacher .list-teacher .box01 picture img{
	width : 100%;
	height : auto;
}

#teacher .list-teacher .box01 h2{
	-ms-grid-row : 2;
	-ms-grid-row-span : 1;
	    grid-row : 2/3;
	-ms-grid-column : 3;
	-ms-grid-column-span : 1;
	    grid-column : 3/4;
	color : #17131d;
}

#teacher .list-teacher .box01 ruby{
	letter-spacing : .1em;
	display : flex;
	flex-direction : column;
}

#teacher .list-teacher .box01 ruby:before{
	display : block;
	letter-spacing : .1em;
	color : #725f92;
	color : var(--primary);
}

#teacher .list-teacher .box01 rt{
	display : none;
}

#teacher .list-teacher .box01 p{
	-ms-grid-row : 3;
	-ms-grid-row-span : 1;
	    grid-row : 3/4;
	-ms-grid-column : 3;
	-ms-grid-column-span : 1;
	    grid-column : 3/4;
	letter-spacing : .1em;
}

#teacher .list-teacher .box01 dl{
	-ms-grid-row : 4;
	-ms-grid-row-span : 1;
	    grid-row : 4/5;
	-ms-grid-column : 3;
	-ms-grid-column-span : 1;
	    grid-column : 3/4;
}

#teacher .list-teacher .box01 dl{
	display : flex;
	align-items : baseline;
}

#teacher .list-teacher .box01 dt , #teacher .list-teacher .box01 dd{
	letter-spacing : .1em;
}

#teacher .list-teacher li li.is-open .box01{
	background-image : url("/libr/assets/img/ui/icon/minus02.png");
}

#teacher .list-teacher .box02{
	display : none;
}

#teacher .list-teacher .box02 a{
	display : flex;
	align-items : center;
	justify-content : center;
	color : #282728;
	color : var(--body);
	border-color : currentColor;
	border-style : solid;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	background-image : url("/libr/assets/img/ui/icon/target_blank.png");
	background-repeat : no-repeat;
	background-position-y : center;
}

#teacher .list-teacher .box02 p{
	letter-spacing : .06em;
}

#teacher .list-teacher .box02 h3{
	display : flex;
	align-items : center;
	font-weight : 500;
	letter-spacing : .04em;
}

#teacher .list-teacher .box02 h3:before{
	content : "";
	display : block;
	background-color : #725f92;
	background-color : var(--primary);
	flex-shrink : 0;
	font-size : 0;
}

@media screen and (max-width: 750px){
	#teacher{
		padding-top : calc( 70 * 100vw / 750 );
		padding-bottom : calc( 122 * 100vw / 750 );
	}
	#teacher .controller{
		justify-content : space-between;
	}
	#teacher .controller a{
		background-size : auto calc( 9 * 100vw / 750 );
		padding-left : calc( 32 * 100vw / 750 );
		font-size : 2.6rem;
	}
	#teacher .list-teacher{
		margin-top : calc( 69 * 100vw / 750 );
		border-bottom-width : calc( 2 * 100vw / 750 );
	}
	#teacher .list-teacher li li{
		border-top-width : calc( 2 * 100vw / 750 );
	}
	#teacher .list-teacher .box01{
		-ms-grid-columns : calc( 200 * 100% / 680 ) calc( 50 * 100% / 680 ) 1fr;
		grid-template-columns : calc( 200 * 100% / 680 ) calc( 50 * 100% / 680 ) 1fr;
		background-position-x : calc( 100% - ( 46 * 100% / 680 ) );
		background-size : calc( 46 * 100% / 680 ) auto;
	}
	#teacher .list-teacher ruby{
		font-size : 3.6rem;
	}
	#teacher .list-teacher ruby:before{
		font-size : 2.2rem;
		margin-bottom : calc( 30 * 100vw / 750 );
	}
	#teacher .list-teacher p{
		font-size : 2.2rem;
		margin-top : calc( 30 * 100vw / 750 );
	}
	#teacher .list-teacher dl{
		margin-top : calc( ( 12 - 6 ) * 100vw / 750 );
	}
	#teacher .list-teacher dt , #teacher .list-teacher dd{
		font-size : 2.2rem;
		line-height : 1.54;
	}
	#teacher .list-teacher .box02{
		padding-top : calc( 30 * 100vw / 750 );
		padding-bottom : calc( ( 89 - 8 ) * 100vw / 750 );
	}
	#teacher .list-teacher .box02 a{
		width : calc( 200 * 100% / 680 );
		height : calc( 60 * 100vw / 750 );
		font-size : 2.2rem;
		border-width : calc( 2 * 100vw / 750 );
		background-size : auto calc( 18 * 100vw / 750 );
		background-position-x : calc( 100% - ( 16 * 100% / 200 ) );
	}
	#teacher .list-teacher .box02 p{
		font-size : 2.8rem;
		line-height : 1.57;
	}
	#teacher .list-teacher .box02 .info{
		margin-top : calc( ( 60 - 8 ) * 100vw / 750 );
	}
	#teacher .list-teacher .box02 h3{
		font-size : 3.6rem;
	}
	#teacher .list-teacher .box02 h3:before{
		width : calc( 12 * 100% / 680 );
		height : calc( 42 * 100vw / 750 );
		margin-right : calc( 30 * 100% / 680 );
	}
	#teacher .list-teacher .box02 .info + h3{
		margin-top : calc( ( 86 - 8 ) * 100vw / 750 );
	}
	#teacher .list-teacher .box02 h3 + p{
		margin-top : calc( ( 39 - 8 ) * 100vw / 750 );
	}
	#teacher .list-teacher .box02 p:not(.info) + h3{
		margin-top : calc( ( 56 - 8 ) * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#teacher{
		padding-top : 78px;
		padding-bottom : 111px;
	}
	#teacher .controller li + li{
		margin-left : 49px;
	}
	#teacher .controller a{
		background-size : auto 8px;
		padding-left : 34px;
		font-size : 1.6rem;
	}
	#teacher .list-teacher{
		margin-top : 39px;
		border-bottom-width : 1px;
	}
	#teacher .list-teacher li li{
		border-top-width : 1px;
	}
	#teacher .list-teacher .box01{
		-ms-grid-columns : 200px 99px 1fr;
		grid-template-columns : 200px 99px 1fr;
		background-position-x : calc( 100% - 90px );
		background-size : 44px auto;
	}
	#teacher .list-teacher ruby{
		font-size : 3.6rem;
	}
	#teacher .list-teacher ruby:before{
		font-size : 1.6rem;
		margin-bottom : 20px;
	}
	#teacher .list-teacher p{
		font-size : 1.6rem;
		margin-top : 40px;
	}
	#teacher .list-teacher dl{
		margin-top : calc( 14px - 7px );
	}
	#teacher .list-teacher dt , #teacher .list-teacher dd{
		font-size : 1.6rem;
		line-height : 1.87;
	}
	#teacher .list-teacher .box02{
		padding-top : 29px;
		padding-bottom : calc( 60px - 5px );
	}
	#teacher .list-teacher .box02 a{
		width : 200px;
		height : 44px;
		font-size : 1.6rem;
		border-width : 1px;
		background-size : auto 12px;
		background-position-x : calc( 100% - 22px );
	}
	#teacher .list-teacher .box02 p{
		font-size : 1.4rem;
		line-height : 1.71;
	}
	#teacher .list-teacher .box02 .info{
		margin-top : calc( 40px - 5px );
	}
	#teacher .list-teacher .box02 h3{
		font-size : 2rem;
		line-height : 1.4;
	}
	#teacher .list-teacher .box02 h3{
		margin-top : calc( 50px - 5px - 4px );
	}
	#teacher .list-teacher .box02 h3:before{
		width : 6px;
		height : 20px;
		margin-right : 20px;
	}
	#teacher .list-teacher .box02 .info + h3{
		margin-top : calc( 50px - 5px );
	}
	#teacher .list-teacher .box02 h3 + p{
		margin-top : calc( 19px - 5px );
	}
	#teacher .list-teacher .box02 p:not(.info) + h3{
		margin-top : calc( 60px - 5px );
	}
}