@charset 'utf-8';

/*---------------------------------------------------------------------- */
/* Recruitment Styles
------------------------------------------------------------------------ */

/* Utilities
---------------------------------------------------------- */

/* Block --------------------------------- */

/* .block-flow */

.block-flow {
	padding: 9rem var(--page-margin-sp);
}

.block-flow > .txt {
	margin-top: 4rem;
}

/* List --------------------------------- */

/* .list-screening */

.list-screening {
	display: flex;
	flex-flow: column;
	gap: 1rem 0;
	margin-top: 4rem;
	padding: 5rem 3rem;
	background: #fff;
	clip-path: inset(0 0 round 2rem);
}

.list-screening > li {
	display: flex;
	flex-flow: column;
	gap: 3rem 0;
	position: relative;
	padding-left: 4.5rem;
}

.list-screening > li:not(:last-of-type) {
	padding-bottom: 3rem;
}

.list-screening > li:not(:last-of-type)::before {
	position: absolute;
	top: 4rem;
	left: 1.5rem;
	width: .3rem;
	height: calc(100% - 4rem);
	background: linear-gradient(to bottom, var(--mono-color05) .3rem, transparent .3rem, transparent .8rem) repeat-y left top;
	background-size: .3rem .8rem;
	content: '';
}

.list-screening > li > .num {
	display: grid;
	place-content: center;
	position: absolute;
	left: 0;
	padding-bottom: .1em;
	width: 3.3rem;
	height: 3.3rem;
	background: var(--warm-color03);
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 1.9rem;
	letter-spacing: 0;
}

.list-screening > li > .title {
	margin-top: -.8rem;
	font-size: 2.2rem;
	letter-spacing: .05em;
}

/* .list-info-session */

.list-info-session {
	display: flex;
	flex-flow: column;
	gap: 3.5rem 0;
	margin-top: 3.5rem;
	font-weight: 700;
}

.list-info-session > li {
	display: flex;
	align-items: center;
}

.list-info-session > li > .month {
	display: flex;
	align-items: baseline;
	justify-content: center;
	padding-top: .4em;
	width: 8rem;
	height: 8rem;
	background: var(--warm-color03);
	border-radius: 50%;
	color: #fff;
	font-size: 1.7rem;
	letter-spacing: .05em;
}

.list-info-session > li > .month > span {
	font-size: 3rem;
	letter-spacing: .05em;
}

.list-info-session > li > dl {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 1.4rem 0;
	margin-left: 1.2rem;
	width: calc(100% - 9.2rem);
	line-height: 1.35;
	border-left: .2rem solid var(--warm-color10);
}

.list-info-session > li > dl > dt {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	padding-left: 1rem;
	width: 11.2rem;
}

.list-info-session > li > dl > dt > .day {
	display: flex;
	align-items: baseline;
	font-size: 1.5rem;
	letter-spacing: .05em;
}

.list-info-session > li > dl > dt > .day > span {
	font-size: 2.7rem;
	letter-spacing: .05em;
}

.list-info-session > li > dl > dt > .time {
	font-size: 1.7rem;
	letter-spacing: .05em;
}

.list-info-session > li > dl > dd {
	display: grid;
	place-content: center;
	width: 12.7rem;
	height: 5.5rem;
	background: var(--warm-color06);
	border-radius: 1rem;
	font-size: 1.25rem;
	text-align: center;
	letter-spacing: .05em;
}

/* .list-flow */

.list-flow {
	display: flex;
	flex-flow: column;
	gap: 4.3rem 0;
}

.list-flow > li {
	position: relative;
	padding: 5rem 3rem;
	background: #fff;
	border-radius: 2rem;
}

.list-flow > li:not(:last-of-type)::after {
	position: absolute;
	bottom: -5rem;
	left: 50%;
	width: 3rem;
	height: 4rem;
	border: 0 solid transparent;
	border-width: 2rem 1.5rem;
	border-top-color: var(--warm-color11);
	transform: translateX(-50%);
	content: '';
}

.list-flow > li > .title {
	font-weight: 700;
	font-size: 2.2rem;
	text-align: center;
	letter-spacing: .05em;
}

.list-flow > li > .txt {
	margin-top: 3rem;
	text-align: justify;
}


/*---------------------------------------------------------------------- */
/* 768px Tablet & PC Styles
------------------------------------------------------------------------ */

@media screen and (min-width: 768px), print {

/* Utilities
---------------------------------------------------------- */

/* Block --------------------------------- */

/* .block-flow */

.block-flow {
	padding: 20rem 35rem;
}

.block-flow > .txt {
	margin-top: 10rem;
}

/* List --------------------------------- */

/* .list-screening */

.list-screening {
	gap: 2rem 0;
	margin: 8rem -15rem 0 -15rem;
	padding: 15rem;
	width: 120rem;
	clip-path: inset(0 0 round 4rem);
}

.list-screening > li {
	display: grid;
	grid-template-columns: 6.7rem 22rem auto;
	gap: 0 4rem;
	padding-left: 0;
}

.list-screening > li:not(:last-of-type) {
	padding-bottom: 5.5rem;
}

.list-screening > li:not(:last-of-type)::before {
	top: 8rem;
	left: 3.2rem;
	width: .4rem;
	height: calc(100% - 8rem);
	background: linear-gradient(to bottom, var(--mono-color05) .4rem, transparent .4rem, transparent 1.1rem) repeat-y left top;
	background-size: .4rem 1.1rem;
}

.list-screening > li > .num {
	position: static;
	width: 6.7rem;
	height: 6.7rem;
	font-size: 3.5rem;
}

.list-screening > li > .title {
	margin-top: 1.5rem;
	line-height: 1;
	font-size: 3rem;
}

.list-screening > li > .txt {
	margin-top: 1rem;
}

/* .list-info-session */

.list-info-session {
	gap: 6.5rem;
	margin: 9rem auto 0;
	width: 81.5rem;
}

.list-info-session > li > .month {
	padding-top: 0;
	width: 15.4rem;
	height: 15.4rem;
	font-size: 3.5rem;
}

.list-info-session > li > .month > span {
	font-size: 6.5rem;
}

.list-info-session > li > dl {
	gap: 2rem 0;
	margin-left: 6.3rem;
	width: calc(100% - 21.7rem);
}

.list-info-session > li > dl > dt {
	padding-left: 6rem;
	width: 27.4rem;
}

.list-info-session > li > dl > dt > .day {
	font-size: 2.8rem;
}

.list-info-session > li > dl > dt > .day > span {
	font-size: 5rem;
}

.list-info-session > li > dl > dt > .time {
	font-size: 2.5rem;
}

.list-info-session > li > dl > dd {
	width: 32rem;
	height: 7.9rem;
	font-size: 1.8rem;
}

/* .list-flow */

.list-flow {
	gap: 6.4rem 0;
}

.list-flow > li {
	padding: 8rem 0;
	border-radius: 4rem;
}

.list-flow > li:not(:last-of-type)::after {
	bottom: -7rem;
	width: 3.5rem;
	height: 5rem;
	border-width: 2.5rem 1.7rem;
}

.list-flow > li > .txt {
	margin-top: 4rem;
	text-align: center;
}

}