@charset "UTF-8";

.guideNav {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.nav {
		position: relative;
		width: calc((100% - 10px) / 2);
		border-bottom: 1px solid var(--color-border-1);
		&:nth-of-type(even) {
			margin-left: 10px;
		}
		a {
			display: block;
			font-weight: 400;
			padding: 10px 0;
		}
		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			right: 0;
			width: 6px;
			height: 6px;
			border: 0px;
			border-top: solid 1px var(--color-text);
			border-right: solid 1px var(--color-text);
			transform: rotate(135deg);
			z-index: 1;
		}
		&:before {
			content: "";
			display: block;
			position: absolute;
			width: 0;
			height: 1px;
			background: var(--color-primary);
			left: 0;
			right: 0;
			bottom: 0;
			transition-duration: 0.4s;
			opacity: 0;
			margin: auto;
		}
		&:hover {
			&:before {
				opacity: 1;
				width: 100%;
			}
		}
	}
    @media (min-width: 1000px) {
        padding-bottom: 20px;
        width: 100%;
		max-width: var(--container-max-width);
		.nav {
			width: calc((100% - 60px) / 4);
			border-bottom: 1px solid var(--color-border-1);
			&:nth-of-type(even),
			&+.nav {
				margin-left: 20px;
			}
			&:nth-of-type(5n) {
				margin-left: 0;
			}
			a {
				display: block;
				padding: 20px 0;
			}
		}
    }
}

#guideTable {
	.table {
		width: 800px;
		border-spacing: 0px;
		border-collapse: collapse;
		border: 1px solid var(--color-border-2);
		margin: 20px 0;
		tr {
			&:first-of-type {
				.table_th {
					background-color: var(--color-primary);
					color: #fff;
					&:first-of-type,
					&:nth-of-type(3) {
						width: 80px;
					}
					&:nth-of-type(2) {
						border-left: none;
						width: 430px;
					}
				}
			}
		}
		.table_th,
		.table_td {
			text-align: left;
			vertical-align: middle;
			line-height: 1.8;
			border-top: 1px solid var(--color-border-2);
			border-left: 1px solid var(--color-border-2);
			padding: 12px 15px;
		}
		.table_th {
			font-weight: 500;
		}
		dl {
			display: block;
			border: none;
			&+dl {
				padding-top: 30px;
			}
			dt,
			dd {
				line-height: 1.8;
			}
			dt {
				width: 100%;
				padding-bottom: 10px;
			}
			dd {
				width: 100%;
			}
		}
	}
	@media (min-width: 1000px) {
		.table {
			width: 100%;
			tr {
				&:first-of-type {
					.table_th {
						&:first-of-type,
						&:nth-of-type(3) {
							width: 100px;
						}
						&:nth-of-type(2) {
							width: 490px;
						}
					}
				}
			}
			.table_td {
				&:last-of-type {
					vertical-align: top;
				}
			}
		}
	}
}
.contentBox {
	ul {
		li {
			text-indent: -1em;
			padding-left: 1em;
			&+li {
				margin-top: .5em;
			}
		}
	}
}