/* CSS Document */

#freshers{
	padding: var(--space) 0 calc(var(--space) + 2em) 0;
	overflow: hidden;
	& header{
		position: relative;
		margin-bottom: var(--space);
		& h2{
			position: absolute;
			top: 50%;
			left: 0;
			display: grid;
			grid-gap: 0.2em;
			width: 100%;
			line-height: 1.38em;
			letter-spacing: 0.12em;
			transform: translateY(-50%);
			z-index: 1;
			& span{
				padding: 0.2em 0.5em 0.1em 0.5em;
				justify-self: center;
				background: #fff;
			}
		}
		& h2+div{
			& ul{
				display: grid;
			}
			& li{
				position: relative;
				text-align: center;
				&:before{
					content: "";
					position: absolute;
					bottom: 0;
					width: 200%;
					height: 80%;
					background: currentColor;
					z-index: -1;
				}
				&:nth-child(1){
					&:before{
						right: 0;
						background: #78b0eb;
						transform: skewX(30deg);
						transform-origin: right bottom;
					}
				}
				&:nth-child(2){
					&:before{
						left: 0;
						background: #ff8f8c;
						transform: skewX(-30deg);
						transform-origin: left bottom;
					}
				}
				& img{
					width: auto;
				}
			}
		}
		& p{
			position: absolute;
			width: 100%;
			line-height: 1.4em;
			z-index: 1;
		}
	}
	& header+div{
		padding: var(--space) 0;
	}
	& h3{
		font-size: min(7vw, 3.2em);
		line-height: 1.38em;
		letter-spacing: 0.08em;
		color: #78b0eb;
		text-align: center;
	}
	& section{
		counter-increment: count;
		padding: max(2em, calc(var(--space) - 1em)) 0;
		border-bottom: 1px solid #c7c2c2;
		&:last-of-type{
			& h4{
				display: none;
			}
			& h4+div{
				margin-top: 0;
			}
		}
		&:not(:last-of-type){
			& h4+div{
				margin-top: 1em;
			}
		}
		& h4{
			padding-left: 1.1em;
			text-indent: -1.1em;
			font-size: min(5vw, 1.5em);
			letter-spacing: 0.08em;
			line-height: 1.6em;
		}
		& dl{
			display: grid;
			& :where(dt,dd){
				line-height: 2em;
				letter-spacing: 0.08em;
			}
		}
		& dt{
			&:after{
				content: "：";
			}
		}
		& dd{
			& dl{
				display: inline-grid;
				grid-template-columns: auto auto;
				grid-gap: 0 1em;
			}
			& dt{
				&:before{
					content: "［";
				}
				&:after{
					content: "］";
				}
			}
			& li{
				position: relative;
				padding-left: 1em;
				&:before{
					content: "・";
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
	}
}

.btm{
	position: relative;
	display: block;
	width: min(70%, 30em);
	margin: auto;
	padding: 1em;
	border: 2px solid #7d7373;
	color: #fff;
	font-family: montserrat,sans-serif;
	line-height: 1.75em;
	letter-spacing: 0.03em;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	z-index: 1;
	&:before,
	&:after{
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 150%;
		height: 100%;
		transform: translateX(-50%);
	}
	&:before{
		background: #7d7373;
		z-index: -2;
	}
	&:after{
		background: #fff;
		transform: skewX(-25deg) translateX(-150%);
		transform-origin: center left;
		transition: transform 0.2s ease-out;
		z-index: -1;
	}
	&:hover{
		color: #7d7373;
	}
	&:hover:after{
		transform: skewX(-25deg) translateX(-50%);
	}
}

/* for lower */
@media (max-width: 1399.98px) {
/*1399px以下*/
}
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}


/* Small */
@media (max-width: 767.98px) {
/*767px以下*/
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
#freshers{
	& header{
		& h2{
			margin-top: 1em;
			font-size: 1.8em;
			z-index: 2;
		}
		& h2+div li{
			&:nth-child(1){
				&:before{
					right: 2em;
				}
				& img{
					transform: translateX(-9em);
				}
			}
			&:nth-child(2){
				margin-top: -10em;
				z-index: 1;
				&:before{
					left: 2em;
				}
				& img{
					transform: translateX(9em);
				}
			}
			& img{
				height: 16em;
			}
		}
		& p{
			bottom: 2em;
		}
	}
	& dd+dt{
		margin-top: 1em;
	}
	& dl{
		grid-template-columns: 1fr;
	}
	& dt{
		margin: 0;
	}
}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#freshers{
	& header{
		& h2+div{
			& ul{
				position: relative;
				left: 50%;
				grid-template-columns: 1fr 1fr;
				width: min(100vw, 1200px);
				transform: translateX(-50%);
				overflow: hidden;
			}
		}
	}
	& dl{
		grid-template-columns: 6em auto;
		grid-gap: 0.5em 0;
	}
}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#freshers{
	& header{
		& h2{
			margin-top: 1em;
			font-size: 2.4em;
		}
		& h2+div{
			& li{
				&:nth-child(1){
					margin-bottom: 3em;
					&:before{
						right: -10em;
					}
					& img{
						transform: translateX(-4em);
					}
				}
				&:nth-child(2){
					margin-top: 3em;
					&:before{
						left: -10em;
					}
					& img{
						transform: translateX(4em);
					}
				}
				& img{
					height: 20em;
				}
			}
		}
		& p{
			bottom: 0em;
		}
	}
}
}


/* Medium */
@media (min-width: 768px) {
/*768px以上*/
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#freshers{
	& header{
		& h2{
			margin-top: 1em;
			font-size: 2.4em;
			}
		& h2+div{
			& li{
				&:nth-child(1){
					margin-bottom: 3em;
					&:before{
						right: -10em;
					}
					& img{
						transform: translateX(-4em);
					}
				}
				&:nth-child(2){
					margin-top: 3em;
					&:before{
						left: -10em;
					}
					& img{
						transform: translateX(4em);
					}
				}
				& img{
					height: 20em;
				}
			}
		}
	}
}
}


/* Large */
@media (min-width: 992px) {
/*992px以上*/
#freshers{
	& header{
		& h2{
			margin-top: 1em;
			font-size: 3.2em;
			}
		& h2+div{
			& li{
				&:nth-child(1){
					margin-bottom: 5em;
					&:before{
						right: -14em;
					}
					& img{
						transform: translateX(-5em);
					}
				}
				&:nth-child(2){
					margin-top: 5em;
					z-index: 1;
					&:before{
						left: -14em;
					}
					& img{
						transform: translateX(5em);
					}
				}
				& img{
					height: 28em;
				}
			}
		}
		& p{
			bottom: 0.5em;
		}
	}
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}


/* X-Large */
@media (min-width: 1200px) {
/*1200px以上*/
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
/*1200px～1399px*/
}


/* XX-Large */
@media (min-width: 1400px) {
/*1400px以上*/
}