@charset "UTF-8";

@media screen and (max-width: 800px) {
	.header .header_inner {
		display: none;
	}
	.main {
		padding-top: 0;
	}
}

/* campaign-section-wrap */
.campaign-section-wrap {
	width: 100%;
	background-color: #fff;
}

@media screen and (max-width: 800px) {
	.campaign-section-wrap {
		min-width: auto;
	}
}

.campaign-section-wrap .campaign-section-inner {
	width: 980px;
	margin: 0 auto;
	box-sizing: border-box;
}

@media screen and (max-width: 800px) {
	.campaign-section-wrap .campaign-section-inner {
		width: 100%;
		padding: 0 10px;
	}
}

/* section-question */
.section-question {
	margin-bottom: 70px;
}

@media screen and (max-width: 800px) {
	.section-question {
		margin-bottom: 40px;
	}
}

.section-question .title-wrap {
	position: relative;
	margin-bottom: 60px;
	padding-top: 50px;
	color: #000;
	text-align: center;
}

@media screen and (max-width: 800px) {
	.section-question .title-wrap {
		padding-top: 30px;
	}
}

.section-question .title-wrap::before {
	position: absolute;
	top: 0;
	left: 120px;
	width: 181px;
	height: 215px;
	background: url(/campaign/rurubu50th/quiz/img/bg_title.png) no-repeat;
	background-size: contain;
	content: '';
}

@media screen and (max-width: 800px) {
	.section-question .title-wrap::before {
		top: 20px;
		left: 0;
		width: 85px;
		height: 98px;
	}
}

.section-question .title-wrap .sub-title {
	position: relative;
	margin-bottom: 10px;
	font-size: 20px;
	font-weight: 900;
}

@media screen and (max-width: 800px) {
	.section-question .title-wrap .sub-title {
		font-size: 13px;
	}
}

.section-question .title-wrap h2 {
	position: relative;
	margin-bottom: 20px;
	font-size: 52px;
	font-weight: 900;
}

@media screen and (max-width: 800px) {
	.section-question .title-wrap h2 {
		font-size: 30px;
	}
}

.section-question .title-wrap .catch {
	position: relative;
	color: #101010;
	font-size: 18px;
}

@media screen and (max-width: 800px) {
	.section-question .title-wrap .catch {
		font-size: 13px;
	}
}

.section-question .question-list-wrap li {
	position: relative;
	margin-bottom: 60px;
	padding: 60px 120px;
	background: url(/campaign/rurubu50th/quiz/img/bg_question.png) no-repeat center center #f1ffdb;
}

@media screen and (max-width: 800px) {
	.section-question .question-list-wrap li {
		padding: 60px 20px;
	}
}

.section-question .question-list-wrap li:last-of-type {
	margin-bottom: 0;
}
.section-question .question-list-wrap li::before,
.section-question .question-list-wrap li::after {
	position: absolute;
	width: 0;
	height: 0;
	border-right: 50px solid transparent;
	border-bottom: 50px solid #000;
	border-left: 50px solid transparent;
	content: '';
}

@media screen and (max-width: 800px) {
	.section-question .question-list-wrap li::before,
	.section-question .question-list-wrap li::after {
		border-right: 25px solid transparent;
		border-bottom: 25px solid #000;
		border-left: 25px solid transparent;
	}
}

.section-question .question-list-wrap li::before {
	top: -6px;
	left: -32px;
	transform: rotate(-45deg);
}

@media screen and (max-width: 800px) {
	.section-question .question-list-wrap li::before {
		top: -3px;
		left: -16px;
	}
}

.section-question .question-list-wrap li::after {
	right: -32px;
	bottom: -6px;
	transform: rotate(135deg);
}

@media screen and (max-width: 800px) {
	.section-question .question-list-wrap li::after {
		right: -16px;
		bottom: -3px;
	}
}

.section-question .question-list-wrap .question-num {
	position: absolute;
	top: -25px;
	left: 50%;
	width: 168px;
	padding: 10px 0;
	border: 3px solid #000;
	border-radius: 45px;
	transform: translateX(-50%);
	font-size: 24px;
	font-weight: 900;
	text-align: center;
}

@media screen and (max-width: 800px) {
	.section-question .question-list-wrap .question-num {
		width: 146px;
		padding: 7px 0;
		font-size: 21px;
	}
}

.section-question .question-list-wrap .question-num::before {
	position: absolute;
	top: 100%;
	left: 50px;
	width: 15px;
	height: 15px;
	border-left: 4px solid #000;
	background-color: #f1ffdb;
	transform: skew(45deg);
	content: '';
}
.section-question .question-list-wrap .question-text {
	margin-bottom: 40px;
	color: #141414;
	font-size: 20px;
	line-height: 1.4;
}

