@charset "utf-8";

/*冒頭画像*/
@media screen and (min-width: 500px) and (max-width:3550px) {
	.course-head-img{
		margin-left: 30%;
		margin-right: 30%;
		margin-bottom: 2.5%;
		margin-top: 5%;
	}
}

@media screen and (max-width:499px) {
	.course-head-img{
		margin-left: 12.5%;
		margin-right: 12.5%;
		margin-bottom: 5%;
		margin-top: 5%;
	}
}



/*PC - Flex： 3見出し + 右に画像*/
@media screen and (min-width: 500px) and (max-width:3550px) {
	.course-feature-flex{
		display: flex;
		margin-bottom: 7.5%;
	}
	.course-feature-flex>div{
		width: 100%;
	}
}

/*SP - 画像*/
@media screen and (max-width:499px) {
	.course-feature-image{
		margin-bottom: 5%;
	}

	.course-feature-sp{
		margin-bottom: 15%;
	}
}

/*PC - 3見出し*/
@media screen and (min-width: 500px) and (max-width:3550px) {
	.course-background-blue{
		background-color: #b0c4dc;
	}

	.course-background-blue>h3{
		margin-left: 10%;
		margin-top: 5%;
		font-size: 1.45rem;
		font-weight: bold;
		/*font-family: serif;*/
  	font-family: "Times New Roman", "Times", serif;
		font-weight: 900;
  	text-shadow: 0px 1px 0px #000;
	}
	.course-background-blue>p{
		margin-left: 10%;
		margin-top: 2%;
		font-size: 1rem;
		line-height: 1.5em;
	}

	.course-background-grey{
		background-color: #e6e6e6;
		font-size: 1rem;
	}
}

/*SP - 3見出しを縦並び*/
@media screen and (max-width:499px) {
	.course-background-blue{
		background-color: #b0c4dc;
		font-size: 1rem;
		padding: 3%;
		margin-left: 3%;	
		margin-right: 3%;	
	}

	.course-background-blue>h3{
		font-size: 1.35rem;
		font-weight: bold;
		margin-top: 4%;
		margin-bottom: 5%;
		text-align: center;
  	font-family: "Times New Roman", "Times", serif;
		font-weight: 900;
  	text-shadow: 0px 1px 0px #000;
	}

	.course-background-blue>p{
		margin-top: 2%;
		margin-bottom: 4%;
		margin-left: 3%;
		margin-right: 3%;
		font-size: 1rem;
		line-height: 1.5em;	
	}

	.course-background-grey{
		background-color: #e6e6e6;
		font-size: 1rem;
		padding: 3%;
		margin-left: 3%;	
		margin-right: 3%;	
	}

	.course-background-grey>h3{
		font-size: 1.35rem;
		font-weight: bold;
		margin-top: 4%;
		margin-bottom: 5%;
		text-align: center;
		font-family: serif;
  	text-shadow: 0px 1px 0px #000;
	}

	.course-background-grey>p{
		margin-top: 2%;
		margin-bottom: 4%;
		margin-left: 3%;
		margin-right: 3%;
		font-size: 1rem;
		line-height: 1.5em;	
	}

}


/*PC/SP共通 - 見出し・アンカー*/
.course-menu-anchor{
	display: flex;
	margin-bottom: 5%;
}
.course-menu-anchor>div{
	width: 100%;
}
.course-menu-graduate{
	background-color: #1b1464;
	color: #ffff;
	font-size: 2rem;
	text-align: center;
	padding: 2rem;
  font-weight: 900;
}

.course-menu-high-school{
	background-color: #3071b7;
	color: #ffff;
	font-size: 2rem;
	text-align: center;
	padding: 2rem;
	font-weight: 900;
}


/*PC/SP　四角付き　メッセージ*/
@media screen and (min-width: 500px) and (max-width:3550px) {
	.course-message{
		margin-top: 10%;
		color: #183f8e;
		font-size: 2rem;
		line-height: 1.75em;
		text-align: center;	
		border: 2px solid #bfcfe3;
		padding: 2rem;
		margin-bottom: 10%;
		font-family: YuMincho, "Hiragino Mincho ProN", serif;
  	font-weight: bold;
	}

	.terakoya-message{
		text-align: center;
		font-size: 1.3rem;
		line-height: 1.75em;
		margin-bottom: 10%;
		margin-top: 7%;
	}
}

