@font-face {
	font-family: 'bttf';
	src: url('./font/BTTF.ttf') format('truetype');
}

@font-face {
	font-family: 'mega';
	src: url('./font/Mega-Regular.ttf') format('truetype');
}

body
{
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin: 0;
	padding: 0;
}
h1
{
	width: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,1) 71%, rgba(0,81,111,1) 100%);
}
h1 img
{
	height: 120px
}
main
{
	padding: 10px 25px 100px;
}

div.setting
{
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}



div.setting
{
	max-width: 550px;
	border: 1px solid #000;
	padding: 10px;
	overflow: hidden;
	float: left;
	margin-bottom: 2rem;
	margin-right: 1rem;
}
div.setting label
{
	margin-right: 2rem;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
	float: left;
}
div.setting label span
{
	display: block;
}
div.setting label span.ref
{
	display: inline;
	font-family: 'bttf';
	text-transform: lowercase;
}

hr.clear
{
	clear: both;
}

h2
{
	margin: 0;
}
table.text-changes
{
	border-collapse:  collapse;
	margin-bottom: 2rem;
}
table th
table th
{
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
table td
{
	font-family: 'mega', 'bttf';
	border: solid 1px;
	padding: 10px 4px 4px 10px;
	font-size: 260%;
}
table td small
{
	color: #990000;
	font-size: 12px;
}
div.preview
{
	clear: both;
}
canvas
{
	font-family: 'bttf';
	box-shadow: 1px 1px 3px #000;
}

button
{
	display: block;
	margin-top: 1rem;
	appearance: button;
	background-color: #1899D6;
	border: solid transparent;
	border-radius: 16px;
	border-width: 0 0 4px;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	font-family: 'bttf';
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .8px;
	line-height: 20px;
	outline: none;
	overflow: visible;
	padding: 13px 16px;
	text-align: center;
	text-transform: uppercase;
	touch-action: manipulation;
	transform: translateZ(0);
	transition: filter .2s;
	user-select: none;
	-webkit-user-select: none;
	vertical-align: middle;
	white-space: nowrap;
	cursor: pointer;
}
button:after
{
	background-clip: padding-box;
	background-color: #1CB0F6;
	border: solid transparent;
	border-radius: 16px;
	border-width: 0 0 4px;
	bottom: -4px;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	cursor: pointer;
}