/*Theme Name: WordPress Practice
Author: TAKESHI
Description: 架空のHP
Version: 5.7.1*/



/*全体はbodyタグ指定*/
/*widthは100%か？*/


html body {
	font-family: "Hiragino Mincho Pro","W6";
	width: 100%;
	/*height: 2551px;*/
}



/*ヘッダー*/
/*恐らく講師一覧もulで囲んで調整か*/
.header {
	display: flex;
	background-color: #000000;
	/*width: 100%;*/
}

.logo {
	width: 193px;
	height: 50px;
	padding: 15px 10px;
}

.nav-zone {
	margin-left: auto;
}

.nav-list {
	display: flex;
}

.nav-item a {
	color: #FFFFFF;
	font-size: 22px;
	display: inline-block;
	padding: 10px;
	height: 22px;
	text-decoration: none;
}



/*トップ画像*/
/*画像自体はbackground-imgで対応、coverなど指定も*/
/*キャッチ配置、画像の大きさはpadding > heightで*/
.top-img {
	background-image: url(image/top-bg.png);
	background-size: cover;
	background-position: center;
}

.catch {
	font-size: 60px;
	text-align: center;
	padding-top: 243px;
	padding-bottom: 248px;
}




/*コース一覧*/
/*display:flexのときは中央寄せはjustyfy-content:centerを使う*/
/*nthchildも使う*/
/*画像の高さはwidthをカンプ通りにしたら揃った？*/

.title {
	display: block;
	text-align: center;
	font-size: 40px;
	margin-top: 40px;
	margin-bottom: 20px;
}

/*.course {*/
	/*display: flex;*/
	/*width: 100%;*/
/*}*/

.course-list {
	display: flex;
	justify-content: center;
	/*margin-right: 28px;*/
	/*margin-left: 28px;*/
}

.course-item {
	opacity: 1;
	/*border: 1px solid #707070;*/
	width: 291px;
	box-shadow: 0px 3px 6px #00000029;
	position: relative;
}

.course-item:nth-child(n+2) {
	margin-left: 20px;
}

.course-item img {
	width: 100%;
	/*justify-content: center;*/
}

.caption {
	margin-top: 20px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	font-size: 18px;
	/*position: relative;*/
}

.deadline {
	text-align: center;
	margin-top: 48px;
}

.deadline:before {
	position:absolute;
	content: "";
	width: 80%;
	background-color: #707070;
	left: 0;
	right: 0;
	height: 1px;
	margin:auto;
	bottom: 58px;
}

.deadline p:nth-child(2) {
	margin-top: 8px;
	margin-bottom: 10px;
}

.btn {
	display: block;
	margin: 0 auto;
	width: 310px;
	height: 52px;
	font-size: 18px;
	font-family: "ヒラギノ明朝 Pro","W6";
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 3px 6px #00000029;
	border: 1px solid #EEEEEE;
	border-radius: 5px;
	opacity: 1;
	margin-top:30px;
}





/*講師紹介*/
/*flex1とは*/
/*align-items: center;で縦のセンター寄せ*/

.teacher-list {
	/*display: flex;*/
}

.teacher-item {
	display: flex;
	align-items: center;
	padding-bottom: 57px;
	/*flex-direction: column;*/
	/*width: 1040px;*/
	/*height: 250px;*/
}

.teacher-img {
	width:250px;
}

.teacher-name {
	font-size: 40px;
	padding-left: 61px;

	/*position: absolute;*/
	/*left:431px;*/
	/*top: 1417px;*/
	/*margin: 0 auto;*/
}

.teacher-profile {
	font-size: 18px;
	padding-top: 30px;
	/*position: absolute;*/
	/*left:431px;*/
	/*top: 1487px;*/
}







/*コンタクト*/
/*backgroundoimgで*/
/*行間はline-height*/
/*縦方向の中央寄せはalign-items:center;*/

.contact-parts {
	background-position: center;
	background-size: cover;
	background-image: url(image/contact-bg.png);
	/*width: 100%;*/
	/*position: absolute;*/
	/*top: 2017px;*/
	height: 455px;
}

.contact-title {
	/*position: absolute;*/
	/*background-image:url("../image/contact-bg.png");*/
	/*width: 100%;*/
	/*height: 100%;*/
	/*left: 506px;*/
	/*top: 2079px;*/
	/*top: 62px;*/
	/*margin: 0 auto;*/
	color: #fff;
	font-size: 36px;
	/*z-index: 3;*/
	/*display: block;*/
	/*margin: 0 auto;*/
	text-align: center;
	padding-top: 62px;
}

.contact-txt {
	/*width: 366px;*/
	/*height: 184px;*/
	color: #fff;
	/*background-image:url("../image/contact-bg.png");*/
	/*position: absolute;*/
	/*left: 455px;*/
	/*top: 2168px;*/
	text-align: center;
	/*width: 366px;*/
	/*height: 184px;*/
	padding-top: 53px;
	/*width: 366px;*/
	/*height: 184px;*/
	height: 184px;
	line-height: 28px;
	
}

.btn-bottom {
	opacity: 1;
	color: #FFFFFF;
	height: 54px;
	width: 210px;
	font-size: 16px;
	display: block;
	margin: 0 auto;
	border-radius: 5px;
	box-shadow: 0px 3px 6px #00000029;
	background: #DC143C 0% 0% no-repeat padding-box;
	margin-top: 32px;
	/*margin-bottom: 34px;*/
}

/*フッター*/
.footer {
	display: inline-block;
	background-color: #000000;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	height: 80px;
}

.copy {
	display: inline-block;
	color:#fff;
	vertical-align: bottom;
	padding-top: 25px;

}


/*レスポンシブデザイン*/
/*デベロッパーツールを使ってスマホサイズに画面表示させると見やすそう*/
/*display:flexを解除する方法だった*/


@media only screen and (max-width: 767px) {
	.nav-list {
		display: none;
	}

	.catch {
		font-size: 26px;
	}

	.course-list {
		display: block;
		/*text-align: center;*/
		/*margin-right: auto;*/
		/*margin-left: auto;*/
		/*padding-bottom: 30px;*/
	}

	.course-item {
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 30px;
		padding-bottom: 1px;
	}

	.course-item:nth-child(n+2) {
		margin-right: auto;
		margin-left: auto;
	}

	.teacher-item {
		display: block;
		/*margin-left: auto;*/
		/*margin-right: auto;*/
		text-align: center;
	}

	.teacher-name {
		font-size: 24px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.teacher-profile {
		font-size: 18px;
		text-align: left;
	}


}