#plan { }
#plan .top { position: relative; padding: 123px 0 72px; background: url(../img/plan_bg.jpg) no-repeat center center / cover;}
#plan .top:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6)}
#plan .top .title { position: relative; color: #fff; z-index: 1;}
#plan .top .title .sub-title { font-size: 36px; margin-bottom: 0;}
#plan .top p { position: relative; color: #fff; z-index: 1;}

#plan .courselist { padding: 100px 0 50px;}
#plan .courselist .flex { display: flex; justify-content: space-between; align-content: flex-start;}
#plan .courselist .flex .course { position: relative; width: 530px; }
#plan .courselist .flex .course .recommendation { position: absolute; top: -24px; left: -40px; transform: rotate(-15deg); width: 100px; padding: 32px 0; font-size: 18px; font-weight: 700; text-align: center; border-radius: 50%; background: #FBFF2D;}
#plan .courselist .flex .course .name { width: 100%; padding: 25px 0 25px 50px; font-size: 35px; line-height: 100%; color: #fff; background: #000; text-align: center; margin-bottom: 0;}
#plan .courselist .flex .course.pop .name { background: #8F0808;}
#plan .courselist .flex .course .name span { display: inline-block; width: 115px; padding: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 21px; color: #000; border-radius: 20px; background-color: #fff; margin-left: 18px;}
#plan .courselist .flex .course.pop .name span { color: #8F0808;}
#plan .courselist .flex .course .box { padding: 40px; background: url(../img/plan_bg2.jpg) no-repeat center center / cover;}
#plan .courselist .flex .course .box .plans { background: #fff;}
#plan .courselist .flex .course .box .plans:first-child { margin-bottom: 35px;}
#plan .courselist .flex .course .box .plans .planname { width: 100%; font-size: 28px; color: #fff; background-color: #434343; text-align: center; margin-bottom: 0;}
#plan .courselist .flex .course.pop .box .plans .planname { background: #570C0E;}
#plan .courselist .flex .course .box .plans .price { font-size: 18px; line-height: 240%; padding: 14px 0 22px; margin-bottom: 0; text-align: center;}
#plan .courselist .flex .course .box .plans .price em { display: block; font-family: "GaramondPremrPro"; font-style: normal; font-size: 64px; padding: 15px 0 7px;}
#plan .courselist .flex .course.pop .box .plans .price em { color: #8F0808;}
#plan .courselist .flex .course .box .plans .price em small { font-family: 'Noto Serif JP', sans-serif; font-size: 28px; padding-left: 5px;}
#plan .courselist .flex .course .box .plans .price span { display: block; font-family: 'Noto Serif JP', sans-serif; font-size: 21px; color: #303030;}
#plan .courselist .flex .course .box .plans .price span b { font-size: 35px; font-family: "GaramondPremrPro"; font-style: normal; font-weight: 400;}
#plan .courselist .footnote { text-align: right; padding-top: 34px;}

#plan .bnr { text-align: center;}
#plan .bnr img { width: 100%; height: auto; border: 1px solid #4A4A4A;}
#plan .bnr .management { margin-bottom: 35px;}
#plan .bnr .admission { margin-bottom: 67px;}
#plan .bnr p { font-size: 20px; margin-bottom: 23px;}
#plan .bnr .btn { width: 650px; font-size: 20px; padding: 29px 0;}

@media (max-width:1380px) {
}



@media (min-width:1380px) {
}





@media (min-width:1200px) {
}


@media screen and (min-width: 992px) {
}


@media (max-width:1199px) {
	#plan .courselist .flex .course { width: 450px;}
	#plan .courselist .flex .course .box { padding: 30px;}
}




@media (max-width:991px) {
	
	#plan .courselist .flex .course { position: relative; width: 330px; }
	#plan .courselist .flex .course .recommendation { top: -24px; left: -40px; width: 80px; padding: 26px 0; font-size: 14px; text-align: center;}
	#plan .courselist .flex .course .name { width: 100%; padding: 25px 0 25px 50px; font-size: 24px;}
	#plan .courselist .flex .course .name span { width: 75px; padding: 0; font-size: 14px; margin-left: 10px;}
	#plan .courselist .flex .course .box { padding: 25px;}
	#plan .courselist .flex .course .box .plans:first-child { margin-bottom: 23px;}
	#plan .courselist .flex .course .box .plans .planname { font-size: 18px;}
	#plan .courselist .flex .course .box .plans .price { font-size: 16px; line-height: 240%; padding: 7px 0 12px;}
	#plan .courselist .flex .course .box .plans .price em { font-size: 42px; padding: 0;}
	#plan .courselist .flex .course .box .plans .price em small { font-size: 18px; padding-left: 2px;}
	#plan .courselist .flex .course .box .plans .price span { font-size: 14px;}
	#plan .courselist .flex .course .box .plans .price span b { font-size: 23px;}
	#plan .courselist .footnote { font-size: 14px; padding-top: 18px;}

}


@media (max-width:807px) {
	
}


@media (max-width:767px) {
	
	#plan { }
	#plan .top {padding: 47px 0 3px; text-align: center;}
	#plan .top:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6)}
	#plan .top .title { position: relative; color: #fff; z-index: 1; margin-bottom: 17px;}
	#plan .top .title .divider { margin: 20px auto;}
	#plan .top .title .sub-title { font-size: 36px; margin-bottom: 0;}
	
	#plan .courselist .flex { display: block;}
	#plan .courselist .flex .course { position: relative; width: 100%; }
	#plan .courselist .flex .course:first-child { margin-bottom: 22px; }
	#plan .courselist .flex .course .recommendation { top: -13px; left: -11px;}
	
	#plan .bnr .management { margin-bottom: 22px;}
	#plan .bnr .admission { margin-bottom: 25px;}
	#plan .bnr p { font-size: 16px; margin-bottom: 20px;}
	#plan .bnr .btn { width: 100%; font-size: 14px; line-height: 120%; padding: 17px 0 12px;}
	
}





@media (max-width:576px) {
	#plan .bnr .btn { max-width: none;}

}


@media only screen and (max-width:640px) {
	#plan .top { background: url(../img/plan_bg_sp.jpg) no-repeat center center / cover;}
}