@media screen and (max-width:499px) {
	.course-message{
		margin-top: 20%;
		margin-left: 2%;
		margin-right: 2%;
		color: #183f8e;
		font-size: 1.3rem;
		text-align: center;	
		border: 2px solid #bfcfe3;
		margin-bottom: 12.5%;
		line-height: 1.75em;
		padding-top: 1.5em;
		padding-bottom: 1.5em;
		font-family: YuMincho, "Hiragino Mincho ProN", serif;
  	font-weight: bold;
	}

	.terakoya-message{
		text-align: center;
		font-size: 0.8rem;
		line-height: 1.75em;
		margin-bottom: 17.5%;
	}
}





/*3つ黄色*/
.terakoya-underline{
		margin-left: 3%;
		margin-right: 3%;
}

@media screen and (min-width: 500px) and (max-width:3550px) {
	.terakoya-mid-head{
		margin-top: 12%;
		font-size: 2.5rem;
		text-align: center;
		font-family: monospace;
		line-height: 3.5rem;
	}
}

@media screen and (max-width:499px) {
	.terakoya-mid-head{
		margin-top: 10%;
		margin-bottom: 10%;
		text-align: center;
		font-size: 1.3rem;
		font-family: monospace;
		line-height: 1.75rem;
	}
}


@media (min-width: 851px) {
	.how-to-yellow{
		display: flex;
	}
	.how-to-yellow-img1{
    margin-left: -5%;
		padding: 5%;
	}

	.how-to-yellow-img2{
		margin-top: 10.4%;
    width: 132%;
	}

	.how-to-yellow-img3{
		margin-top: 5%;
	}

}

@media (max-width: 850px) {
	.how-to-yellow{
		margin-left: 8%;
		margin-right: 8%;
	}

	.how-to-yellow-img1{
    margin-bottom: 20%;
	}

	.how-to-yellow-img2{
		margin-bottom: 20%;
	}

	.how-to-yellow-img3{
		margin-bottom: 20%;
	}
}



.triangle {
	text-align: center;
  margin-left: 45%;
  margin-right: 45%;
  margin-bottom: 10%;
  margin-top: 6%;
}

@media screen and (max-width:499px) {
	.triangle {
		text-align: center;
	  margin-left: 35%;
	  margin-right: 35%;
	  margin-bottom: 15%;
	}
}


/*繰り返し部分*/
.solve-terakoya-head{
	background-color: #18408d;
	color: #ffff;
	font-size: 2rem;
	text-align: center;
	padding-top: 2rem;
	padding-bottom: 2rem;
  font-weight: 900;
  font-family: serif;
}

@media screen and (max-width:499px) {
	.solve-terakoya-head{
		font-size: 1.25rem;
		padding-top: 2rem;
		padding-bottom: 2rem;
    margin-bottom: 15%;		
	}
}

.loop-flex{
	display: flex;
	align-items: center;
	margin-top: 7.5%;
	margin-bottom: 7.5%;
}

