@charset "utf-8";
.specialContentWrap{
	border-top: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    background-color: #FFF;
	position: relative;
	width: 100%;
}

.contestDetailList{
	text-indent: -0.5em;
	padding-left: 0.5em;
}
.contestDetailList.-kome{
	text-indent: -1em;
	padding-left: 1em;
}

/*-----------------------------------------------
 * SHIKEN - HEAD
-------------------------------------------------*/
.quizHead{
	padding-bottom: min(calc(48 / var(--vw-min) * 100vw), calc(48px * var(--max-percent)));
}
.quiz_title{
	width: min(calc(320 / var(--vw-min) * 100vw), calc(320px * var(--max-percent)));
	margin: 0 auto;
	padding-bottom: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
}
.quiz_title img{
	width: 100%;
}
@media screen and (max-width:768px){
	.quizHead{
		padding-bottom: calc(48 / var(--vw-min) * 100vw);
	}
	.quiz_title{
		width: calc(400 / var(--vw-min) * 100vw);
		padding-bottom: calc(24 / var(--vw-min) * 100vw);
	}
}


.quiz__headText{
	padding-top: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
}
.quiz__headLists{
	padding-top: 0;
}
.quiz__headCaution{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	position: relative;
}

@media screen and (max-width:768px){
	.quiz__headText{
		padding-top: calc(24 / var(--vw-min) * 100vw);
	}
}


.contest__h4.-center{
	text-align: center;
}
input[type="submit"] {
	cursor: pointer;
}


/*-----------------------------------------------
 * QUIZ - MAIN
-------------------------------------------------*/
.quizStartText{
	text-align: center;
	font-weight: 700;
	padding-bottom: 2em;
}
.quizMain{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	padding: 2.5%;/* 20 */
	position: relative;
	background: #FFF url(../img/special/shiken/bg_ptn.png) repeat;
	line-height: 2;
	font-size: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
}
.quizMain:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid var(--color-black);
	pointer-events: none;
}

.quizMain__line{
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 20%) 0px, rgba(0, 0, 0, 20%) 1px, transparent 1px);
	background-repeat: repeat;
	background-size: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent))) min(calc(39 / var(--vw-min) * 100vw), calc(39px * var(--max-percent)));
}
.quizMain__uline{
	border-bottom: 1px solid rgba(0,0,0,20%);
}

.quizNo{
	font-weight: 600;
	color: var(--color-orange);
}
.quizList:nth-of-type(even) .quizNo{
	color: var(--color-blue);
}
.quizList:not(:last-child){
	margin-bottom: min(calc(64 / var(--vw-min) * 100vw), calc(64px * var(--max-percent)));
}
.quizNo small{
	font-weight: 500;
}

.quizList__dt--img{
	width: 100%;
	padding: 1em 0;
}


@media screen and (max-width:768px){
	.quizMain{
		padding: calc(32 / var(--vw-min) * 100vw);
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
	.quizMain:before{
		border-width: var(--sp-size-2);
	}

	.quizMain__line{
		background-size: calc(51 / var(--vw-min) * 100vw) calc(51 / var(--vw-min) * 100vw);
	}
	.quizMain__uline{
		border-bottom-width: var(--sp-size-2);
	}
	.quizList:not(:last-child){
		margin-bottom: calc(72 / var(--vw-min) * 100vw);
	}
}


.quizList__dd{
	font-size: min(calc(18 / var(--vw-min) * 100vw), calc(18px * var(--max-percent)));
	margin-top: 1em;
}
.quizAnswerLists{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: min(calc(12 / var(--vw-min) * 100vw), calc(12px * var(--max-percent)));
}
.quizAnswerList{
	line-height: 1;
}
.quizAnswerList input[type="radio"]{
	display: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	margin: 0;
}
.quizAnswerLabel{
	display: inline-block;
	position: relative;
	cursor: pointer;
	transition: color .2s ease, opacity .2s ease, font-size .2s ease, backdround-color .2s ease;
	padding: 0.75em 0.5em 0.75em 0.75em;
	border-radius: 6px;
	overflow: hidden;
}
.quizAnswerLabel:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 1px solid rgba(0, 0, 0, 10%);
	background-color: rgba(0, 0, 0, 3%);
	border-radius: 6px;
}
.quizAnswerLabelText{
	position: relative;
}
.quizAnswer__radioHead{
	display: inline-block;
	margin-right: 0.75em;
	position: relative;
	font-weight: 600;
}
.quizAnswer__radioHead:before{
	content: '';
	position: absolute;
	top: 0;
	left: -0.45em;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 1.5em;
	height: 1.5em;
	border:  2px solid #FFF;
	border-radius: 50%;
	opacity: 0;
	transition: opacity .2s ease;
}
.quizAnswerList input[type="radio"]:checked + .quizAnswerLabel{
	color: #FFF;
	background-color: var(--color-orange);
	font-weight: 600;
	font-size: 105.5556%;
}
.quizAnswerList input[type="radio"]:checked + .quizAnswerLabel .quizAnswer__radioHead:before{
	opacity: 1;
}

