@charset "utf-8";

.mainContents{
	position: relative;
	padding: 32px 16px 16px;
}
@media (max-width: 768px) {
	.mainContents{
		padding: 20px 8px 10px;
	}
}
.svTitle{
	position: relative;
	margin-bottom: 30px;
}
.svTitle h1{
	margin-bottom: 16px;
}
.svTitle .badge{
	position: absolute;
	top: -46px;
	right: -32px;
	width: 138px;
}
@media (max-width: 768px) {
	.svTitle .badge{
		top: -30px;
		right: -20px;
		width: 80px;
	}
}
.svTitle .txt{
	padding: 0 16px;
	line-height: 1.875;
}
.svHeading{
	margin-bottom: 14px;
	background: url(./img/heading_bg.png) no-repeat center center / auto 2px;
}
.svHeading .out{
	display: table;
	padding: 2px;
	margin: 0 auto;
	color: #fff;
	background: url(./img/heading_bg_inner.jpg) no-repeat center center;
	border-radius: 12px;
}
.svHeading .in{
	display: table-cell;
	padding: 7px 20px;
	background-color: #2e2e2e;
	border-radius: 12px;
}
.svInner{
	padding-right: 24px;
	padding-left: 24px;
}
@media (max-width: 768px) {
	.svInner{
		padding-right: 12px;
		padding-left: 12px;
	}
}
.svList{
	font-size: 18px;
	line-height: 1.66;
}
.svList li{
	text-align: center;
}
.svList li p{
	width: 100%;
}
.svList li .new{
	display: flex;
	justify-content: center;
	align-items: center;
}
.svList li .new::before{
	content: "NEW";
	padding: 3px;
	margin-right: 6px;
	color: #fff;
	font-size: 12px;
	background-color: #e60012;
}
@media (max-width: 768px) {
	.svList li{
		font-size: 14px;
	}
	.svList li .new{
		align-items: flex-end;
	}
	.svList li .new::before{
		margin-left: -40px;
	}
}
.svList li:not(:last-of-type){
	margin-bottom: 20px;
}
@media (max-width: 768px) {
	.svList .current{
		color: #e60012;
		font-weight: bold;
	}
	.svList .current::after{
		display: none;
	}
}
.svBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 14px 0;
	margin-top: 8px;
	border-bottom: 4px solid #cc0000;
	color: #fff;
	font-size: 21px;
	font-weight: bold;
	text-decoration: none;
	background-color: #e60012;
}
.svBtn.off{
	border-bottom-color: #8a8a8a;
	background-color: #bebebe;
}
.svBtn::before{
	content: "";
	display: block;
	width: 27px;
	height: 37px;
	margin-right: 20px;
	background: url(./img/btn_img.png) no-repeat 0 0 / 27px auto;
}
@media (max-width: 768px) {
	.svBtn{
		display: block;
		text-align: center;
	}
	.svBtn::before{
		display: none;
	}
}

