@charset "UTF-8";

main > article{
	padding: 0;
}

main > article > section{
	padding: 100px 10px;
	position: relative;
}

main > article > div.img-area{
	width: 100%;
	padding-top: 50%;
	margin: 0 0 50px;
	background-color: #eee;
}

main > article .page-title{
	font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
	padding: 0 0 30px;
	line-height: 1.5;
}
main > article .page-catch{
	font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size: 18px;
	line-height: 1.8;
    text-align: center;
    padding: 0 0 40px;
}


main > article > section > div{
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	display: table;
}



main .btn-area{
	text-align: center;
}

main .btn-area a.btn{
	display: inline-block;
	padding: 20px 50px;
	text-align: center;
	background-color: #505ea7;
	color: #fff;
}

main .btn-area a.btn:hover{
	background-color: #342550;
}


main .staff-card{
	display: inline-block;
	width: 50%;
	padding: 30px;
	position: relative;
}
main .staff-card a *{
	-moz-transition: .8s;
    -webkit-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
    transition: .8s;
}
main .staff-card a:hover *{
	-moz-transition: .8s;
    -webkit-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
    transition: .8s;
}
main .staff-card a > div{
	width: 100%;
	background-color: #fafafa;
	/*background-color: #f1f3ff;
	background-color: #f6f6f6;*/
	box-shadow: 12px 12px 0px #505ea7;
}
main .staff-card a:hover > div{
	width: 100%;
	background-color: #505ea7;
	box-shadow: 16px 16px 0px #555;
	-moz-transition: .8s;
    -webkit-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
    transition: .8s;
}
main .staff-card a > div > div{
	width: 100%;
	position: relative;
}
main .staff-card h3{
	display: inline-block;
	padding: 20px;
	background-color: #505ea7;
	color: #fff;
	position: absolute;
	top: 3%;
	left: 53%;
	z-index: 2;
}
main .staff-card a:hover h3{
	color: #505ea7;
	background-color: #fff;
	-moz-transition: .8s;
    -webkit-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
    transition: .8s;
}
main .staff-card > a > div > div{
	position: relative;
	z-index: 1;
}
main .staff-card > a > div > div > p:nth-child(3){
	width: 50%;
    position: absolute;
    top: 36%;
    left: 50%;
    padding: 0 3% 0 3%;
    font-size: 17px;
    line-height: 1.3;
}
main .staff-card > a > div > div > p:nth-child(4){
    width: 50%;
    position: absolute;
    bottom: 5%;
    left: 50%;
    padding: 0 3% 0;
    line-height: 1.2;
    color: #999;
}
main .staff-card > a:hover > div > div > p:nth-child(3){
	color: #fff;
	-moz-transition: .8s;
    -webkit-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
    transition: .8s;
}
main .staff-card > a:hover > div > div > p:nth-child(4){
    color: #fff;
	-moz-transition: .8s;
    -webkit-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
    transition: .8s;
}
main .staff-card .arrow{
	width: 5%;
	padding: 5% 0 0;
	position: absolute;
	bottom: 5%;
	right: 3%;
	background-image: url(http://kenmu.co.jp/wp-content/themes/birth_tcd057/img/arrow/arrow.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
main .staff-card > a:hover .arrow{
	background-image: url(http://kenmu.co.jp/wp-content/themes/birth_tcd057/img/arrow/arrow_hover.png);
	-moz-transition: .8s;
    -webkit-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
    transition: .8s;
}

main .staff-card .staff-card-txt,
main .staff-card .staff-card-img{
	display: inline-block;
	width: 50%;
	vertical-align: top;
}
main .staff-card .staff-card-txt > div{
    position: relative;
}


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

	main .staff-card{
		padding: 2.542373% 2.542373% 9.375%;
	}
	main .staff-card h3{
		padding: 2.5%;
		top: 5%;
	}
	main .staff-card > a > div > div > p:nth-child(3){
		width: 50%;
	    top: 29%;
	    font-size: 17px;
	    line-height: 1.2;
	}
	main .staff-card > a > div > div > p:nth-child(4){
	    line-height: 1.3;
	}
	main .staff-card .staff-card-txt,
	main .staff-card .staff-card-img{
		display: inline-block;
		width: 50%;
		vertical-align: top;
	}

}

@media screen and ( max-width:800px) {
	main > article > section {
	    padding: 15.625% 4.6875%;
	    position: relative;
	}
	main .staff-card{
		width: 100%;
		padding: 0 0 9.375%;
	}
	main .staff-card:last-child{
		padding: 0;
	}
	main .staff-card > a > div > div > p:nth-child(3){
		width: 50%;
	    top: 36%;
	    font-size: 18px;
	    line-height: 1.4;
	}
}
@media screen and ( max-width:640px) {
	main > article > section {
	    padding: 15.625% 4.6875%;
	    position: relative;
	}
	main .staff-card{
		width: 100%;
		padding: 0 0 9.375%;
	}
	main .staff-card:last-child{
		padding: 0;
	}
	main .staff-card h3{
		padding: 1.8% 2.5%;
		top: 5%;
	}
	main .staff-card > a > div > div > p:nth-child(3){
		width: 50%;
	    top: 26%;
	    font-size: 14px;
	    line-height: 1.2;
	}
	main .staff-card > a > div > div > p:nth-child(4){
	    line-height: 1.3;
	    font-size: 12px;
	}
	main .staff-card .staff-card-txt,
	main .staff-card .staff-card-img{
		display: inline-block;
		width: 50%;
		vertical-align: top;
	}
}