/* ---------------------------------------------------------------------- */
/* ポイント①～③ */
/* ---------------------------------------------------------------------- */

/* ベース */
.point {
	background-color: var(--bl-lt);
	padding: 40px 20px 70px 20px;
}

.point-frame {
	background-color: var(--wh);
	border: 2px solid var(--bl);
	border-radius: var(--r-lg);
	box-sizing: border-box;
	padding: 40px 20px;
}

/* 見出し */
.point-box h2 {
	margin-bottom: 8px;
}

.point-box h2 img {
	height: 32px;
	width: auto;
}

/* コンテンツ */
.point-content {
	border-bottom: 1px dashed var(--gy-dk);
	flex-direction: column;
	margin-bottom: 35px;
	padding-bottom: 35px;
}

.point-content:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* リスト */
.point-list {
	gap: 4px;
	margin-bottom: 16px;
}

.point-list li {
	font-size: 14px;
	line-height: 1.8;
	padding-left: 1em;
	position: relative;
}

.point-list li::before {
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	top: 0.5lh; /*50%;*/
	transform: translateY(-2px); /*translateY(-50%);*/
	width: 6px;
}

.point-list.nmb-1 li::before {
	background-color: var(--bl);
}

.point-list.nmb-2 li::before {
	background-color: var(--rd);
}

.point-list.nmb-3 li::before {
	background-color: var(--gd);
}

.point-list li a {
	text-decoration: underline;
}

.point-list li a.no-border {
	text-decoration: none;
}

.point-box a { transition: .3s; }
.point-box a:hover { color: var(--rd); transition: .3s; }

/* ボタン */
.contact-button {
	display: none;
}

@container (min-width: 769px) {

	/* ベース */
	.point {
		padding:70px 20px;
	}
	.point-frame {
		padding:40px;
		margin: auto;
		max-width: var(--content-w);
		width: 100%;
	}

	/* 見出し */
	.point-box h2 {
		margin-bottom: 24px;
	}

	.point-box h2 img {
		height: 100%;
		max-height: 50px;
	}

	/* コンテンツ */
	.point-content {
		flex-direction: row;
		gap: 30px;
		justify-content: space-between;
	}

	.point-box {
		width: calc( 100% - 480px );
	}

	.point-ph img {
		max-width: 450px;
		width: 100%;
	}

	/* リスト */
	.point-list {
		gap: 8px;
		margin-bottom: 0;
		padding: 0 30px;
	}

	.point-list li {
		font-size: 18px;
	}

	/* ボタン */
	.contact-button {
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}

	.contact-button .bl-button {
		font-size: 18px;
		margin: auto;
		max-width: 630px;
	}

}

/* ---------------------------------------------------------------------- */
/* アクセス */
/* ---------------------------------------------------------------------- */

/* ベース */
.access {
	padding: 40px 20px;
}

/* 見出し */
.access h2 {
	margin-bottom: 16px;
}

.access h3 {
	color: var(--bl);
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 16px;
}

/* Googlemap */
.google-map {
	border-radius: var(--r-md);
	box-shadow: var(--sh-s);
	margin-bottom: 16px;
	overflow: hidden;
}

.google-map iframe {
	aspect-ratio: 295/221;
	height: 100%;
	max-width: 100%;
	width: 100%;
}

/* 住所・電話番号 */
.access address {
	margin-bottom: 4px;
}

.access address,
.access .tel,
.access .fax {
	color: var(--bl);
	font-size: 14px;
	font-weight: 500;
	line-height: 150%;
}

/* 技術研修センターまでの経路 */
.route {
	background-color: var(--pk);
	border-radius: var(--r-md);
	margin: 8px auto;
	padding: 10px;
}

.route h3 {
	align-content: baseline;
	gap: 8px;
	margin-bottom: 8px;
}

.route h3 img {
	height: 20px;
	width: 20px;
}

.route p,
.route h3 {
	color: var(--bk);
	font-size: 14px;
	font-weight: 500;
	line-height: 150%;
}

/* リスト */
.access ul li {
	color: var(--bl);
}

@container (min-width: 769px) {

	/* ベース */
	.access {
		margin: auto;
		max-width: var(--content-w);
		padding: 70px 0;
		width: 100%;
	}

	/* 見出し */
	.access h3 {
		font-size: 20px;
		padding-left: 40px;
	}

	.route h3 {
		font-size: 18px;
		padding-left: 0;
	}

	/* 住所・電話番号 */
	.access .fax {
		margin-bottom: 23px;
	}

	.access address,
	.access .tel,
	.access .fax {
		font-size: 18px;
		line-height: 150%;
	}

	/* レイアウト */
	.layout {
		display: flex;
		gap: 50px;
		justify-content: flex-start;
		padding: 0 40px;
	}

	/* Googlemap */
	.google-map {
		max-width: 400px;
		width: 100%;
	}

	.google-map iframe {
		aspect-ratio: 4/3;
		height: 100%;
		max-width: 400px;
		width: 100%;
	}

}