/* ----- 結果 ----- */
.answer{
	margin-top: 60px;
}
.resultBox{
	position: relative;
}
.resultBox::before,
.resultBox::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 20%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
}
.resultBox::before{
	left: 0;
}
.resultBox::after{
	right: 0;
}
#resultNav{
	display: flex;
}
#resultNav li{
	width: 100%;
	padding: 18px 0 16px;
	border: 1px solid #000;
	border-width: 1px 1px 1px 0;
	box-sizing: border-box;
	font-weight: bold;
	text-align: center;
}
#resultNav li:first-of-type{
	border-left-width: 1px;
}
#resultNav li:hover{
	cursor: pointer;
}
#resultNav li.current{
	border-bottom: 0;
}
#resultNav li.current:hover{
	cursor: default;
}
.resultChild{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 10px;
}
.resultChild.selected{
	display: block !important;
	position: static !important;
}
.answerTitle{
	margin-bottom: 26px;
	font-size: 36px;
	font-weight: bold;
	line-height: 1.38;
}
.answerTitle span{
	font-size: 20px;
}
@media (max-width: 768px) {
	.answerTitle{
		margin-bottom: 18px;
		font-size: 20px;
	}
}
.answerBox{
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px dashed #000;
}
@media (max-width: 768px) {
	.answerBox{
		padding-bottom: 18px;
		margin-bottom: 18px;
	}
}
.answerBox dt{
	display: flex;
	align-items: center;
	margin-bottom: 14px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
}
.answerBox dt span{
	padding: 6px 14px;
	margin-right: 10px;
	color: #fff;
	font-size: 16px;
	background-color: #e60012;
}
@media (max-width: 768px) {
	.answerBox dt{
		font-size: 16px;
	}
	.answerBox dt span{
		font-size: 14px;
	}
}
.answerBox dd{
	line-height: 1.33;
}
.answerBox p{
	font-size: 16px;
	line-height: 1.66;
}
.ansRank{
	display: flex;
	flex-wrap: wrap;
}
.ansRank.long{
	display: block;
}
@media (max-width: 768px) {
	.ansRank{
		display: block;
	}
	.ansRank li{
		width: 100%;
	}
}
.ansRank.short li{
	min-width: 0;
	margin-right: 30px;
}
.ansRank li{
	display: flex;
	align-items: center;
	min-width: 296px;
	margin-bottom: 20px;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
}
@media (max-width: 768px) {
	.ansRank li{
		font-size: 18px;
	}
}
.ansRank li:last-of-type{
	margin-right: 0;
}
.ansRank li:nth-child(1)::before,
.ansRank li:nth-child(2)::before,
.ansRank li:nth-child(3)::before{
	display: block;
	content: "";
	width: 0;
	padding-left: 57px;
	height: 68px;
	margin-right: 10px;
}
.ansRank li:nth-child(1)::before{
	background: url(./img/icon_first.png) no-repeat 0 0 / 57px 68px;
}
.ansRank li:nth-child(2)::before{
	background: url(./img/icon_second.png) no-repeat 0 0 / 57px 68px;
}
.ansRank li:nth-child(3)::before{
	background: url(./img/icon_third.png) no-repeat 0 0 / 57px 68px;
}
.ansRatio{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 14px;
}
.ansRatio p{
	line-height: 1;
	font-size: 30px;
}
.ansRatio .bar{
	max-width: 464px;
}
@media (max-width: 768px) {
	.ansRatio p{
		font-size: 20px;
	}
	.ansRatio p:first-of-type{
		padding-right: 4px;
	}
	.ansRatio p:last-of-type{
		padding-left: 4px;
	}
}
.answerBox .ansRatio2 dl{
	margin-bottom: 20px;
	font-size: 18px;
}
.answerBox .ansRatio2 dt{
	display: block;
	font-weight: normal;
	margin-bottom: 6px;
}
.data{
	padding: 19px 0 25px;
	border: 2px solid #000;
	text-align: center;
	background-color: rgba(255,255,255,.2);
}
.data p{
	margin-bottom: 20px;
	font-weight: bold;
	line-height: 1.6;
}
.data figure{
	padding: 0 8px;
}
@media (max-width: 768px) {
	.data{
		padding: 10px;
	}
	.data img{
		max-width: 100%;
	}
}

