/* 2023.07.05 */
:root {
	--bground: #f3e9dc;
	--bground-alt: #f3e9dcdd;
	--fground: #5e3023;
	--fground-alt: #5e3023dd;
	--brand: #c08552;
	--brand-alt: #c08552dd;
}

*, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; outline : none; }
html { font-size: 62.5%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0 auto; background: var(--bground); color: var(--fground); font-family: "Noto Sans", sans-serif; font-size: 1.8rem; font-weight: 400; line-height: 1.2; }
a { color: var(--highlight); text-decoration: none; transition: all 0.5s ease; }
a:link, a:visited { opacity: .9; }
a:active, a:hover, a:focus { opacity: 1; }
ul { list-style: none; }
.wrap { width: 100%; max-width: 32rem; margin: 0 auto; }
header { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
h1 { text-align: center; height: 100%; width: 100%; max-width: 80rem; }
h1 span { font-size: 0; }
h2 { text-align: center; font-size: 3.2rem; }
h3 { text-align: left; font-size: 2.2rem; line-height: 1.2; }
main { position: relative; z-index: 2; margin-top: 60vh; padding: 0 5vw 3.2rem; background: var(--brand-alt); color: var(--fground); }
    section { width: 100%; max-width: 80rem; margin: 0 auto 3.2rem; line-height: 1.6; }
	#main > div { min-height: 40vh; padding: 3.2rem 0; display: flex; flex-direction: column; justify-content: center; }
	main ul { list-style: none; display: flex; flex-direction: column; gap: 1.6rem; }
    main li { display: flex; flex-direction: column; align-items: flex-start; background: var(--bground-alt); }
	main li img { flex: none; height: 16rem; width: 100%; padding: 1.6rem; object-fit: contain; background: var(--bground); }
    main li div { flex: 1; width: 100%; padding: 1.6rem; }
	main li div p { display: flex; flex-direction: column; text-align: right; font-weight: bold; }
	main li div p strong { display: block; }
    h3 { font-weight: bold; }
	h3 b { display: block; }

footer { padding: 2.4rem 0; text-align: center; position: relative; z-index: 3; color: var(--bground); background: var(--fground);}
footer div { width: 100%; max-width: 80rem; margin: 0 auto;}

@media only screen and (min-width: 640px) {
	#main li { flex-direction: row; align-items: center; }
	#main li img { width: 16rem; height: auto; }
}