/* Publications */
.Publications{
	.Publications-wrap{
		margin-bottom: 5rem;

		width:65%;

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

/* 課程 */
.Series{
	background: linear-gradient(to right, #ffffff 0%,#ffffff 10%,#de051b 10%,#de051b 100%);
	position:relative;
	overflow:hidden;
	padding: 8rem 0 5rem 0;
	z-index:5;

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

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

		.Series-group{
			background: linear-gradient(to bottom, transparent 0%,transparent 7%,transparent 7%,#ffffff 7%,#ffffff 100%);
			flex-direction: row;
			width:100%;

			.photo{
				margin-top: -4rem;
			}

			.con{
				padding: 2.5rem 2rem 2rem 2rem;

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

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

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

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

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

.Series3{
	margin-bottom: 5rem;
	padding:6rem 0 8rem 0;
}

.Note{
	background:var(--gray-100);
	width:65%;
	border-left:4px solid var(--red-500);
	margin-bottom: 5rem;

	a{
		font-size:var(--md);
		color:var(--red-500);
	}
}

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

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

	.Note{
		width:75%;
	}
}

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

	/* 課程 */
	.Series{
		background: linear-gradient(to right, #ffffff 0%,#ffffff 5%,#de051b 5%,#de051b 100%);
		
		.bg{
			width:18%;
			right:-2.5rem;
		}

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

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

		.bg{
			width:18%;
			left:-1rem;
		}
	}

	.Note{
		width:80%;
	}
}

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

	/* 課程 */
	.Series{
		background: linear-gradient(to right, #ffffff 0%,#ffffff 2%,#de051b 2%,#de051b 100%);
		
		.bg{
			width:20%;
			top:-3rem;
			right:-2.5rem;
		}

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

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

		.bg{
			width:20%;
			left:-1rem;
		}
	}

	.Note{
		width:90%;
	}
}

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

	/* 課程 */
	.Series{
		background: linear-gradient(to right, #ffffff 0%,#ffffff 2%,#de051b 2%,#de051b 100%);
		
		.bg{
			width:20%;
			top:-3rem;
			right:-2.5rem;
		}

		.Series-wrap{
			width:90%;
		}

		&.Series2{
			background: linear-gradient(to right, #222940 0%,#222940 98%,#FFFFFF 98%,#FFFFFF 100%);
	
			.bg{
				width:20%;
				left:-1rem;
			}
		}
	}

	.Note{
		width:90%;
	}
}

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

	/* 課程 */
	.Series{
		background: var(--red-500);

		.Series-wrap{
			width:100%;

			.Series-group{
				width:90%;
			}
		}

		&.Series2{
			background: var(--blue-900);
	
			.Series-wrap{
				width:100%;
	
				.Series-group{
					flex-direction: column-reverse;
					width:90%;
				}
			}
		}
	}	

	.Note{
		width:90%;
	}
}

@media screen and (min-width:648px) and (max-width:991px){

	/* 課程 */
	.Series{
		
		.bg{
			width:35%;
			top:-3rem;
			right:-2.5rem;
		}

		&.Series2{
		
			.bg{
				width:35%;
				left:-1rem;
				z-index:3;
			}
	
			.Series-wrap{
				.Series-group{
					width:90%;
				}
			}
		}
	}
}

@media screen and (min-width:576px) and (max-width:647px){
	/* 課程 */
	.Series{
		
		.bg{
			width:40%;
			top:-3rem;
			right:-2.5rem;
		}

		&.Series2{
		
			.bg{
				width:40%;
				left:-1rem;
			}
	
			.Series-wrap{
				.Series-group{
					width:90%;
				}
			}
		}
	}
}

@media screen and (min-width:425px) and (max-width:575px){

	/* 課程 */
	.Series{
		
		.bg{
			width:60%;
			top:-3rem;
			right:-2.5rem;
		}

		&.Series2{
		
			.bg{
				width:60%;
				left:-1.5rem;
			}
	
			.Series-wrap{
				.Series-group{
					width:90%;
				}
			}
		}
	}
}

@media screen and (max-width:424px){
	/* 課程 */
	.Series{
		
		.bg{
			width:70%;
			top:-3rem;
			right:-2.5rem;
		}

		&.Series2{
		
			.bg{
				width:70%;
				left:-1.8rem;
			}
	
			.Series-wrap{
				.Series-group{
					width:90%;
				}
			}
		}
	}
}