@charset "UTF-8";
/* Faculty */
.mv:before{background: url("../img/faculty/mv.jpg") no-repeat center center/cover;}

@media only screen and (max-width: 480px) {
  .mv:before{background: url("../img/faculty/mv_sp.jpg") no-repeat center center/cover;}
}

@media only screen and (min-width: 767px) {
  .anchorLink > div{top: -115px;}
}

.box {position: relative; margin-bottom: 120px;}
.box .bigImg {position: absolute; width: 50%; top: 90px;}
.box .bigImg figure{overflow: hidden; width: 100%;}
.box .bigImg figure img{width: 100%;}
.box .bigImg .txt {position: absolute; height: 108px; top: -108px; left: 0; background: #949ac2; text-align: center; width: 480px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.box .bigImg .txt h4 {color: #fff; font-size: 35px; line-height: 1; font-weight: bold;}
.box .bigImg .txt h4 span {display: block; color: #fff; font-size: 20px; line-height: 1; margin-bottom: 10px;}
.box .bigImg .btnBg {position: absolute; bottom: -55px; left: 0; right: 0; margin: 0 auto; width: 90%; max-width: 830px;}
.box .bigImg .btnBg li {width: 47%; max-width: 400px;}
.box .bigImg .btnBg li a {position: relative; display: block;}
.box .bigImg .btnBg li a span {position: absolute; width: 100%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left: 20px;}
.box .inner {max-width: 1530px; width: calc(100% - 40px); margin: 0 auto; min-height: 33vw;}
.box .inner h3 {color: #949ac2; font-size: 40px; font-weight: bold; margin-bottom: 40px; padding-left: 26%;}
.box .inner .personInfo {width: 46.5%; margin: 0 0 0 auto;}
.box .inner .personInfo .img {align-items: flex-end; margin-bottom: 20px;}
.box .inner .personInfo .img figure {width: 39.4%;}
.box .inner .personInfo .img .name {width: 58%;}
.box .inner .personInfo .img .name p:nth-of-type(1) {font-size: 15px;}
.box .inner .personInfo .img .name p:nth-of-type(2) {font-size: 28px;}
.box .inner .personInfo .img .name p:nth-of-type(2) span {font-size: 18px; display: inline-block; padding-bottom: 4px;}
.box .inner .personInfo .desc p {line-height: 2;}

#box2 .bigImg {right: 0;}
#box2 .bigImg .txt {background: #dc98a4;}
#box2 .inner h3 {color: #dc98a4; padding-left: 14%;}
#box2 .inner .personInfo {margin: 0 auto 0 0;}
#box2 .bigImg .txt {right: 0; left: auto;}
#box2 .bigImg .btnBg {justify-content: space-around;}

/* MEDIA */
@media only screen and (min-width: 768px) {
  #box1 .bigImg figure{border-radius: 0 100px 0 0;}
  #box1 .bigImg .txt{border-radius: 0 50px 0 0;}
  
  #box2 .bigImg figure{border-radius: 100px 0 0 0;}
  #box2 .bigImg .txt{border-radius: 50px 0 0 0;}
}

@media only screen and (max-width: 1800px) and (min-width: 1400px) {
  #box1 .inner .img,
  #box1 .inner .desc{padding-right: 125px;}
}

@media only screen and (max-width: 1300px) and (min-width: 768px) {
  .box .bigImg{top: 155px;}
  .box .bigImg .txt{width: 70%; height: 8vw; top: -8vw;}
  .box .bigImg .txt h4{font-size: 2.7vw;}
  .box .bigImg .txt h4 span{font-size: 1.6vw; margin-bottom: 0.5vw;}
  .box .inner h3{padding-left: 0 !important; text-align: center;}  
  .box .bigImg .btnBg{bottom: -10%;}
  
  #box1 .bigImg figure{border-radius: 0 5vw 0 0;}
  #box1 .bigImg .txt{border-radius: 0 2.5vw 0 0;}
  
  #box2 .bigImg figure{border-radius: 5vw 0 0 0;}
  #box2 .bigImg .txt{border-radius: 2.5vw 0 0 0;}
}
  
@media only screen and (max-width: 767px) {
	.main {padding: 0 0 80px;}    
	.box {margin-bottom: 60px;}
	.box .bigImg {position: static; transform: translateY(0); -webkit-transform: translateY(0); width: 100%; margin: 0 0 40px;}
	.box .bigImg .txt {position: static; min-width: unset; width: 100%;}
	.box .bigImg .txt h4 {font-size: 24px;}
	.box .bigImg .txt h4 span {font-size: 15px;}
	.box .bigImg figure {margin-bottom: 20px;}
	.box .bigImg .btnBg {position: static; max-width: 400px; margin: 0 auto;}
	.box .bigImg .btnBg li {width: 100%; margin-bottom: 20px;}
	.box .bigImg .btnBg li a {max-width: 400px; width: 100%; margin: 0 auto;}

	.box .inner h3 {font-size: 24px; text-align: center; padding: 0 !important; margin: 0 -20px 20px;}
	.box .inner .personInfo {width: 100%; margin: 0 !important;}
	.box .inner .personInfo .img {max-width: 280px; width: 100%; margin: 0 auto 20px;}
	.box .inner .personInfo .img figure {width: 100%; margin-bottom: 20px;}
	.box .inner .personInfo .img .name {width: 100%;}

	#box2 {margin-bottom: 0;}
}