@charset "utf-8";

/* ============================================================== reset */
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}


/* ============================================================== page */
body {
    font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(16px, 3vw, 24px);
	background-color: #00b3c9;
	background-color: #1e1e1e;
	background-color: #2a0000;
	background-color: #0d1a2d;

	color: #fff;
	display: grid;
	grid-template-rows: 1fr auto;
	text-align: center;
	height: 100vh;
	height: 100dvh;
}
main {
	display: grid;
	align-items: center;
	align-content: center;
}
h1 {
	font-family: 'Cormorant Infant', serif;
	font-family: 'Roboto Mono', sans-serif;
	font-weight: 300;
	font-size: 100%;
	letter-spacing: 0.5em;
	margin: 0 auto 2em;
	width: 8em;
	max-width: 320px
}
.catch {
	font-weight: 300;
	letter-spacing: 0.1em;
}
footer {
	padding: 2em 0 1em;
	border-top: 0 none;
}
footer p {
	font-size: 80%;
	font-weight: 300;
	letter-spacing: 0.08em;
}