@charset "utf-8"; 
html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	/-moz-appearance
}

body {
	font-size:95%;
	font-family:'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

* {
	padding: 0px;
	margin: 0px;
}

	*, 
	*:before, *:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
	}

.mainarea {
	position: relative;
	width: 80vw;
	top: 6rem;
	margin: 0 auto;
	padding-top: 2rem;
}

.roaster {
	width: 90%;
	left: 0;
	right: 0;
	margin: 0 auto;
	height: auto;
	font-size: clamp(1.4rem, 2.5vw, 2.4rem);
    text-align: left;
	padding-bottom: 10rem;	
}
.intro {
	position: relative;
}
.caption {
text-align: center;
	padding-top: 1.4rem;
	letter-spacing: 0.1px;
}
	
#sample-roaster {
	position: relative;	
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: left;
	width: calc( 100% / 3);
	height: auto;
}
#jabez-burns {
	position: relative;	
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	width: calc( 100% / 4);
	height: auto;
}

#figure-scale {
	display: block;
	left: 0;
	right: 0;
    width: 100%;
}

#figure-uspt {
	position: relative;
	text-align: right;
	padding-left: calc( 100% /  12.5);
	padding-right: calc( 100% / 12.5);	
	width: calc( 100% / 2.04);
	height: auto;
}

#figure {
	position: relative;
	text-align: right;
	padding-left: calc( 100% /  10);
	padding-right: calc( 100% / 10);	
	width: calc( 100% / 2.04);
	height: auto;
}

footer .logo {
	position: relative;
	display: block;
	margin: 60vw 40vw 0vw auto;	
}

footer small {
	position: relative;
	display: block;
	text-align: center;
	color: gray;
	font-size: 1.2rem;
	margin-bottom: 1vw;
	}