@charset "utf-8";

.important-information {
	width: 90%;
	margin: 30px auto 0;
padding-top: calc(70 / 390 * 100vw);
	@media (min-width: 1200px) {
		max-width: 800px;
		margin: 200px auto 0;
		padding-top: 0;
	}
}

.important-information h2 {
	font-size: 16px;
	background-color: var(--text-green);
	color: #fff;
	text-align: center;
	padding: 10px 5px;
	font-weight: 500;
	margin-bottom: 30px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;

	@media (min-width: 1200px) {
		font-size: 20px;
		width: 100%;
		margin-top: 100px;
		padding: 10px;
		margin-bottom: 50px;

		margin-top: 50px;
	}
}

.important-information {
	line-height: 36px;
}

.important-information p {
	font-size: 16px;

	@media (min-width: 1200px) {
		font-size: 18px;
	}
}

.important-information ul {
	list-style: none;
	/* デフォルトの黒丸を消す */
	padding: 0;
	margin: 0;
}

.important-information ul li {
	display: flex;
	align-items: flex-start;
	/* マーカーとテキストを上揃え */
	margin-bottom: .5em;
}

.important-information ul li::before {
	content: "・";
	/* マーカーを自作 */
	margin-right: 0.5em;
	width: 0.5em;
	/* マーカー分の幅を固定 */
	flex-shrink: 0;
	color: var(--text-green);
	font-weight: 500;
	line-height: 30px;

	@media (min-width: 1200px) {
		line-height: 36px;
	}
}

.important-information ol {
	list-style: none;
	/* デフォルト番号を消す */
	padding: 0;
	margin: 0;
	counter-reset: num;
}

/* ol 自体は block のまま！ */
.important-information ol li {
	display: flex;
	/* ← li の中だけ flex */
	align-items: flex-start;
	/* 番号とテキストを上揃え */
	counter-increment: num;
	margin-bottom: .5em;
}

/* 番号部分を自作 */
.important-information ol li::before {
	content: counter(num) ".";
	margin-right: 0.5em;
	flex-shrink: 0;
	width: 0.3em;
	color: var(--text-green);
	font-weight: 500;
	line-height: 30px;

	@media (min-width: 1200px) {
		line-height: 36px;
	}
}

.important-information li p {
	display: inline-block;
	font-weight: 500;
	line-height: 30px;

	@media (min-width: 1200px) {
		line-height: 36px;
	}

}

.important-information-caution {
	font-size: 16px;
	margin: 15px 0 25px;
	@media (min-width: 1200px) {
		margin: 15px 0 35px;
	}
}

.important-information .important-information-guidance {
	text-align: center;
	font-size:18px;
	font-weight: 500;
	border-top: 2px solid var(--text-green);
	border-bottom: 2px solid var(--text-green);
	padding: 20px 0;
		@media (min-width: 1200px) {
	font-size: 20px;
	}
}

.important-information-button {
	text-align: center;
}

.important-information-button a {
	width: 90%;
	display: inline-block;
	max-width: 600px;
	margin: 50px auto;

	@media (min-width: 1200px) {
		width: 80%;
	}
}

.important-information-message {
	background-color: #d1e5de;
width: 100%;
	max-width: 800px;
margin: 0 auto;
padding: 10px;
@media (min-width: 1200px) {
		padding: 20px;
			width: 90%;
	}
}