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

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

	.Course-wrap{
		position:relative;
		margin-top: 7.5rem;
		z-index:5;

		.Course-group{
			margin-bottom: 3rem;

			.con{
				color:var(--white);
				padding: 0 6rem 0 0;				

				.title{
					font-family: Arial, 'Noto Sans', Verdana, Helvetica, sans-serif;
					font-size:var(--xl);
					border-bottom:5px solid hsla(0,0%,82%,.5);
					margin-bottom: 2rem;
					padding-bottom: 2rem;
				}

				.txt{	
					p{
						font-size:var(--md);
						text-align:justify;
						width:70%;
						word-wrap:break-word;

						&.name{
							width:30%;
						}
					}

					& + .txt{
						border-top:1px solid var(--white);
						padding-top: 1rem;	
					}

					.list{
						p{
							width:13%;

							&.right{
								width:87%;
								border-left:1px solid var(--white);
								padding-left:2rem;
							}
						}

						& + .list{
							margin-top: 1rem;
						}
					}
				}

				.contxt{
					margin-inline-start: 5rem;
				}				
			}

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

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

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

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

		.Level-group{	
			margin-top: 10.5em;
			margin-bottom: 3rem;

			.con{
				color:var(--white);
				padding: 0 4.5rem 2rem 6rem;

				.title{
					font-size:var(--xl);
					border-bottom:5px solid hsla(0,0%,82%,.5);
					margin-bottom: 2rem;
					padding-bottom: 2rem;
				}

				.txt{
					p{
						font-size:var(--md);
						text-align:justify;
						width:70%;
						word-wrap:break-word;

						&.name{
							width:30%;
						}
					}

					& + .txt{
						border-top:1px solid var(--white);
						padding-top: 1rem;	
					}
				}

				ul{
					li{
						line-height:2.3rem;
					}
				}
			}

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

.courseReserve{
	background:var(--gray-100);
	padding:5rem 0;

	.courseReserve-wrap{
		width:70%;

		.title{
			h2{
				color:var(--blue-900);
			}
		}
	}

	.coursePageForm{
		p{
			
			
		}

		span{
			color:var(--red-500);
			margin-right: 0.5rem;
		}

		.courseReserve-form{
			.form-group{
				label{
					font-family:'EB Garamond', Arial, serif;
					font-size:var(--md);
					font-weight:600;
				}

				input{
				font-size:var(--md);
				border:0;
				border-bottom:1px solid var(--gray-300);
				border-radius:0;

					&::placeholder{
						color:var(--gray-200);
					}
				}

				.imgCaptcha{
					cursor:pointer;
				}
			}

			.contact-button{
				.btn{
					background:var(--red-500);
					border-radius:5rem;
					font-weight:500;
					color:var(--white);
					padding:.5rem 3rem .5rem 2rem;

					&:before{
						position:absolute;
						content:"";
						background:url('/../../images/layout/2024/icon_send.svg');
						display:block;
						width:1.1rem;
						height:1.1rem;
						top:0;
						bottom:0;
						right:1.5rem;
						margin:auto;
					}

					&:hover{
						background:var(--red-300);
					}
				}
			}
		}
	}
}

.courseContactUs{
	.course-button{
		p{
			font-size:var(--base);
		}

		.btn{
			background:var(--red-500);
			border-radius:5rem;
			font-weight:500;
			color:var(--white);
			padding:.5rem 3rem .5rem 2rem;

			&:before{
				position:absolute;
				content:"";
				background:url('/../../images/layout/2024/icon_send.svg');
				display:block;
				width:1.1rem;
				height:1.1rem;
				top:0;
				bottom:0;
				right:1.5rem;
				margin:auto;
			}

			&:hover{
				background:var(--red-300);
				}

		}
	}
}

@media screen and (min-width:1600px) and (max-width:1799px){
	.Course{
		.Course-wrap{
			margin-top: 5rem;

			.Course-group{	
				.con{
					padding:0 4rem 0 0;
				}
			}
		}
	}	

	.Level{
		.Level-wrap{
			.Level-group{
				margin-top: 8rem;

				.con{
					padding:0 4rem 3rem 5rem;
				}

			}
		}
	}

	.courseReserve{
		padding: 7rem 0;
	}
}

@media screen and (min-width:1400px) and (max-width:1599px){
	.Course{
		.Course-wrap{
			margin-top: 3rem;

			.Course-group{	
				margin-bottom: 2rem;

				.con{
					padding:0 4rem 0 0;

					.txt{
						p{
							width:65%;

							&.name{
								width:35%;
							}
						}
					}
				}
			}
		}
	}	

	.Level{
		.Level-wrap{
			.Level-group{
				margin-top: 6rem;
				margin-bottom: 2rem;

				.con{
					padding:0 4rem 3rem 4.5rem;

					.txt{
						p{
							width:65%;
							
							&.name{
								width:35%;
							}
						}
					}
				}

			}
		}
	}

	.courseReserve{
		padding: 6rem 0;

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

@media screen and (min-width:1200px) and (max-width:1399px){
	.Course{
		.bg{
			top:-2rem;
			right:-2rem;
		}

		.Course-wrap{
			margin-top: 3rem;

			.Course-group{	
				margin-bottom: 1rem;

				.con{
					padding:0 4rem 0 0;

					.txt{
						p{
							width:65%;

							&.name{
								width:35%;
							}
						}
					}
				}
			}
		}
	}	

	.Level{
		.bg{
			top:-3rem;
			left:-1rem;
		}

		.Level-wrap{
			.Level-group{
				margin-top: 6rem;
				margin-bottom: 2rem;

				.con{
					padding:0 4rem 3rem 4.5rem;

					.txt{
						p{
							width:65%;

							&.name{
								width:35%;
							}
						}
					}
				}

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

			}
		}
	}

	.courseReserve{
		padding: 6rem 0;

		.courseReserve-wrap{
			width:80%;
		}
	}
}

@media screen and (min-width:1024px) and (max-width:1199px){
	.Course{
		.bg{
			top:-2rem;
			right:-2rem;
		}

		.Course-wrap{
			margin-top: 3rem;

			.Course-group{	
				margin-bottom: 1rem;

				.con{
					padding:0 2.5rem 0 0;

					.contxt{
						margin-inline-start: 3rem;
					}

					.txt{
						p{
							font-size:var(--base);
							width:60%;

							&.name{
								width:40%;
							}
						}
					}
				}
			}
		}
	}	

	.Level{
		.bg{
			top:-3rem;
			left:-1rem;
		}

		.Level-wrap{
			.Level-group{
				margin-top: 4rem;
				margin-bottom: 2rem;

				.con{
					padding:0 3rem 2rem 3rem;

					.txt{
						p{
							font-size:var(--base);
							width:60%;

							&.name{
								width:40%;
							}
						}
					}

					ul{
						li{
							font-size:var(--base);
							line-height:2rem;
						}
					}
				}

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

			}
		}
	}

	.courseReserve{
		padding: 5rem 0;

		.courseReserve-wrap{
			width:85%;
		}
	}
}

@media screen and (min-width:992px) and (max-width:1023px){
	.Course{
		margin-bottom: 7rem;
		padding: 5rem 0;

		.bg{
			top:-2rem;
			right:-1rem;
		}

		.Course-wrap{
			margin-top: 1rem;

			.Course-group{	
				margin-bottom: 1rem;

				.con{
					padding:0 2.5rem 0 0;

					.contxt{
						margin-inline-start: 3rem;
					}

					.txt{
						p{
							font-size:var(--base);
							width:60%;

							&.name{
								width:40%;
							}
						}
					}
				}
			}
		}
	}	

	.Level{
		padding: 5rem 0 2.5rem 0;

		.bg{
			top:-2rem;
			left:-1rem;
		}

		.Level-wrap{
			.Level-group{
				margin-top: 3rem;
				margin-bottom: 2rem;

				.con{
					padding:0 3rem 2rem 3rem;

					.txt{
						p{
							font-size:var(--base);
							width:60%;

							&.name{
								width:40%;
							}
						}
					}

					ul{
						li{
							font-size:var(--base);
							line-height:2rem;
						}
					}
				}

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

			}
		}
	}

	.courseReserve{
		padding: 5rem 0;

		.courseReserve-wrap{
			width:90%;
		}
	}
}

@media screen and (max-width:991px){
	.Course{
		background: linear-gradient(to bottom, var(--white) 0%,var(--white) 8%,var(--red-500) 8%,var(--red-500) 8%,var(--red-500) 100%);

		.Course-wrap{
			width:90%;
			margin-top:1rem;

			.Course-group{
				margin-top: 0;

				.con{
					height:auto;
					margin-top: 0;
					padding:3rem 0 0 0;

					.contxt{
						margin-inline-start:0;
					}
				}
			}
		}
	}	

	.Level{
		background:linear-gradient(to bottom, var(--white) 0%,var(--white) 5%,var(--blue-900) 5%,var(--blue-900) 5%,var(--blue-900) 100%);

		.Level-wrap{
			width:90%;

			.Level-group{
				flex-direction: column-reverse;
				margin-top: 0;
				margin-bottom: 2rem;

				.con{
					height:auto;
					margin-top: 0;
					padding:3rem 0 0 0;
				}

			}
		}
	}
}

@media screen and (min-width:768px) and (max-width:991px){
	.Course{
		margin-bottom: 5rem;
		padding: 0 0 3rem 0;

		.bg{
			display:none;
		}

		.Course-wrap{

			.Course-group{	
				margin-bottom: 1rem;

				.con{

					.txt{
						p{
							font-size:var(--base);
							width:75%;

							&.name{
								width:25%;
							}
						}
					}
				}
			}
		}
		
	}	

	.Level{
		padding: 0 0 2.5rem 0;

		.bg{
			display:none;
		}

		.Level-wrap{
			.Level-group{
				margin-bottom: 3rem;

				.con{

					.txt{
						p{
							font-size:var(--base);
							width:75%;

							&.name{
								width:25%;
							}
						}
					}

					ul{
						li{
							font-size:var(--base);
							line-height:2rem;
						}
					}
				}

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

			}
		}
	}

	.courseReserve{
		padding: 5rem 0;

		.courseReserve-wrap{
			width:90%;
		}		
	}
}

@media screen and (min-width:648px) and (max-width:767px){
	.Course{
		background: linear-gradient(to bottom, var(--white) 0%,var(--white) 6%,var(--red-500) 6%,var(--red-500) 6%,var(--red-500) 100%);
		margin-bottom: 5rem;
		padding: 0 0 3rem 0;

		.bg{
			display:none;
		}

		.Course-wrap{

			.Course-group{	
				margin-bottom: 1rem;

				.con{

					.txt{
						p{
							font-size:var(--base);
							width:100%;

							&.name{
								font-weight:700;
								width:100%;
							}
						}
					}
				}
			}
		}
	}	

	.Level{
		background:linear-gradient(to bottom, var(--white) 0%,var(--white) 4%,var(--blue-900) 4%,var(--blue-900) 4%,var(--blue-900) 100%);
		padding: 0 0 2.5rem 0;

		.bg{
			display:none;
		}

		.Level-wrap{
			.Level-group{
				margin-bottom: 3rem;

				.con{

					.txt{
						p{
							font-size:var(--base);
							width:100%;

							&.name{
								width:100%;
							}
						}
					}

					ul{
						li{
							font-size:var(--base);
							line-height:2rem;
						}
					}
				}

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

			}
		}
	}

	.courseReserve{
		padding: 5rem 0;

		.courseReserve-wrap{
			width:90%;
		}
	}
}

@media screen and (min-width:425px) and (max-width:767px){
	.Course{
		background: linear-gradient(to bottom, var(--white) 0%,var(--white) 6%,var(--red-500) 6%,var(--red-500) 6%,var(--red-500) 100%);
		margin-bottom: 5rem;
		padding: 0 0 3rem 0;

		.bg{
			display:none;
		}

		.Course-wrap{

			.Course-group{	
				margin-bottom: 1rem;

				.con{

					.txt{
						p{
							font-size:var(--base);
							width:100%;

							&.name{
								font-weight:700;
								width:100%;
							}
						}
					}
				}
			}
		}
	}	

	.Level{
		background:linear-gradient(to bottom, var(--white) 0%,var(--white) 4%,var(--blue-900) 4%,var(--blue-900) 4%,var(--blue-900) 100%);
		padding: 0 0 2.5rem 0;

		.bg{
			display:none;
		}

		.Level-wrap{
			.Level-group{
				margin-bottom: 3rem;

				.con{

					.txt{
						p{
							font-size:var(--base);
							width:100%;

							&.name{
								width:100%;
							}
						}
					}

					ul{
						li{
							font-size:var(--base);
							line-height:2rem;
						}
					}
				}

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

			}
		}
	}

	.courseReserve{
		padding: 5rem 0;

		.courseReserve-wrap{
			width:90%;
		}
	}
}

@media screen and (min-width:375px) and (max-width:424px){
	.Course{
		background: linear-gradient(to bottom, var(--white) 0%,var(--white) 4%,var(--red-500) 4%,var(--red-500) 4%,var(--red-500) 100%);
		margin-bottom: 5rem;
		padding: 0 0 3rem 0;

		.bg{
			display:none;
		}

		.Course-wrap{

			.Course-group{	
				margin-bottom: 1rem;

				.con{

					.txt{
						p{
							font-size:var(--base);
							width:100%;

							&.name{
								font-weight:700;
								width:100%;
							}
						}
					}
				}
			}
		}
	}	

	.Level{
		background:linear-gradient(to bottom, var(--white) 0%,var(--white) 2.5%,var(--blue-900) 2.5%,var(--blue-900) 2.5%,var(--blue-900) 100%);
		padding: 0 0 2.5rem 0;

		.bg{
			display:none;
		}

		.Level-wrap{
			.Level-group{
				margin-bottom: 3rem;

				.con{

					.txt{
						p{
							font-size:var(--base);
							width:100%;

							&.name{
								width:100%;
							}
						}
					}

					ul{
						li{
							font-size:var(--base);
							line-height:2rem;
						}
					}
				}

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

			}
		}
	}

	.courseReserve{
		padding: 5rem 0;

		.courseReserve-wrap{
			width:90%;
		}
	}
}

@media screen and (max-width:374px){
	.Course{
		background: linear-gradient(to bottom, var(--white) 0%,var(--white) 4%,var(--red-500) 4%,var(--red-500) 4%,var(--red-500) 100%);
		margin-bottom: 5rem;
		padding: 0 0 3rem 0;

		.bg{
			display:none;
		}

		.Course-wrap{

			.Course-group{	
				margin-bottom: 1rem;

				.con{

					.txt{
						.list{
							p{
								width:20%;
							}
						}

						p{
							font-size:var(--base);
							width:100%;

							&.name{
								font-weight:700;
								width:100%;
							}
						}
					}
				}
			}
		}
	}	

	.Level{
		background:linear-gradient(to bottom, var(--white) 0%,var(--white) 2.5%,var(--blue-900) 2.5%,var(--blue-900) 2.5%,var(--blue-900) 100%);
		padding: 0 0 2.5rem 0;

		.bg{
			display:none;
		}

		.Level-wrap{
			.Level-group{
				margin-bottom: 3rem;

				.con{

					.txt{
						p{
							font-size:var(--base);
							width:100%;

							&.name{
								width:100%;
							}
						}
					}

					ul{
						li{
							font-size:var(--base);
							line-height:2rem;
						}
					}
				}

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

			}
		}
	}

	.courseReserve{
		padding: 5rem 0;

		.courseReserve-wrap{
			width:90%;
		}
	}
}