/* Programs */
.Program{
	.Program-wrap{
		width:65%;
		margin-bottom: 5rem;

		.con{
			p{
				font-size:var(--md);
				color:var(--gray-500);
			}
		}
	}
}

/* 課程 */
.Class{
	background: linear-gradient(to right, #ffffff 0%,#ffffff 32%,#de051b 32%,#de051b 100%);
	overflow:hidden;
	padding: 5rem 0;

	.bg{
		width:15%;
		opacity: .3;
		top:-4rem;
		right:-3.5rem;
		z-index:3;
	}

	.Class-wrap{
		position:relative;
		width:65%;
		z-index:5;

		.Class-group{	
			.con{
				background:var(--white);
				height:80%;
				margin-top: 5rem;
				padding: 2rem;

				.title{
					font-size:var(--xl);
					border-bottom:1px solid var(--gray-200);
					margin-bottom: 1rem;
					padding-bottom: 1rem;
				}

				p{
					font-size:var(--base);
				}
			}

			& + .Class-group{
				margin-top: 5rem;
			}
		}
	}
}

.Level{
	background: linear-gradient(to right, #222940 0%,#222940 67%,#FFFFFF 67%,#FFFFFF 100%);
	overflow:hidden;
	margin-bottom: 5rem;
	padding: 5rem 0;

	.bg{
		width:15%;
		opacity: .3;
		top:-4rem;
		left:-2rem;
		z-index:3;
	}

	.Level-wrap{
		position:relative;
		width:65%;
		z-index:5;

		.Level-group{	
			.con{
				background:var(--white);
				height:80%;
				margin-top: 5rem;
				padding: 2rem;

				.title{
					font-size:var(--xl);
					border-bottom:1px solid var(--gray-200);
					margin-bottom: 1rem;
					padding-bottom: 1rem;
				}

				p{
					font-size:var(--base);
				}
			}

			& + .Level-group{
				margin-top: 5rem;
			}
		}
	}
}

@media screen and (min-width:1400px) and (max-width:1599px){
	/* Programs */
	.Program{
		.Program-wrap{
			width:75%;
		}
	}

	/* 課程 */
	.Class{
		.Class-wrap{
			width:75%;
		}
	}

	.Level{
		.Level-wrap{
			width:75%;
		}
	}
}

@media screen and (min-width:1200px) and (max-width:1399px){
	/* Programs */
	.Program{
		.Program-wrap{
			width:80%;
		}
	}

	/* 課程 */
	.Class{
		.bg{
			width:17%;
		}

		.Class-wrap{
			width:80%;

			.Class-group{
				.con{
					padding:1.2rem 2rem;
				}	
			}
		}
	}

	.Level{
		.bg{
			width:17%;
		}

		.Level-wrap{
			width:80%;

			.Level-group{	
				.con{
					padding:1.2rem 2rem;
				}
			}
		}
	}
}

@media screen and (min-width:1024px) and (max-width:1199px){
	/* Programs */
	.Program{
		.Program-wrap{
			width:90%;
		}
	}

	/* 課程 */
	.Class{
		.bg{
			width:18%;
			right:-2.5rem;
		}

		.Class-wrap{
			width:90%;

			.Class-group{
				.con{
					padding:1.2rem 2rem;
				}

				&:last-child{
					.con{
						height:75%;
					}
				}
			}
		}
	}

	.Level{
		.bg{
			width:18%;
			right:-2.5rem;
		}

		.Level-wrap{
			width:90%;

			.Level-group{	
				.con{
					padding:1.2rem 2rem;
				}

				&:first-child{
					.con{
						height:76%;
					}
				}
			}
		}
	}
}

@media screen and (min-width:992px) and (max-width:1023px){
	/* Programs */
	.Program{
		.Program-wrap{
			width:90%;
		}
	}

	/* 課程 */
	.Class{
		.bg{
			width:18%;
			right:-2.5rem;
		}

		.Class-wrap{
			width:90%;

			.Class-group{
				.con{
					padding:1rem 2rem;
				}

				&:last-child{
					.con{
						height:75%;
					}
				}
			}
		}
	}

	.Level{
		.bg{
			width:18%;
			right:-2.5rem;
		}

		.Level-wrap{
			width:90%;

			.Level-group{	
				.con{
					padding:1rem 2rem;
				}

				&:first-child{
					.con{
						height:76%;
					}
				}
			}
		}
	}
}

@media screen and (max-width:991px){
	/* Programs */
	.Program{
		.Program-wrap{
			width:90%;
		}
	}

	/* 課程 */
	.Class{
		background: linear-gradient(to right, #ffffff 0%,#ffffff 15%,#de051b 15%,#de051b 100%);

		.Class-wrap{
			width:90%;
			
			.Class-group{
				.con{
					height:auto;
					margin-top: 0;
				}
			}
		}
	}

	.Level{
		background: linear-gradient(to right, #222940 0%,#222940 85%,#FFFFFF 85%,#FFFFFF 100%);

		.Level-wrap{
			width:90%;

			.Level-group{
				.con{
					height:auto;
					margin-top: 0;
				}
			}
		}
	}
}

@media screen and (min-width:768px) and (max-width:991px){
	/* 課程 */
	.Class{
		.bg{
			width:100%;
			right:-32.5rem;
		}
	}

	.Level{
		.bg{
			width:100%;
			right:-32.5rem;
		}
	}
}

@media screen and (max-width:767px){
	/* 課程 */
	.Class{
		.bg{
			width:100%;
			right:-32.5rem;
		}
	}

	.Level{
		.bg{
			width:100%;
			right:-32.5rem;
		}
	}
}