@charset "utf-8";
@import url(/campaign/css/campaign-detail.css);

/* ========== hover ========== */
@media only screen and (min-width: 640px) {
	.blk-3col-item a img:hover,
	.btn-hover:hover {
        opacity: .7;
	}
}

/* ========== bg ========== */
.bg-fx {
	background-color: #fdf1ef;
	padding: 20px 10px;
}
@media only screen and (min-width: 640px) {
	.bg-fx {
		padding: 30px 20px;
	}
}

/* ========== blk ========== */
.blk-3col {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	   -ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 20px;
}
@media only screen and (min-width: 640px) {
    .blk-3col {
        margin-top: 30px;
    }
}

.blk-3col-item {
	margin-left: 2.3%;
}
.blk-3col-item:first-child {
	margin-left: 0;
}

/* ========== btn ========== */
.c-btn-04.btn-fx-quiz {
	background: #e40600;
	border-radius: 6px;
	box-shadow: 0 3px 0 rgba(182,4,0,1);
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	padding: 12px 68px 10px;
	text-decoration: none;
	min-width: 68.75%;
}
@media only screen and (min-width: 640px) {
    .c-btn-04.btn-fx-quiz {
		border-radius: 10px;
		box-shadow: 0 6px 0 rgba(182,4,0,1);
		font-size: 22px;
		min-width: 432px;
		padding: 24px 38px 18px 48px;
    }
}

@media only screen and (max-width: 640px) {
	.c-btn-04.btn-fx-quiz::before {
		width: 14px;
		height: 14px;
		background-size: auto 14px;
		background-position: -168px 0;
		top: 13px;
		left: 14px;
	}
	.c-btn-04.btn-fx-quiz.icon-modal::after {
		width: 11px;
		height: 11px;
		background-image: url(/campaign/2020/20201130_fx_quiz/img/icon_modal.png);
		background-repeat: no-repeat;
		background-size: auto 11px;
		background-position: 0 0;
		position: absolute;
		top: 14px;
		right: 14px;
		content: "";
	}
}
@media only screen and (min-width: 640px) {
	.c-btn-04.btn-fx-quiz::before {
		width: 22px;
		height: 22px;
		background-size: auto 22px;
		background-position: -264px 0;
		top: 26px;
		left: 24px;
	}
}

/* ========== heading ========== */
.c-ground-01 > .prg-heading2-01:first-child {
	margin-top: -45px;
	margin-bottom: 1.875em;
}
.c-ground-01 > .prg-heading2-02:first-child {
	margin-top: -75px;
	margin-bottom: 1.25em;
}
@media only screen and (max-width: 640px) {
	.c-ground-01 > .prg-heading2-01:first-child {
		margin-top: -25px;
		margin-bottom: .5625em;
	}
	.c-ground-01 > .prg-heading2-02:first-child {
		margin-top: -45px;
	}
}

.prg-heading3-01 {
	margin-top: 2em;
	margin-left: -54px;
    margin-right: -54px;
    margin-bottom: 1.875em;
}
@media only screen and (max-width: 640px) {
	.prg-heading3-01 {
		margin-top: 2em;
		margin-left: -10px;
		margin-right: -10px;
		margin-bottom: .5625em;
	}
}

/* ========== ground ========== */
.prg-ground-01 {
	margin-top: 35px;
}
.prg-ground-02 {
	margin-top: 75px;
}
@media only screen and (max-width: 640px) {
	.prg-ground-01 {
		margin-top: 25px;
	}
	.prg-ground-02 {
		margin-top: 45px;
	}
}