.flow-table {
	position: relative;
	display:grid;
	grid-column-gap: 2px;
}
.flow-table h3 {
	color:var(--color-white);
	background-color:var(--color-red);
	text-align: center;
}
.flow-table h3,
.flow-table div {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;

}
.flow-table-1 div,
.flow-table-2 div {
	justify-content: center;
}
.flow-j-1 {
	background-color:#fcefe4;
}
.flow-j-1:before,
.flow-a:before,
.flow-a:after,
.flow-c:after {
	font-family: 'icomoon';
	content: "\e90b";
	color:var(--color-green);
	position: absolute;
}
.flow-j-1:after,
.flow-b:before,
.flow-b:after,
.flow-d:after {
	font-family: 'icomoon';
	content: "\e90b";
	color:var(--color-blue);
	position: absolute;
}
.flow-j-1:before,
.flow-a:before,
.flow-b:before {
	left:25%;
	transform: rotate(90deg);
}
.flow-j-1:after,
.flow-a:after,
.flow-b:after {
	right:25%;
	transform: rotate(90deg);
}
.flow-c:after,
.flow-d:after {
	left:50%;
	transform: translateX(-50%) rotate(90deg);
}
.flow-a,
.flow-c,
.flow-e {
	background-color:#d7eee0;
}
.flow-b,
.flow-d,
.flow-f {
	background-color:#d7e9f4;
}
.flow-a h4,
.flow-c h4,
.flow-e h4 {
	color:var(--color-green);
}
.flow-b h4,
.flow-d h4,
.flow-f h4 {
	color:var(--color-blue);
}
@media (width < 767px) {
	.flow-table {
		padding-bottom: 12vw;
	}
	.flow-table-1 {
		grid-template-columns: 8vw 1fr;
	}
	.flow-table-2 {
		grid-template-columns: 8vw 1fr 1fr;
	}
	.flow-table-4 {
		grid-template-columns: 8vw 1fr 1fr 1fr 1fr;
	}
	.flow-table div {
		padding:2vw 1vw;
	}
	.flow-table h3 {
		padding:2vw;
	}
	.flow-table div:before,
	.flow-table div:after {
		font-size:8vw;
		bottom:-10vw;
	}
}
@media (768px <= width) {
	.flow-table {
		padding-bottom: 80px;
	}
	.flow-table-1 {
		grid-template-columns: 160px 1fr;
	}
	.flow-table-2 {
		grid-template-columns: 160px 1fr 1fr;
	}
	.flow-table-4 {
		grid-template-columns: 160px 1fr 1fr 1fr 1fr;
	}
	.flow-table div {
		padding:20px 15px;
	}
	.flow-table h3 {
		padding:10px;
		justify-content: center;
	}
	.flow-table div:before,
	.flow-table div:after {
		font-size:40px;
		bottom:-60px;
	}
}
/*-----------------------------------------
timetable
------------------------------------------*/
.table-appeal hr.scroll {
	transform: rotate(-90deg);
	margin-top:0;
	margin-bottom:0;
	width:1vw;
}
.timetable table thead tr th,
.timetable table tbody tr td {
	text-align: center;
	line-height:150%;
	border-right:1px solid var(--color-white);
	border-bottom:1px solid var(--color-white);
}

.timetable table thead tr th:nth-child(1),
.timetable table tbody tr td:nth-child(1) {
	color:var(--color-white);
	background-color:var(--color-red);
	font-weight: 700;
}
.timetable table thead tr th:nth-child(1) span,
.timetable table tbody tr td:nth-child(1) span {
	color:var(--color-white);
}
.timetable table thead tr th:nth-child(2),
.timetable table tbody tr td:nth-child(2) {
	background-color:#dcd8ea;
}
.timetable table thead tr th:nth-child(3),
.timetable table tbody tr td:nth-child(3) {
	background-color:#fbe1cc;
}
.timetable table thead tr th:nth-child(4),
.timetable table tbody tr td:nth-child(4) {
	background-color:#f8cce4;
}
.timetable table thead tr th:nth-child(5),
.timetable table tbody tr td:nth-child(5) {
	background-color:#ccead8;
}
.timetable table thead tr th:nth-child(6),
.timetable table tbody tr td:nth-child(6) {
	background-color:#ccead8;
}
.timetable table tbody tr td[colspan] {
	background-color:#eeeeee;
}
@media (width < 767px) {
	.table-appeal {
		display:flex;
		align-items: center;
		justify-content: center;
		gap:5vw;
		margin-bottom:5vw;
	}
	.table-scroll {
		overflow-x: scroll;
	}
	.timetable table {
		width:calc(137vw + 5px);
	}
	.timetable table thead tr th,
	.timetable table tbody tr td {
		width:22vw;
		padding:1vw 2vw;
	}
	.timetable table thead tr th:nth-child(1),
	.timetable table tbody tr td:nth-child(1) {
		width:27vw;
		position: sticky;
		left:0;
	}
	.timetable table thead tr th:nth-child(1) span,
	.timetable table tbody tr td:nth-child(1) span {
		display:block;
		font-size:var(--font-sp-x-small);
	}
}
@media (768px <= width) {
	.table-appeal {
		display:none;
	}
	.timetable table {
		width:100%;
	}
	.timetable table thead tr th,
	.timetable table tbody tr td {
		padding:0.5em 1em;
	}
	.timetable table thead tr th:nth-child(1) span,
	.timetable table tbody tr td:nth-child(1) span {
		display:block;
		font-size:var(--font-pc-small);
	}
}