/* ----- キャンペーン概要 ----- */
.campaign {
margin-top: 44px;
padding: 8px;
background-color: #f5dddd;
background: url(./img/camp_bg.gif) repeat 0 0 / 13px 22px;}
@media (max-width: 768px) {
.campaign {
margin-top: 20px;
padding: 4px;}}
.campaign .contentsInner {
padding: 23px;
border: 1px solid #e0adad;
}
@media (max-width: 768px) {
.campaign .contentsInner {
padding: 12px 8px;}}
.campaignDesc p:first-of-type {
margin-bottom: 14px;
text-align: center;
line-height: 1;}
@media (max-width: 768px) {
.campaignDesc p:first-of-type {
margin-bottom: 12px;
font-size: 12px;}}
.campaignDesc .campaignTitle {
margin-bottom: 24px;
text-align: center;}
@media (max-width: 768px) {
.campaignDesc .campaignTitle {
margin-bottom: 14px;}}
.campaignDesc .campaignTitle img {
width: 290px;}
.campaignDesc p {
line-height: 1.875;
word-break: break-all;
text-align: justify;
text-justify: inter-ideograph;}
.present {
margin-top: 18px;
padding: 14px 20px;
text-align: center;
background-color: #fff;
}
@media (max-width: 768px) {
	.present{
		padding: 14px 12px;
	}
}
.present .presentTitle {
display: flex;
align-items: center;
margin-bottom: 30px;}
@media (max-width: 768px) {
.present .presentTitle {
margin-bottom: 14px;}}
.present .presentTitle img {
width: 42px;
margin: 0 20px;}
.present .presentTitle::before, .present .presentTitle::after {
content: "";
flex: 1;
display: block;
width: 100%;
height: 2px;
background-color: #000;}
.present figure {
width: 50%;
margin: 0 auto 18px;}
.presentName{
	font-size: 20px;
}
@media (max-width: 768px) {
.present figure {
margin-bottom: 14px;
width: 80%;}}
.present .campaignNum {
margin-top: 18px;
padding: 10px 0;
color: #fff;
font-size: 18px;
background-color: #e50012;}
@media (max-width: 768px) {
.present .campaignNum {
font-size: 12px;}}
.entry {
margin-top: 18px;
padding: 14px 20px;
background-color: #fff;}
@media (max-width: 768px) {
	.entry{
		padding: 14px 12px;
	}
}
.entry .entryTitle {
display: flex;
align-items: center;
margin-bottom: 30px;}
@media (max-width: 768px) {
.entry .entryTitle {
margin-bottom: 14px;}}
.entry .entryTitle img {
width: 69px;
margin: 0 20px;}
.entry .entryTitle::before, .entry .entryTitle::after {
content: "";
flex: 1;
display: block;
width: 100%;
height: 2px;
background-color: #fff;}
.entry .steps {
display: flex;
justify-content: flex-start;
margin-bottom: 16px;}
@media (max-width: 768px) {
.entry .steps {
display: block;}}
.entry .steps li {
position: relative;
box-sizing: border-box;}
.entry .steps li:first-of-type {
width: 50%;
padding: 12px 14px;
background-color: #e47a2d;}
.entry .steps li:first-of-type::after {
background: url(./img/entry_s1_bg.png) no-repeat 0 0;
background-size: 100% 100%;}
@media (max-width: 768px) {
.entry .steps li:first-of-type {
width: 100%;}
.entry .steps li:first-of-type::after {
background-image: none;}}
.entry .steps li:nth-child(2) {
width: calc(50% - 26px);
padding: 12px 10px 12px 38px;
background-color: #e24d12;}
.entry .steps li:nth-child(2)::after {
background: url(./img/entry_s2_bg.png) no-repeat 0 0;
background-size: 100% 100%;}
@media (max-width: 768px) {
.entry .steps li:nth-child(2) {
width: 100%;
padding: 12px 14px;}
.entry .steps li:nth-child(2)::after {
background-image: none;}}
.entry .steps li::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: -22px;
width: 22px;
height: 100%;}
@media (max-width: 768px) {
.entry .steps li::after {
top: auto;
bottom: -20px;
right: 0;
width: 100%;
height: 20px;}}
.entry .steps li img {
display: block;
width: 45px;
margin-bottom: 12px;}
.entry .steps li p {
line-height: 1.125;
color: #0f0f0f;}
.entry .entryBtn {
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
border: 2px solid #ad020f;
border-radius: 100px;
box-sizing: border-box;
font-size: 24px;
text-decoration: none;
background-color: #e50012;
color: #fff;
transition: background-color .3s ease;}
.entry .entryBtn::before {
content: "";
display: block;
width: 37px;
height: 25px;
margin-right: 14px;
background: url(./img/entry_btn_icon.png) no-repeat 0 0;
background-size: 37px 25px;}
.entry .entryBtn:hover {
background-color: #f81224;}
@media (max-width: 768px) {
.entry .entryBtn {
font-size: 18px;}
.entry .entryBtn::before {
display: none;}}
.entry .twEmb{
max-width: 500px;
margin: 0 auto;
}
.notes {
margin-top: 20px;
line-height: 1.5;}
.notes h5 {
position: relative;
margin-bottom: 10px;
padding-left: 8px;
border-left: 6px solid #e50012;
font-size: 18px;
line-height: 1.2;}
.notes h5::before {
content: "";
position: absolute;
bottom: 0;
left: -6px;
width: 6px;
height: 4px;
background-color: #ad020f;}
.notes p {
margin-bottom: 24px;}
.notes p em {
color: #ff9898;
font-style: normal;}
.notes p:last-of-type {
margin-bottom: 0;}