.quizList:nth-of-type(even) input[type="radio"]:checked + .quizAnswerLabel{
	background-color: var(--color-blue);
}




@media screen and (hover:hover) and (pointer: fine){
	.quizAnswerLabel:hover{
		opacity: 70%;
	}
	.quizAnswerList input[type="radio"]:checked + .quizAnswerLabel:hover{
		opacity: 1;
	}
}

@media screen and (max-width:768px){
	.quizList__dd{
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
	.quizAnswerLabel:before{
		border-radius: calc(8 / var(--vw-min) * 100vw);
	}
	.quizAnswer__radioHead:before{
		border-width: calc(3 / var(--vw-min) * 100vw);
	}
}


.textBox{
	width: 16em;
    max-width: 100%;
    padding: 0.5em 1em;
    background-color: #fcfcfc;
    outline: none;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, 6 0%);
	font-size: min(calc(18 / var(--vw-min) * 100vw), calc(18px * var(--max-percent)));
	border-radius: 6px;
	font-weight: 600;
	color: var(--color-black);
}
.formBtnCont{
	margin-top: min(calc(48 / var(--vw-min) * 100vw), calc(48px * var(--max-percent)));
}
@media screen and (max-width:768px){
	.textBox{
		font-size: calc(24 / var(--vw-min) * 100vw);
		border-radius: calc(8 / var(--vw-min) * 100vw);
		border-width: var(--sp-size-2);
	}
}

/**
* AnswerList Width
**/
#q1.quizList .quizAnswerLabel{
	min-width: 7em;
}
#q3.quizList .quizAnswerLabel{
	min-width: 8.2223em;
}
#q5.quizList .quizAnswerLabel{
	min-width: 6.1112em;
}
#q7.quizList .quizAnswerLabel{
	min-width: 5em;
}
#q8.quizList .quizAnswerLabel{
	min-width: 11.4445em;
}
#q9.quizList .quizAnswerLabel{
	min-width: 15.5556em;
}


/*-----------------------------------------------
 * SHIKEN - RESULT
-------------------------------------------------*/
.quizResult__scoreWrap{
	text-align: center;
	padding-bottom: min(calc(28 / var(--vw-min) * 100vw), calc(28px * var(--max-percent)));
}
.quizResult__score{
	display: inline-flex;
	justify-content: center;
	align-items: flex-end;
	padding-bottom: min(calc(12 / var(--vw-min) * 100vw), calc(12px * var(--max-percent)));
	position: relative;
	border-bottom: 2px solid var(--color-black);
}
.quizResult__score--dt{
	font-weight: 600;
	font-size: min(calc(20 / var(--vw-min) * 100vw), calc(20px * var(--max-percent)));
	padding-right: 1.5em;
}
.quizResult__score--dd{
	display: flex;
	align-items: flex-end;
}
.quizResult__score-user{
	width: min(calc(200 / var(--vw-min) * 100vw), calc(200px * var(--max-percent)));
	margin-top: max(calc(-40 / var(--vw-min) * 100vw), calc(-40px * var(--max-percent)));
}
.quizResult__score-user[data-score="100"]{
	width: min(calc(224 / var(--vw-min) * 100vw), calc(224px * var(--max-percent)));
}
.quizResult__score-user[data-score="0"]{
	width: min(calc(140 / var(--vw-min) * 100vw), calc(140px * var(--max-percent)));
}
.quizResult__score-user img{
	width: 100%;
	transform: translateY(min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent))));
}
.quizResult__score-all{
	font-weight: 500;
	font-size: min(calc(18 / var(--vw-min) * 100vw), calc(18px * var(--max-percent)));
	padding-left: 1em;
}

