@charset "utf-8";
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}
::selection {
	background: #000;
	color: #fff;
}
::-moz-selection {
 background: #000;
 color:#fff;
}
* {
	outline:none;
}
body {
	font-family: 'Noto Serif JP',"Yu Gothic", YuGothic, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #000;
	background-color: #000;
}
a { color: #000; }
a:hover { text-decoration: none; }
.sp {display:none;}
header {
	min-width: 750px;
	position:relative;
	height:594px;
	background:url(../images/header_bg.jpg) center top / cover;
}
header:before {
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	pointer-events:none;
	background-image:url(../images/ktl.png),url(../images/ktr.png),url(../images/ktt.png),url(../images/kb.png);
	background-position:left top,right top,center top,center bottom;
	background-repeat:no-repeat,no-repeat,repeat-x;
	background-size:auto,auto,auto,100% 295px;
}
header h1 {
	background: url(../images/title.png);
	height: 484px;
	width: 732px;
	margin-left: -366px;
	position: absolute;
	left: 50%;
	bottom: 30px;
}
#main {
	position: relative;
	background: url(../images/menu_bg.jpg) fixed center center;
	padding-bottom:30px;
}
#main:before {
	content:'';
	background:#000;
	left:0;
	right:0;
	top:-1px;
	height:70px;
	position:absolute;
}
#main article {
	width:670px;
	box-sizing:border-box;
	padding:40px 55px;
	margin:0 auto 60px;
	background:url(../images/article_bg.png) no-repeat center center / cover;
	position:relative;
}
.mark {
	position:relative;
}
.mark:before {
	content:'';
	left:0;
	top:0;
	right:0;
	bottom:0;
	pointer-events:none;
	position:absolute;
	background-image:url(../images/mark_x.png),url(../images/mark_x.png),url(../images/mark_y.png),url(../images/mark_y.png);
	background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;
	background-position:left top,left bottom,right top, left top;
}
.kd:after {
	content:'';
	left:0;
	top:0;
	right:0;
	bottom:0;
	pointer-events:none;
	position:absolute;
	background-image:url(../images/dtl.png),url(../images/dtr.png),url(../images/dbl.png),url(../images/dbr.png);
	background-repeat:no-repeat;
	background-position:left top,right top,left bottom, right bottom;
}
#read p {
	font-size: 22px;
	line-height: 38px;
}
#question h2 {
	background: url(../images/number.png) no-repeat center center;
	height: 63px;
	font-size: 30px;
	font-style: italic;
	line-height: 56px;
	color: #ccc48e;
	text-align: center;
	margin-bottom:25px;
}
#question p {
	font-size: 22px;
	line-height: 38px;
	margin-bottom: 25px;
}
.questionImg {
	margin-bottom:40px;
}
.questionImg img {
	width: 100%;
	height:auto;
}
#question .hint {
	background: rgba(249,245,230,.7) url(../images/hint_title.png) no-repeat 10px center;
	min-height:105px;
	border:1px solid #5f070f;
	box-sizing:border-box;
	padding-left:150px;
	padding-right:30px;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	font-size:18px;
	margin-bottom:50px;
}
#answer {
	width:562px;
	margin:0 auto;
}
#answer li {
	height: 93px;
	margin-bottom: 20px;
}
#answer li a {
	box-sizing:border-box;
	line-height: 93px;
	display: block;
	height: 93px;
	padding-left: 110px;
	font-size:30px;
	color:#ccc48e;
	text-decoration:none;
	transition:all 0.3s ease;
}
#ans1 a {
	background:url(../images/a.png) no-repeat center center;
}
#ans2 a {
	background:url(../images/b.png) no-repeat center center;
}
#ans3 a {
	background:url(../images/c.png) no-repeat center center;
}
#ans4 a {
	background:url(../images/d.png) no-repeat center center;
}
#answer li a:hover {
	transform:translateY(-5px);
}
footer {
	background: #000;
	padding-top: 50px;
	padding-bottom: 50px;
	position:relative;
}
#footerLogo {
	margin: 0px auto 40px;
	height: 180px;
	width: 257px;
}
#footerLogo a {
	background:url(../images/footer_logo.png) no-repeat center center;
	height:180px;
	display:block;
}
#toIndex {
	margin-bottom:50px;
}
#toIndex a {
	display:block;
	height:72px;
	width:290px;
	margin:0 auto;
	background:url(../images/to_index.png) no-repeat center center;
	transition:all 0.3s ease;
}
#toIndex a:hover {
	transform:translateY(-5px);
}
#share {
	width:300px;
	margin: 0 auto 60px;
	display:flex;
	justify-content:space-between;
	height:80px;
}
#share dt,#share dd {
	width:78px;
	height:80px;
	line-height:80px;
	font-size:20px;
	color:#ccc48e;
}
#share dd a,#share dd a img {
	display:block;
}
#share dd a {
	transition:all 0.3s ease;
}
#share dd a:hover {
	transform:translateY(-5px);
}
.copyright {
	font-size: 16px;
	color: #ccc48e;
	text-align: center;
}
#bttop {
	position:absolute;
	bottom:40px;
	right:30px;
}
#bttop a,#bttop a img {
	display:block;
}
#bttop a {
	transition:all 0.3s ease;
}
#bttop a:hover {
	transform:translateY(-5px);
}
#success,#fail {
	display:none;
}
.failin {
	background: url(../images/result_fail.png) no-repeat center center;
	height: 894px;
	margin:20px auto;
	box-sizing:border-box;
	padding-left:178px;
	padding-top:519px;
	width:583px;
}
.failin li {
	margin-bottom:20px;
}
.failin li a,.failin li a img,
.success li a,.success li a img {
	display:block;
}
.failin li a,
.success li a {
	transition:all 0.3s ease;
}
.failin li a:hover,
.success li a:hover {
	transform:translateX(5px);
}
.successin {
	margin:20px auto;
	width:614px;
	height:773px;
	background:url(../images/result_success.png) no-repeat center center;
	box-sizing:border-box;
	padding-top:552px;
	padding-left:188px;
}
.finish {
	padding-top:30px;
	text-align:center;
	padding-bottom:50px;
}
.dlb {
	padding-bottom:40px;
}
.dlb a {
	width:384px;
	height:123px;
	display:block;
	margin:0 auto;
	transition:all 0.3s ease;
}
.dlb a img {
	display:block;
}
.dlb a:hover {
	transform:translateY(-5px);
}
#loading {
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:5000;
	background:#000;
}
@media screen and (min-width:771px){
	#main article {
		width:1000px;
	}
}