@charset "utf-8";
/* CSS Document */

section {
	padding-block: clamp(32px, min(6.667vw, 40.002px), 40px);
}

.settle_ito {
	margin-block: 1rem;
	.facility_name {
		color: var(--main-green);
		font-size: clamp(20px, 4.33334vw, 26px);
		line-height: 100%;
	}
	.address {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックMedium';
		line-height: 160%;
		margin-block: 1rem;
	}
}

.map_wrap {
	height: 280px;
}

.access_ttl {
	color: #FFF;
	font-size: clamp(16px, 3.33334vw, 20px);
	border-radius: 30px;
	padding: 6px 10px;
	line-height: 1;
	text-align: center;
	&.type_green {
		background: var(--main-green);
	}
	&.type_brown {
		background: var(--brown);
	}
}

.access_inner {
	margin-block: 32px 72px;
	.access_txt {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックMedium';
		line-height: 160%;
		margin-top: 1rem;
	}
	.access_img {
		display: flex;
		margin-top: 2rem;
	}
}

.public_transport {
	.access_img {
		max-width: 350px;
		width: 90%;
		margin: 0px auto;
	}
}

.access_caution {
	background: var(--pale-green);
	border-radius: 20px;
	padding: 1.5rem;
	display: grid;
	grid-template-columns: 52px auto;
	align-items: center;
	column-gap: 2rem;
	margin-block: 2rem;
	.access_caution_mark {
		display: flex;
	}
	.access_caution_txt {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '筑紫ARゴシックR';
		text-align: justify;
		line-height: 140%;
	}
}

.norikae_wrap {
	display: grid;
	row-gap: 1rem;
	dl {
		display: grid;
		row-gap: 5px;
		dt {
			font-size: clamp(15px, 3vw, 18px);
			font-family: '游ゴシックMedium';
		}
		dd {
			display: grid;
			grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
			gap: 10px;
		}
	}
}

.norikae_link_wrap {
	.norikae_link {
		color: var(--main-green);
		border: 2px solid var(--main-green);
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 3rem;
		padding: 3px 10px;
		position: relative;
		font-size: clamp(16px, 3.33334vw, 20px);
		border-radius: 8px;
		&::after {
			content: '';
			background: url("../images/common/icon_window.svg");
			background-repeat: no-repeat;
			background-size: contain;
			display: inline-block;
			width: 14px;
			height: 12px;
			top: 2px;
			position: relative;
		}
	}
	&.type_vertical {
		display: grid;
		row-gap: 10px;
		.norikae_link {
			justify-content: space-between;
			padding: 3px 20px;
		}
	}
}

.direction_ttl {
	font-size: clamp(16px, 3.33334vw, 20px);
	color: var(--brown);
	display: flex;
	align-items: center;
	column-gap: 10px;
	position: relative;
	&::before {
		content: '';
		background: url("../images/common/icon_rhombus.svg");
		background-repeat: no-repeat;
		background-size: contain;
		display: inline-block;
		width: 23px;
		height: 23px;
		top: 2px;
		position: relative;
	}
}

.direction_point_wrap {
	border-radius: 30px;
	padding: 16px 3rem;
	margin-block: 2rem;
	display: flex;
	align-items: center;
	column-gap: 2rem;
	position: relative;
	&::before {
		content: '';
		background-repeat: no-repeat !important;
		background-size: contain !important;
		display: inline-block;
		width: 55px;
		height: 55px;
		position: relative;
	}
	&.point_car::before {
		background: url("../images/access/icon_car.svg");
	}
	&.point_ito::before {
		background: url("../images/access/icon_home.svg");
	}
	.direction_point_inner{
		display: grid;
		row-gap: 6px;
		line-height: 1;
		.direction_point {
			font-size: clamp(16px, 3.33334vw, 20px);
			small {
				font-size: clamp(14px, 2.66667vw, 16px);
			}
		}
		.direction_note {
			font-family: '游ゴシックMedium';
		}
	}
}

.root_list {
	display: grid;
	row-gap: 2rem;
	max-width: 490px;
	width: 90%;
	margin-left: auto;
	position: relative;
	&::after {
		content: '';
		display: inline-block;
		width: 1px;
		height: 90%;
		top: 0px;
		left: 15px;
		position: absolute;
		z-index: -2;
	}
	li {
		display: flex;
		align-items: stretch;
		column-gap: 2rem;
		font-size: clamp(14px, 2.66667vw, 16px);
		position: relative;
		.root_num {
			width: 32px;
			height: 32px;
			position: relative;
			span {
				display: flex;
				justify-content: center;
				align-items: stretch;
				position: relative;
				width: 100%;
				height: 100%;
				&::after {
					content: '';
					display: inline-block;
					border-radius: 50px;
					width: 32px;
					height: 32px;
					top: 0px;
					left: 0px;
					position: absolute;
					z-index: -1;
				}
			}
		}
		.root_txt {
			font-family: '游ゴシックMedium';
			color: #333333;
			display: grid;
			align-items: center;
			.root_caution {
				display: flex;
				align-items: center;
				column-gap: 1rem;
				background: #FAF1E0;
				border-radius: 10px;
				padding: 8px 10px;
				font-size: 14px;
				position: relative;
				margin-top: 5px;
				&::before {
					content: '';
					background: url("../images/common/icon_caution_sankaku.svg");
					background-repeat: no-repeat;
					background-size: contain;
					display: inline-block;
					width: 20px;
					height: 18px;
					position: relative;
				}
			}
		}
	}
}

