div.all_block
{
	background-size: 150px 136px, 150px 136px;
}

div.logo
{
	padding: 5% 0% 0% 0%;
}

/* バーの基礎 */
.progress-container
{
	height: 18px;
	border: 2px solid #ffffff;
}

.progress-dot
{
	width: 30px;
	height: 28px;
}

/* バーの進捗 */
.progress-bar-text
{
	font-size: 12px;
	box-shadow: 0 0 0 2px #ffffff;
}

/* 白い縁線用の三角形（背景側） */
.progress-bar-text::before
{
	bottom: -25px;  /* 吹き出しの下に配置 */
}

/* 紫色の三角形（前面） */
.progress-bar-text::after
{
	bottom: -20px;
}

.genre-result
{
	width: 90%;
	padding: 3% 0% 0% 0%;
	font-size: 12pt;
	line-height: 170%;
}

span.genre-result-text
{
	font-size: 14pt;
}

.arrow-down
{
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 10px solid #1b0e06; /* ▼ の色 */
	margin: 10px auto 0px auto; /* 中央寄せ */
}

div.genre-recommend-area
{
	padding: 3% 0% 0% 0%;
}

.genre-recommend-link
{
	padding: 14px 10px;
	font-size: 10pt;
}


.genre-question-bubble
{
	font-size: 14px;
	transform: translateX(120%); /* 表示位置 */
	box-shadow: 0 0 0 2px #ffffff;
}

span.genre-question-bubble-result
{
	font-size: 10pt;
}

div.genre-question-area
{
	width: 100%;
	margin: 10% auto 0% auto;
}

div.question_text
{
	width: 86%;
	padding: 20px 0px 12px 0px;
	font-size: min(14pt, 8vw); /* 最大13pt、スマホでは縮小 */
}

div.question_choices
{
	padding: 0% 0% 0% 0%;
}

/* 回答ボタン */
.genre-answer-button
{
	width: 70px;
	height: 70px;
}

div.genre-reset-button-area
{
	width: 100%;
}

.genre-reset-button
{
	padding: 10px 20px 10px 20px;
	font-size: 14px;
}