@media screen and (max-width: 800px) {
	.section-question .question-list-wrap .question-text {
		margin-bottom: 20px;
		font-size: 18px;
		line-height: 1.4;
	}
}

.section-question .question-list-wrap .radio-wrap {
	padding: 40px 10px;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}

@media screen and (max-width: 800px) {
	.section-question .question-list-wrap .radio-wrap {
		padding: 20px 10px;
	}
}

.section-question .question-list-wrap .radio-item {
	margin-bottom: 30px;
}

@media screen and (max-width: 800px) {
	.section-question .question-list-wrap .radio-item {
		margin-bottom: 20px;
	}
}

.section-question .question-list-wrap .radio-item:last-of-type {
	margin-bottom: 0;
}
.section-question .question-list-wrap .radio-item input[type='radio'] {
	position: absolute;
	opacity: 0;
}
.section-question .question-list-wrap .radio-item input[type='radio']:checked + .radio-label::before {
	box-shadow: inset 0 0 0 2px #fff;
	background-color: #000;
}
.section-question .question-list-wrap .radio-item .radio-label {
	padding-left: 20px;
	font-size: 20px;
	line-height: 1.4;
	cursor: pointer;
}

@media screen and (max-width: 800px) {
	.section-question .question-list-wrap .radio-item .radio-label {
		display: inline-block;
		padding-left: 40px;
		font-size: 18px;
		text-indent: -20px;
	}
}

.section-question .question-list-wrap .radio-item .radio-label::before {
	display: inline-block;
	position: relative;
	top: 3px;
	left: -10px;
	width: 15px;
	height: 15px;
	border: 2px solid #000;
	border-radius: 100%;
	background: #fff;
	transition: all .2s ease;
	text-align: center;
	content: '';
	cursor: pointer;
}

/* section-btn */
.section-btn {
	margin-bottom: 110px;
}

@media screen and (max-width: 800px) {
	.section-btn {
		margin-bottom: 40px;
	}
}

.section-btn .answer-btn-wrap {
	text-align: center;
}
.section-btn .answer-btn-wrap .answer-btn {
	padding: 10px 110px;
	border: 4px solid #000;
	border-radius: 40px;
	background-color: #e60012;
	transition: all .2s ease;
	color: #fff;
	font-size: 32px;
	font-weight: 900;
	cursor: pointer;
}

@media screen and (max-width: 800px) {
	.section-btn .answer-btn-wrap .answer-btn {
		width: 290px;
		padding: 10px;
		font-size: 24px;
	}
}

.section-btn .answer-btn-wrap .answer-btn:hover {
	background-color: #fff;
	color: #000;
	text-decoration: none;
}

@media screen and (max-width: 800px) {
	.section-btn .answer-btn-wrap .answer-btn:hover {
		background-color: #e60012;
		color: #fff;
	}
}

.section-btn .answer-btn-wrap .answer-btn.is-disabled {
	border: 4px solid #999;
	background-color: #f2f2f2;
	color: #999;
	cursor: wait;
}
.section-btn .answer-btn-wrap .answer-btn.is-disabled:hover {
	background-color: #f2f2f2;
	color: #999;
}

/* section-answer */
.section-answer {
	display: none;
	margin-bottom: 80px;
}
.section-answer.result {
	display: block;
	animation: fadeInUp 1.5s forwards;
}
.section-answer .answer-title-wrap {
	position: relative;
	width: 958px;
	height: 354px;
	margin: 0 auto 80px;
	text-align: center;
}

@media screen and (max-width: 800px) {
	.section-answer .answer-title-wrap {
		width: 100%;
		height: 100%;
		margin: 0 auto 80px;
	}
}

.section-answer .answer-title-wrap .result-text {
	position: absolute;
	top: 130px;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 40px;
	font-weight: 700;
}

@media screen and (max-width: 800px) {
	.section-answer .answer-title-wrap .result-text {
		top: 30%;
		left: 50%;
		font-size: 30px;
	}
}

@media screen and (min-width: 801px) {
	.section-answer .answer-title-wrap .result-img.pc_only {
		width: 602px;
		height: 222px;
	}
	.section-answer .answer-title-wrap .result-img.sp_only {
		display: none;
	}
}

@media screen and (max-width: 800px) {
	.section-answer .answer-title-wrap .result-img.pc_only {
		display: none;
	}
	.section-answer .answer-title-wrap .result-img.sp_only img {
		width: 100%;
	}
}

