@charset "utf-8";

@media screen and (max-width : 750px ){/* 750px以下*/
	body {
		background-color: #00B4E1;
	}
	#header {
		width: 100%;
	}
	main {
		grid-template-columns: repeat(1, 1fr);
	}
	main #hero {
		height: 100svh;
	}
	main #hero article {
		width: 100%;
	}
	#contents {
		background-color: rgba(243,252,255,.9);
	}
}
@media screen and (max-width : 450px ){/* 450px以下*/
	body {
		font-size: var(--font-size-r);
		line-height: var(--line-height-r);
	}
	#header {
		top: 30px;
	}
	#header h1,
	#header .navi {
		font-size: var(--font-size-s);
	}
	#header .container {
		display: block;
		text-align: center;
	}
	#header h1 {
		margin-bottom: 1.5em;
	}
	#contents ul li.example {
		font-size: var(--font-size-s);
		line-height: var(--line-height-s);
	}
}