* {
	text-align: center;
	font-family: Noto Sans Japanese, Roboto, sans-serif;
	color: #2f2016;
	line-height: 1.8;
}
body {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #f5f0eb;
}
main {
    position: absolute;
	width: min(90vw,450px);
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin-bottom: 0;
}
section {
	padding: 1em;
	background-color: #fff;
	border: 2px solid #703117;
	border-radius: 12px;
}
div,
button {
	margin: 0 auto;
	margin-bottom: 5%;
	width: calc(100% - 18px);
}
div button:last-child {
	margin-bottom: 0;
}
h3,
.h3 {
	color: #703117;
	font-size: min(6vw, 28px);
	font-weight: bold;
	margin: 5% 0;
	margin-top: 2%;
}
h3 {
	position: relative;
	padding: 0.5em 1em;
	border-top: solid 2px #703117;
	border-bottom: solid 2px #703117;
}
h3:before,
h3:after {
	content: '';
	position: absolute;
	top: -9px;
	width: 2px;
	height: -webkit-calc(100% + 18px);
	height: calc(100% + 18px);
	background-color: #703117;
}
h3:before {
	left: 9px;
}
h3:after {
	right: 9px;
}
div,
span,
button {
	font-size: min(4vw, 18px);
}
button {
	color: white;
	background-color: #C1936B;
	padding: 0.75em 0.25em;
	border: none;
	border-radius: 12px;
}
#color_box {
	position: relative;
	margin: 1.5em auto;
	width: calc(100% - 18px);
	padding-top: 80%;
	border-radius: 12px;
}
#award_frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	margin-bottom: 0;
}
#award {
	margin-right: 1%;
	line-height: 0.75;
}
#award_sub {
	font-size: min(6vw, 28px);
	font-weight: bold;
	color: #fff;
}
#time_block span {
	color: #fff;
	font-weight: bold;
}
#time {
	font-size: min(6vw, 28px);
}
#attribute_box {
	width: calc(100% - 40px);
	background-color: #e6ded3;
	box-shadow: 0px 0px 0px 7px #e6ded3;
	border: dashed 1px #fff;
	padding: 3% 0.25em;
	margin-bottom: 5%;
}
#time_block {
	width: calc(100% - 24px);
	margin: 7.5% auto;
	margin-top: 2%;
	position: relative;
	height: 48px;
	color: #fff;
	background-color: #9B1119;
}
#time_block:before,
#time_block:after {
	position: absolute;
	top: 0;
	display: block;
	content: '';
	border: 24px solid #9B1119;
}
#time_block:before {
	left: -12px;
	border-left-width: 12px;
	border-left-color: transparent;
}
#time_block:after {
	right: -12px;
	border-right-width: 12px;
	border-right-color: transparent;
}
#time_block_in {
	position: relative;
}
.h1 {
	font-size: min(40vw, 200px);
	font-weight: bold;
	color: #fff;
}
.choices_block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#start_button,
.pre_button,
.answer_button {
	flex-basis: 100%;
	font-weight: bold;
	box-shadow: 0 5px 0 #6f5a4a;
}
#start_button:active,
.pre_button:active,
.answer_button:active {
	box-shadow: none;
	transform: translateY(5px);
}
.q_text {
	color: #703117;
	font-weight: bold;
	font-size: min(5vw, 22px);
}
.blue_text {
	color: #023D84;
	font-weight: bold;
	margin-top: 3%;
}
.red_text {
	color: #9B1119;
}
#pettype,
#lifestage {
	background: linear-gradient(transparent 70%, #F1CF74 70%);
}