.root_hakata {
	.direction_point_wrap {
		background: var(--brown);
		color: #FFF;
	}
	.root_list {
		&::after {
			background: var(--brown);
		}
		.root_num {
			span {
				color: #FFF;
				&::after {
					background: var(--brown);
				}
			}
		}
	}
}

.root_saga {
	.direction_point_wrap {
		background: var(--pale-green);
		.direction_point {
			color: var(--brown);
		}
	}
	.root_list {
		&::after {
			background: var(--pale-green);
		}
		.root_num {
			span {
				color: var(--brown);
				&::after {
					background: var(--pale-green);
				}
			}
		}
	}
}

.to_gate {
	display: grid;
	row-gap: 10px;
	margin-block: 1rem 2rem;
	li {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックMedium';
		text-indent: -1em;
		margin-left: 1em;
	}
}

.to_gate_txt {
	font-size: clamp(15px, 3vw, 18px);
	font-family: '游ゴシックMedium';
	margin-bottom: 10px;
}

.img_box {
	margin-top: 2rem;
	.img_box_txt {
		font-size: clamp(15px, 3vw, 18px);
		font-family: '游ゴシックMedium';
		line-height: 160%;
		text-align: justify;
		margin-block: 10px;
	}
}

.campus_info {
	display: grid;
	row-gap: 1rem;
	margin-block: 2rem 1rem;
	dl {
		display: grid;
		grid-template-columns: 84px auto;
		align-items: center;
		gap: 1rem 2rem;
		background: var(--pale-green);
		border-radius: 12px;
		padding: 1rem;
		dd {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem 20px;
			.campus_name {
				font-size: clamp(16px, 3.33334vw, 20px);
			}
			.campus_box_list {
				display: grid;
				row-gap: 5px;
				li {
					font-size: clamp(14px, 2.66667vw, 16px);
					font-family: '游ゴシックMedium';
					color: #333;
					display: flex;
					align-items: center;
					column-gap: 5px;
					position: relative;
					&::before {
						content: '';
						background-repeat: no-repeat !important;
						background-size: contain !important;
						background-position: center !important;
						display: inline-block;
						width: 26px;
						height: 23px;
						position: relative;
					}
					&.point::before {
						background: url("../images/access/icon_point.svg");
						height: 26px;
						top: 1px;
					}
					&.train::before {
						background: url("../images/access/icon_train.svg");
					}
					&.clock::before {
						background: url("../images/access/icon_clock.svg");
					}
				}
			}
		}
	}
}

.access_caution {
	&.type_yellow {
		background: #FAF1E0;
		margin-block: 1rem;
	}
}

.map_img {
	display: flex;
	margin-block: 1rem;
}

.area_list_wrap {
	display: flex;
	flex-wrap: wrap;
	column-gap: 2rem;
	counter-reset: count 0;
	.area_list {
		li {
			display: flex;
			align-items: center;
			column-gap: 10px;
			position: relative;
			color: #6B5E40;
			font-size: 12px;
			font-family: 'A-OTF じゅん Pro 501';
			&::before {
				content: counter(count) '';
				counter-increment: count 1;
				color: #FFF;
				display: flex;
				justify-content: center;
				text-align: center;
				left: 2px;
				position: relative;
				width: 14px;
			}
			&::after {
				content: '';
				background: #6B5E40;
				border-radius: 50px;
				display: inline-block;
				width: 18px;
				height: 18px;
				left: 0px;
				top: -1px;
				position: absolute;
				z-index: -1;
			}
		}
	}
	&.kyudai_area {
		.right {
			counter-reset: count 6;
		}
	}
	&.hatae_area {
		.right {
			counter-reset: count 4;
		}
	}
}

/* 周辺施設の紹介文は全画面幅で16pxを下限にする */
body#access .area_list_wrap .area_list li,
body.access .area_list_wrap .area_list li {
	font-size: 16px;
	line-height: 1.5;
}

body#access .area_list_wrap .area_list li::before,
body.access .area_list_wrap .area_list li::before {
	width: 18px;
}

body#access .area_list_wrap .area_list li::after,
body.access .area_list_wrap .area_list li::after {
	width: 22px;
	height: 22px;
}

@media screen and (max-width: 599px) {
	.map_wrap {
		height: clamp(220px, 46.667vw, 280px);
	}

	.access_caution {
		grid-template-columns: clamp(36px, 8.667vw, 52px) minmax(0, 1fr);
		column-gap: clamp(12px, 3.333vw, 20px);
		padding: clamp(16px, 4vw, 24px);
	}

	.direction_point_wrap {
		padding: clamp(12px, 2.667vw, 16px) clamp(16px, 8vw, 48px);
		column-gap: clamp(12px, 3.333vw, 20px);
	}

	.root_list {
		width: 100%;
	}

	.root_list li {
		column-gap: clamp(12px, 3.333vw, 20px);
	}

	.campus_info dl {
		grid-template-columns: clamp(60px, 14vw, 84px) minmax(0, 1fr);
		gap: clamp(10px, 2.667vw, 16px);
	}
}