@charset 'utf-8';

/* ++++++++++++++++++++++++++++++++++++++++

	quiz.html,quiz._clearhtml,quiz_faild.html

++++++++++++++++++++++++++++++++++++++++ */

.l-main {
	margin-bottom: 0;
}

.sp {
	display: none;
}

#obc_quiz div,#obc_quiz p,
#obc_quiz ul,#obc_quiz li,
#obc_quiz dl,#obc_quiz dt,#obc_quiz dd,
#obc_quiz h1,#obc_quiz h2,#obc_quiz h3,#obc_quiz h4,#obc_quiz h5,#obc_quiz h6,
#obc_quiz img,#obc_quiz a,#obc_quiz address,#obc_quiz figure {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 游ゴシック体, YuGothic, 游ゴシック Medium, Yu Gothic Medium, 游ゴシック, Yu Gothic, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif;
	font-weight: 600;
}

#obc_quiz a {
	text-decoration: none;
	color: #000;
	transition: .4s;
}
#obc_quiz a:hover {
	opacity: .5;
	transition: .4s;
}

#obc_quiz li {
	list-style: none;
}

#obc_quiz h3,
#obc_quiz h2,
#obc_quiz h1 {
	margin: 0;
}

#obc_quiz #answer.disable {
	opacity: .5;
	pointer-events: none;
}

#obc_quiz.question {
	position: relative;
	padding: 60px 0;
}
#obc_quiz.question::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	padding-bottom: 250px;
	background: url(../img/bg_quiz.svg) bottom center / 100% 100% no-repeat;
}
#obc_quiz.clear {
	position: relative;
	padding: 250px 0 140px;
	background: url(../img/bg_clear.svg) top center / auto no-repeat;
}
#obc_quiz.failed {
	position: relative;
}

#obc_quiz>.inner {
	position: relative;
	width: 750px;
	margin: auto;
	z-index: 1;
}
#obc_quiz.failed>.inner {
	position: relative;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(233, 233, 233, 1) 10px, rgba(233, 233, 233, 1) 13px );
}

#obc_quiz>.inner>a {
	display: block;
	margin: 55px auto 0;
	width: 630px;
}
#obc_quiz h2 {
	text-align: center;
	margin-bottom: 70px;
	line-height: 1;
}
#obc_quiz.clear h2 {
	margin-bottom: 210px;
}
#obc_quiz.failed {
	position: relative;
	padding: 0;
}
#obc_quiz.failed>.inner {
	position: relative;
	width: 100%;
	padding: 80px 0;
}
#obc_quiz.failed h2 {
	position: relative;
	display: block;
	width: 344px;
	height: 0;
	padding-bottom: 344px;
	margin: auto;
	border-radius: 50%;
	background: #fff;
	box-shadow: 10px 10px 0 #949595;
}
#obc_quiz.failed h2>img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70.34%;
	transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}
#obc_quiz.failed>.inner2 {
	padding: 55px 0;
	text-align: center;
}
#obc_quiz.failed>.inner2>img {
	margin: 27px;
}
#obc_quiz.failed>.inner2>a {
	display: block;
	width: 84%;
	margin: auto;
}
#obc_quiz.failed>.inner2>p {
	font-size: 26px;
}
#obc_quiz .box {
	background: #fff;
	border: solid 1px #949595;
}
#obc_quiz .scroll_area {
	height: 70vh;
	overflow: scroll;
	padding: 20px 20px 0;
	margin: 10px 10px 10px;
	box-sizing: border-box;
}
#obc_quiz .quiz_item {
	margin-bottom: 50px;
}
#obc_quiz .quiz_item .num {
	font-size: 38px;
	color: #db0012;
}
#obc_quiz .quiz_item .quiz {
	margin-bottom: 20px;
	font-size: 22px;
}
#obc_quiz .quiz_item li {
	font-size: 20px;
}
#obc_quiz input[type="radio"] {
	margin-right: 0.5em;
}
#obc_quiz .scroll_area span.border {
	width: 100%;
	display: block;
	height: 1px;
	margin-bottom: 1em;
	border-bottom: dashed 1px #000;
}
#obc_quiz .scroll_area::-webkit-scrollbar{
	width: 10px;
}
#obc_quiz .scroll_area::-webkit-scrollbar-track{
	background: #fff;
	border: none;
}
#obc_quiz .scroll_area::-webkit-scrollbar-thumb{
	background: #231815;
	border-radius: 10px;
	
}