@media screen and (max-width:768px){
	.quizResult__scoreWrap{
		padding-bottom: calc(36 / var(--vw-min) * 100vw);
	}
	.quizResult__score{
		padding-bottom: calc(16 / var(--vw-min) * 100vw);
	}
	.quizResult__score--dt{
		font-size: calc(28 / var(--vw-min) * 100vw);
	}
	.quizResult__score-user{
		width: calc(250 / var(--vw-min) * 100vw);
		margin-top: calc(-50 / var(--vw-min) * 100vw);
	}
	.quizResult__score-user[data-score="100"]{
		width: calc(280 / var(--vw-min) * 100vw);
	}
	.quizResult__score-user[data-score="0"]{
		width: calc(175 / var(--vw-min) * 100vw);
	}
	.quizResult__score-user img{
		transform: translateY(calc(50 / var(--vw-min) * 100vw));
	}
	.quizResult__score-all{
		font-size: calc(26 / var(--vw-min) * 100vw);
	}
}


.quizResult{
	background: unset;
	padding: unset;
}
.quizResult:before{
	content: unset;
}
.resultImage{
	width: 100%;
	border: 1px solid var(--color-black);
}
.resultImage img{
	width: 100%;
}
.resultLinkLists{
	display: flex;
	justify-content: center;
	gap: min(calc(24 / var(--vw-min) * 100vw), calc(24px * var(--max-percent)));
	margin-top: min(calc(32 / var(--vw-min) * 100vw), calc(32px * var(--max-percent)));
}

.resultContent{
	display: none;
	padding-top: min(calc(48 / var(--vw-min) * 100vw), calc(48px * var(--max-percent)));
	padding-bottom: min(calc(24 / var(--vw-min) * 100vw), 24px);
}
.quizResult .galleryLists{
	grid-template-columns: repeat(3, 1fr);
	gap: min(calc(32 / var(--vw-min) * 100vw), calc(32px * var(--max-percent)));
	margin-top: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
.quizResult .galleryList__img{
	padding-top: 56.25%;
}
.quizResult .galleryList__img img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

@media screen and (max-width:768px){
	.resultLinkLists{
		flex-direction: column;
		align-items: center;
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
	.resultLinkList .news_link{
		text-align: center;
		min-width: calc(416 / var(--vw-min) * 100vw);
		gap: calc(24 / var(--vw-min) * 100vw);
	}
	.resultContent{
		padding-top: calc(64 / var(--vw-min) * 100vw);
		padding-bottom: calc(32 / var(--vw-min) * 100vw);
	}
	.quizResult .galleryLists{
		grid-template-columns: repeat(2, 1fr);
		gap: calc(40 / var(--vw-min) * 100vw);
		margin-top: calc(48 / var(--vw-min) * 100vw);
	}
}



/*-----------------------------------------------
 * SPECIAL - SHIKEN SLIDE IMAGE
-------------------------------------------------*/
.imageSlideWrap{
	width: 100%;
}
.imageSlide{
	width: 25%;
	max-width: 300px;
}
.imageSlide img{
	width: 100%;
}
@media screen and (max-width:768px){
	.imageSlide{
		width: 32%;
	}
}