.section-answer .answer-list-wrap li {
	position: relative;
	margin-bottom: 60px;
	padding: 60px 120px;
}

@media screen and (max-width: 800px) {
	.section-answer .answer-list-wrap li {
		padding: 100px 20px 30px;
	}
}

.section-answer .answer-list-wrap li:last-of-type {
	margin-bottom: 0;
}
.section-answer .answer-list-wrap li.correct {
	background-color: #fff1db;
}
.section-answer .answer-list-wrap li.incorrect {
	background-color: #ededed;
}
.section-answer .answer-list-wrap li.correct::before {
	position: absolute;
	top: -20px;
	left: 10px;
	width: 282px;
	height: 190px;
	background: url(/campaign/rurubu50th/quiz/img/icon_correct.png) no-repeat;
	background-size: contain;
	content: '';
}

@media screen and (max-width: 800px) {
	.section-answer .answer-list-wrap li.correct::before {
		top: 20px;
		left: 30px;
		width: 141px;
		height: 95px;
	}
}

.section-answer .answer-list-wrap li.incorrect::before {
	position: absolute;
	top: -10px;
	left: 10px;
	width: 268px;
	height: 150px;
	background: url(/campaign/rurubu50th/quiz/img/icon_incorrect.png) no-repeat;
	background-size: contain;
	content: '';
}

@media screen and (max-width: 800px) {
	.section-answer .answer-list-wrap li.incorrect::before {
		top: 30px;
		left: 30px;
		width: 134px;
		height: 75px;
	}
}

.section-answer .answer-list-wrap li.correct::after {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 148px;
	height: 148px;
	background: url(/campaign/rurubu50th/quiz/img/bg_correct.png) no-repeat;
	background-size: contain;
	content: '';
}

@media screen and (max-width: 800px) {
	.section-answer .answer-list-wrap li.correct::after {
		top: 30px;
		right: 30px;
		width: 74px;
		height: 74px;
	}
}

.section-answer .answer-list-wrap li.incorrect::after {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 148px;
	height: 148px;
	background: url(/campaign/rurubu50th/quiz/img/bg_incorrect.png) no-repeat;
	background-size: contain;
	content: '';
}

@media screen and (max-width: 800px) {
	.section-answer .answer-list-wrap li.incorrect::after {
		top: 30px;
		right: 30px;
		width: 74px;
		height: 74px;
	}
}

.section-answer .answer-list-wrap .answer-num {
	position: absolute;
	top: -25px;
	left: 50%;
	width: 168px;
	padding: 10px 0;
	border: 3px solid #000;
	border-radius: 45px;
	transform: translateX(-50%);
	font-size: 24px;
	font-weight: 900;
	text-align: center;
}

@media screen and (max-width: 800px) {
	.section-answer .answer-list-wrap .answer-num {
		width: 146px;
		padding: 7px 0;
		font-size: 21px;
	}
}

.section-answer .answer-list-wrap .answer-num::before {
	position: absolute;
	top: 100%;
	left: 50px;
	width: 15px;
	height: 15px;
	border-left: 4px solid #000;
	transform: skew(45deg);
	content: '';
}
.section-answer .answer-list-wrap li.correct .answer-num::before {
	background-color: #fff1db;
}
.section-answer .answer-list-wrap li.incorrect .answer-num::before {
	background-color: #ededed;
}
.section-answer .answer-list-wrap .answer-title {
	margin-bottom: 10px;
	color: #141414;
	font-size: 24px;
	text-align: center;
}
.section-answer .answer-list-wrap .answer {
	margin-bottom: 20px;
	color: #e60012;
	font-size: 24px;
	font-weight: 900;
	text-align: center;
}
.section-answer .answer-list-wrap .answer-wrap {
	padding: 40px 0;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}

@media screen and (max-width: 800px) {
	.section-answer .answer-list-wrap .answer-wrap {
		padding: 20px 0;
	}
}

.section-answer .answer-list-wrap .answer-text {
	color: #141414;
	font-size: 20px;
	line-height: 1.4;
	word-break: break-all;
}

@media screen and (max-width: 800px) {
	.section-answer .answer-list-wrap .answer-text {
		font-size: 18px;
	}
}

.section-answer .answer-list-wrap .answer-img {
	margin-top: 20px;
	text-align: center;
}
.section-answer .answer-list-wrap .answer-img img {
	width: 100%;
	max-width: 600px;
}
.section-answer .answer-list-wrap .answer4 .answer-img img {
	max-width: 166px;
}