@charset "utf-8";


/*역대교장*/
.principalBox {position: relative;}
.principalBox ul {width: 100%;}
.principalBox ul li{width: calc((100% - 50px) / 2);display: inline-block;box-sizing: border-box;margin-right: 20px;margin-bottom: 20px;}
.principalBox ul li:nth-child(3n){/* margin-right: 0; */}
.principalBox ul li .box { border: 1px dashed #ccc; display: flex; padding: 20px 10px; justify-content: space-between; align-items: center;}
.principalBox ul li .box .img {width: 20%;}
.principalBox ul li .box .txt {width: 70%;}
.principalBox ul li .box .txt span {display: block;}
.principalBox ul li .box .txt .name{font-weight: bold;}
.principalBox ul li .box .txt .name em {padding-right: 5px;}

@media screen and (max-width:800px) {	
    .principalBox ul li {width:  calc((100% - 30px) / 2);}
    .principalBox ul li:nth-child(3n){margin-right: 20px;}
    .principalBox ul li:nth-child(2n) {margin-right: 0;}
}

@media screen and (max-width:690px) {
    .principalBox ul li .box {flex-direction: column; text-align: center; }
    .principalBox ul li .box .img ,.principalBox ul li .box .txt {width: 100%;}
    .principalBox ul li .box .txt {margin-top:1rem;}
}

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

}

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

@media screen and (max-width :380px) {
    .principalBox ul li {width: 100%; margin-right: 0;}
    .principalBox ul li:nth-child(3n){margin-right: 0;}
    .principalBox ul li .box .txt .name em {display: block;}
}