.head-num{
	margin-left: 2%;
	margin-right: 2.5%;
	background-color: #18408d;
	color: #ffff;
	font-size: 3.5rem;
  font-weight: 900;
  font-family: serif;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.sp-head-num{
	margin-left: 2%;
	margin-right: 4%;
	background-color: #18408d;
	color: #ffff;
	font-size: 2rem;
  font-weight: 900;
  font-family: serif;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.loop-lead{
	font-size: 1.8rem;
	color: #18408d;
	font-style: oblique;
	font-weight: 800;
	font-family: serif;
}

.sp-loop-lead{
	font-size: 1.25rem;
	color: #18408d;
	font-style: oblique;
	font-weight: 800;
	font-family: serif;
	line-height: 1.75rem;
}

.loop-flex-content{
	display: flex;
	align-items: flex-start;
	margin-top: 4%;
	margin-bottom: 15%;
}

.loop-flex-content>div{
	width: 100%;
}

.loop-texts{
	margin-left: 2%;
	margin-right: 5%;
	text-align: left;
	font-size: 1.3rem;
	line-height: 1.75em;
}

.sp-loop-texts{
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 20%;
  margin-top: 7%;
	text-align: left;
	font-size: 1rem;
	line-height: 1.75em;
}

.sp-loop-texts2{
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 3%;
	text-align: left;
	font-size: 1rem;
	line-height: 1.75em;
}

.loop-img{
	margin-right: 2%;
}

.sp-loop-img{
	margin-left: 3%;
	margin-right: 3%;
	margin-bottom: 3%;
}



/*テラコヤ下部*/

@media screen and (min-width: 500px) and (max-width:3550px) {
	.loop-flex-bottom{
		display: flex;
		align-items: center;
		margin-top: 7.5%;
		margin-bottom: 18%;
	}
}

@media screen and (max-width:499px) {
	.loop-flex-bottom{
		display: flex;
		align-items: center;
		margin-top: 7.5%;
		margin-bottom: 4%;
	}
}

.loop-flex-bottom-left{
	flex-basis: 55%;
	margin-right: 5%;
}

.loop-flex-bottom-right{
	flex-basis: 45%;
}


.loop-flex-bottom-left2{
	flex-basis: 45%;
	margin-right: 10%;
}

.loop-flex-bottom-right2{
	flex-basis: 55%;
}

.loop-flex-bottom-left3{
	flex-basis: 50%;
}

.loop-flex-bottom-right3{
	flex-basis: 50%;
	margin-left: 5%;
}

.bottom-icon-img{
	margin-bottom: 5%;
}

.sp-bottom-icon-img{
	margin-bottom: 5%;
	margin-top: 25%;
	margin-left: 5%;
	margin-right: 5%;
}

.bottom-icon-img2{
	margin-bottom: 5%;
	margin-left: 5%;
	margin-right: 5%;
}

.sp-bottom-icon-img2{
	margin-bottom: 5%;
	margin-left: 7.5%;
	margin-right: 7.5%;
}

.bottom-sheet-img{
	margin-left: 10%;
}

.sp-bottom-img{
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 25%;
}

.bottom-sheet-img2{
	margin-left: 0.3%;
}



.terakoya-logo-flex{
	display: flex;
	align-items: center;
	margin-top: 7.5%;
	margin-bottom: 4%;
}

.terakoya-logo-flex>div{
	width: 100%;
}

.sp-terakoya-underline{
		margin-left: 3%;
		margin-right: 3%;
		flex-basis:20%;
}



/*各種コース*/

/*コース名*/
@media screen and (min-width: 500px) and (max-width:3550px) {
	.course-name-graduate{
		font-size: 1.8rem;
		color: #ffff;
		background-color: #1b1464;
		padding-left: 3.5rem;
		padding-top: 1.3rem;
		padding-bottom: 1.3rem;
		margin-bottom: 5%;
		font-family: serif;
		position: relative;
	}

	.course-name-high-school{
		font-size: 1.8rem;
		color: #ffff;
		background-color: #3071b7;
		padding-left: 3.5rem;
		padding-top: 1.3rem;
		padding-bottom: 1.3rem;
		margin-bottom: 5%;
		font-family: serif;
		position: relative;
	}

	.course-icon{
		position: absolute;
	  top: 35%;
	  left: 2%;
	  width: 20px;
	  height: 20px;
	}

}

@media screen and (max-width:499px) {
	.course-name-graduate{
		font-size: 1.65rem;
		color: #ffff;
		background-color: #1b1464;
		padding-left: 2.75rem;
		padding-top: 1.3rem;
		padding-bottom: 1.3rem;
		margin-bottom: 5%;
		margin-top: 15%;
		font-family: serif;
		position: relative;
	}

	.course-name-high-school{
		font-size: 1.65rem;
		color: #ffff;
		background-color: #3071b7;
		padding-left: 2.75rem;
		padding-top: 1.3rem;
		padding-bottom: 1.3rem;
		margin-bottom: 5%;
		margin-top: 15%;
		font-family: serif;
		position: relative;
	}	

	.course-icon{
		position: absolute;
	  top: 35%;
	  left: 3%;
	  width: 20px;
	  height: 20px;
	}

}





/*リード文*/
@media screen and (min-width: 500px) and (max-width:3550px) {
	.course-lead{
		font-size: 1.8rem;
		color: #4676ae;
		font-style: oblique;
		margin-bottom: 5%;
		font-weight: 800;
		font-family: serif;
	}
}

@media screen and (max-width:499px) {
	.course-lead{
		font-size: 1.75rem;
		color: #4676ae;
		font-style: oblique;
		margin-top: 5%;
		margin-bottom: 3%;
		margin-left: 3%;
		margin-right: 3%;
		line-height: 1.25em;
		font-weight: 600;
		font-family: serif;
	}
}

/*PC-Flex　文章 + 画像*/
@media screen and (min-width: 500px) and (max-width:3550px) {
	.course-content{
		display: flex;
		font-size: 1rem;
		line-height: 1.5em;
	}
	.course-content>div{
		width: 100%;
	}
	.course-content>div>img{
		margin-left: 3%;
		width: 97%;
	}
}

@media screen and (max-width:499px) {
	.course-content{
		font-size: 1rem;
		line-height: 1.5em;
		margin-left: 3%;
		margin-right: 3%;
	}
	.course-image{
		margin-top: 7.5%;
		margin-bottom: 5%;
	}
}

/*ポイント*/
@media screen and (min-width: 500px) and (max-width:3550px) {
	.course-point{
		margin-top: 7.5%;
		margin-bottom: 7.5%;
	}
}

@media screen and (max-width:499px) {
	.course-point{
		margin-top: 10%;
		margin-bottom: 10%;
	}
}


/*詳細グレイ*/
@media screen and (min-width: 500px) and (max-width:3550px) {
	.grey-box{
		margin-bottom: 10%;
		background-color: #e6e6e6;
		font-size: 1rem;
		padding: 2rem;
		line-height: 1.5em;
	}

	.grey-box>p{
		margin-left: 2.5%;
	}

	.grey-box2{
		margin-bottom: 10%;
		background-color: #e6e6e6;
		font-size: 1rem;
		padding: 2rem;
		line-height: 1.5em;
	}

	.grey-box2>p{
		margin-left: 2.5%;
	}
}

@media screen and (max-width:499px) {
	.grey-box{
		margin-top: 1.5%;
		margin-bottom: 7.5%;
		margin-left: 3%;
		margin-right: 3%;
		background-color: #e6e6e6;
		font-size: 1rem;
		padding: 2rem;
		line-height: 1.5em;
	}

	.grey-box>p{
		
	}

	.grey-box2{
		margin-top: 1.5%;
		margin-bottom: 7.5%;
		margin-left: 3%;
		margin-right: 3%;
		background-color: #b0c4dc;
		font-size: 1rem;
		padding: 2rem;
		line-height: 1.5em;
	}

	.grey-box2>p{
		
	}
}


/*PC/SP共通 - ボトム見出し・アンカー 使いまわし + 調整*/
.course-menu-bottom-anchor{
	display: flex;
}
.course-menu-bottom-anchor>div{
	width: 100%;
	margin: 0.3%;
	/*margin-left: 0.1%;
	margin-right: 0.1%;
	margin-bottom: 0.15%;*/
}

@media screen and (max-width:499px) {
.course-menu-bottom-anchor{
	display: block;
	margin-left: 5%;
	margin-right: 5%;
	}
}


.course-menu-bottom-graduate{
	background-color: #1b1464;
	color: #ffff;
	font-size: 2rem;
	text-align: center;
	padding: 1rem;
}

.course-menu-bottom-graduate-each{
	position: relative;
	background-color: #1b1464;
	color: #ffff;
	font-size: 1.75rem;
	padding: 1rem;
	font-family: serif;
	text-indent: 2.5rem;
}



.course-menu-bottom-high-school{
	background-color: #3071b7;
	color: #ffff;
	font-size: 2rem;
	text-align: center;
	padding: 1rem;
}

.course-menu-bottom-high-school-each{
	position: relative;
	background-color: #3071b7;
	color: #ffff;
	font-size: 1.75rem;
	padding: 1rem;
	font-family: serif;
	text-indent: 2.5rem;
}

.course-menu-bottom-space{
  background-color: transparent;
	padding: 1rem;
}


.bottom-course-icon{
	position: absolute;
  top: 35%;
  left: 4%;
  width: 20px;
  height: 20px;
}


@media screen and (max-width:499px) {
	.course-menu-bottom-graduate{
		font-size: 1.2rem;
	}
	.course-menu-bottom-graduate-each{
		font-size: 0.75rem;
		text-indent: 0.1rem;
	}
	.course-menu-bottom-high-school{
		font-size: 1.2rem;
	}
	.course-menu-bottom-high-school-each{
		font-size: 0.75rem;
		text-indent: 0.1rem;
	}

	.bottom-course-icon{
		position: absolute;
	  top: 40%;
	  left: 2%;
	  width: 10px;
	  height: 10px;
	}

}