/* ++++++++++++++++++++++++++++++++++++++++

	SP

++++++++++++++++++++++++++++++++++++++++ */

@media (max-width: 767px) {

	
.sp {
	display: block;
}
.pc {
	display: none;
}
img {
	max-width: 100%;
}
#obc_quiz.question {
	position: relative;
	padding: 60px 0;
}
#obc_quiz.question::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	padding-bottom: 20.66%;
	background: url(../img/bg_quiz.svg) bottom center / 100% 100% no-repeat;
}
#obc_quiz.clear {
	position: relative;
	padding: 0;
	background: url(../img/bg_clear_sp.svg) top center / 100% auto no-repeat;
}

#obc_quiz>.inner {
	position: relative;
	width: 100%;
	margin: auto;
	z-index: 1;
}
#obc_quiz.failed>.inner {
	padding: 11.33% 0;
}
#obc_quiz>.inner>a {
	display: block;
	margin: 7.3% auto 8%;
	width: 84%;
}
#obc_quiz.question h2 {
	width: calc(131 / 750 * 100%);
	text-align: center;
	margin: 0 auto 8%;
	line-height: 1;
}
#obc_quiz.failed h2 {
	position: relative;
	display: block;
	width: 45.86%;
	padding-bottom: 45.86%;
}
#obc_quiz.failed {
	position: relative;
	padding: 0;
}
#obc_quiz.failed>.inner2 {
	padding: 7.33% 0;
	text-align: center;
}
#obc_quiz.failed>.inner2>img {
	width: 10%;
	margin: 2.66%;
}
#obc_quiz.failed>.inner2>a {
	display: block;
	width: 84%;
	margin: auto;
}
#obc_quiz.failed>.inner2>p {
	font-size: 3.467vw;
}
#obc_quiz.clear h2 {
	width: calc(475 / 750 * 100%);
	text-align: center;
	margin: 0 auto;
	padding: 32% 0 28%;
	line-height: 1;
}
#obc_quiz .scroll_area {
	height: 70vh;
	overflow-y: scroll;
	padding: 0 4% 0 0;
	margin: 2.6%;
	background: #fff;
}
#obc_quiz.clear .scroll_area {
	height: 22vh;
}
#obc_quiz.clear .scroll_area {
	font-size: 2.4vw;
}
#obc_quiz .quiz_item {
	margin-bottom: 13.33%;
}
#obc_quiz .quiz_item:last-child {
	margin-bottom: 0;
}
#obc_quiz .quiz_item .num {
	font-size: 5.067vw;
	color: #db0012;
}
#obc_quiz .quiz_item .quiz {
	margin-bottom: 3.4%;
	font-size: 3.333vw;
}
#obc_quiz .quiz_item li {
	font-size: 2.667vw;
	line-height: 1;
	margin-bottom: 0.7em;
}
#obc_quiz input[type="radio"] {
	display: inline-block;
	margin: 0 6px 0 0;
	vertical-align: bottom;
}
#obc_quiz .box {
	width: 84%;
	margin: auto;
	background: #fff;
	border-radius: 10px;
}


#obc_quiz .scroll_area::-webkit-scrollbar{
	width: 7px;
}
#obc_quiz .scroll_area::-webkit-scrollbar-track{
	background: #fff;
	border: none;
}
#obc_quiz .scroll_area::-webkit-scrollbar-thumb{
	border-radius: 10px;
}

}