@charset "utf-8";



 /******************** 共通 ********************/

html{
	width: 100%;
	height: 100%;
}

body{
	width: 100%;
	font-family: Arial,Roboto,"Droid Sans","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	line-height: 1.5;
	color: #090909;
	font-size: 16px;
	height: 100%;
}



 /******************** PC ********************/

@media screen and (min-width: 769px) {


body{
	font-size: 16px;
	height: 100%;
}


header {
	padding: 4em;
	background-color: #0C4DC4;
	color: #fff;
}
header a {
	color: #fff;
	text-decoration: none;
}
header a span {
	margin-left: 1em;
	padding: 0.25em 0.5em;
	background-color: #fff;
	border-radius: 8px;
	color: #0C4DC4;
	text-decoration: none;
}


footer {
	max-width: 1920px;
	margin: 0 auto;
	text-align: left;
	position: sticky;
	top: 100vh;
	/*border: #999 1px solid;*/
}
footer img {
	width: 6.6%;
	min-width: 68px;
	vertical-align: top;
}


#bodyblock {
	max-width: 1050px;
	margin: 0 auto;
	text-align: center;
	vertical-align: top;
	/*border: #999 1px solid;*/
}

#bodyblock .block1 a, #bodyblock .block2 a, #bodyblock2 a, #bodyblock3 a .item {
	color: #090909;
	text-decoration: none;
}
#bodyblock3 .block4 .item:hover, div.buttonblock2 div.nextbutton:hover, #bodyblock3 .block4 .answer .answer_result {
	background-color: #F7FFDF;
	/*background-color: #E22330;*/
}

#bodyblock .block1 {
	width: 100%;
	margin: 4em 0 1em;
	text-align: left;
	/*border: #999 1px solid;*/
}
#bodyblock .block1 .item {
	display: inline-block;
	width: 22%;
	height: 250px;
	margin: 0.5em;
	padding: 135px 2em 1em;
	background: #F3F6FC url(../img/common/icon-book.png) no-repeat 50% 1.5rem;
	background-size: 95px;
	border: #fff 1px solid;
	border-radius: 8px;
	box-shadow: 5px 5px 4px #ECECEC;
	vertical-align: top;
	text-align: center;
}

#bodyblock .block2 {
	margin: 1em auto 4em;
	padding: 0 0.75em;
	max-width: 760px;
}
#bodyblock .block2 .item {
	display: block;
	width: 100%;
	padding: 2em;
	background: #F3F6FC url(../img/common/icon-books.png) no-repeat 3rem 50%;
	background-size: 95px;
	border: #fff 1px solid;
	border-radius: 8px;
	box-shadow: 5px 5px 4px #ECECEC;
}

#bodyblock2 {
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
}


div.subtitleblock {
	margin-bottom: 1.75em;
}
div.subtitleblock_sp {
	display: none!important;
}

div.subtitleblock p.mtitle {
	display: inline-block;
	margin: 0 0 1em 0.75em;
	font-size: 20px;
	font-weight: bold;
}
div.subtitleblock p.mtitle span {
	margin: 0 0 1em 0;
	font-size: 18px;
	font-weight: normal;
}
div.subtitleblock p.mtitle span span.mtitle_sub2 {
	padding: 0.15em 0.5em;
	background-color: #333;
	color: #fff;
	border-radius: 6px;
}

div.buttonblock {
	display: inline-block;
	float:right;
	margin-right: 1em;
}
div.buttonblock a, div.buttonblock2 a {
	color: #090909;
	text-decoration: none;
}

div.buttonblock div.backbutton {
	width: 120px;
	background-color: #fff;
	border: #0C4DC4 2px solid;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #ddd;
}
div.buttonblock div.backbutton .sub {
	float: left;
	padding: 0.25em 1em;
	background: #0C4DC4 url(../img/common/icon-arrow-back.svg) no-repeat 50%;
    background-size: 20px auto;
	color: #fff;
}
div.buttonblock div.backbutton .title {
	padding: 0.25em 0 0.25em 3.25em;
}

div.buttonblock2 div.nextbutton {
	width: 240px;
	margin: 2em auto 0;
	background-color: #fff;
	border: #0C4DC4 2px solid;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #ddd;
}
div.buttonblock2 div.nextbutton .title {
	display: inline-block;
	width: 190px;
	padding: 0.5em 0;
	font-weight: bold;
	text-align: center;
}
div.buttonblock2 div.nextbutton .sub {
	display: inline-block;
	float: right;
	width: 40px;
	padding: 0.5em 0;
	background: #0C4DC4 url(../img/common/icon-arrow-back.svg) no-repeat 50%;
    background-size: 20px auto;
    transform: rotate(180deg);
}


#bodyblock2 .block3, #bodyblock3 .block4 {
	margin: 4em 0;
	padding: 2.5em 40px;
	background-color: #F3F6FC;
	border: #fff 1px solid;
	border-radius: 8px;
	box-shadow: 5px 5px 4px #ECECEC;
	vertical-align: top;
}
#bodyblock2 .block3 .item {
	display: inline-block;
	width: 386px;
	margin: 10px;
	background-color: #fff;
	border: #0C4DC4 2px solid;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #ddd;
}
/*
#bodyblock2 .block3 .item .sub {
	float: left;
	padding: 1em;
	background-color: #0C4DC4;
	color: #fff;
}
#bodyblock2 .block3 .item .sub2 {
	float: left;
	padding: 1em 0.5em;
	background-color: #0C4DC4;
	color: #fff;
}
#bodyblock2 .block3 .item .title {
	padding: 1em 1em 1em 6em;
}
#bodyblock2 .block3 .item .title2 {
	padding: 1em 1em 1em 2.25em
}
*/
#bodyblock2 .block3 .item table {
	height: 100%;
	border-spacing: 0;
}
#bodyblock2 .block3 .item table tr td.sub {
	padding: 1em;
	background-color: #0C4DC4;
	color: #fff;
	white-space: nowrap;
}
#bodyblock2 .block3 .item table tr td.title {
	padding: 1em;
	font-size: 95%;
}


#bodyblock3 {
	max-width: 900px;
	margin: -6em auto 0;
	text-align: left;
}
#bodyblock3 .block4 .qtitle p.no {
	display: inline-block;
	width: 100px;
	padding: 0.15em;
	background-color: #0C4DC4;
	border-radius: 6px;
	color: #fff;
	font-size: 28px;
	text-align: center;
	vertical-align: top;
}
#bodyblock3 .block4 .qtitle p.question {
	display: inline-block;
	width: 710px;
	padding-left: 0.5em;
	font-size: 22px;
	line-height: 1.3em;
	white-space: pre-line;
	/*border: #999 1px solid;*/
}
#bodyblock3 .block4 .qtitle p.question span {
	margin-right: 0.5em;
	padding: 0.4em;
	color: #333;
	font-size: 16px;
	line-height: 2.5em;
	background-color: #fff;
	border: #090909 1px solid;
	border-radius: 6px;
}
#bodyblock3 .block4 p.qimg {
	width: 500px;
	margin: 1.5em auto 0.5em;
}
#bodyblock3 .block4 p.qimg img {
	width: 100%;
}
#bodyblock3 .block4 .answer {
	position: relative;
	margin-top: 2em;
}
#bodyblock3 .block4 .answer .answer_true {
    width: 110px;
    height: 110px;
    background: url(../../assets/img/common/question--maru.svg) no-repeat;
    background-size: contain;
    opacity: .3;
    position: absolute;
    left: calc(50% - 65px);
    top: -25px;
}
#bodyblock3 .block4 .answer .answer_false {
    width: 110px;
    height: 110px;
    background: url(../../assets/img/common/question--batsu.svg) no-repeat;
    background-size: contain;
    opacity: .3;
    position: absolute;
    left: calc(50% - 65px);
    top: -25px;
}
#bodyblock3 .block4 .answer .caption {
	margin: 2.5em 0 0.5em;
}
#bodyblock3 .block4 .answer .caption2 {
	margin: 1em 0 0.5em;
}

#bodyblock3 .block4 .answer .caption table, #bodyblock3 .block4 .answer .caption2 table {
	width: 100%;
	background-color: #fff;
	border-collapse: collapse;
}
#bodyblock3 .block4 .answer .caption table td.sub, #bodyblock3 .block4 .answer .caption2 table td.sub {
	width: 80px;
	padding: 0.75em;
	background-color: #E9EAEA;
	color: #747574;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
#bodyblock3 .block4 .answer .caption table td.title, #bodyblock3 .block4 .answer .caption2 table td.title {
	width: auto;
	padding: 0.25em 1em;
}

#bodyblock3 .block4 .item {
	display: inline-block;
	width: 97.5%;
	margin: 0.3em 0;
	background-color: #fff;
	border: #0C4DC4 2px solid;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #ddd;
	font-size: 18px;
	font-weight: bold;
}
#bodyblock3 .block4 .item table {
	width: 100%;
	border-collapse: collapse;
}
#bodyblock3 .block4 .item table td.sub {
	width: 80px;
	background: #0C4DC4;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
#bodyblock3 .block4 .item div.a_true1 {
	margin-top: -3.2%;
    width: 80px;
    height: 80px;
	background: url(../../assets/img/common/question--maru.svg) no-repeat;
    background-size: contain;
    position: absolute;
    opacity: .6;
}
#bodyblock3 .block4 .item div.a_false1 {
	margin-top: -3.2%;
    width: 80px;
    height: 80px;
	background: url(../../assets/img/common/question--batsu.svg) no-repeat;
    background-size: contain;
    position: absolute;
    opacity: .6;
}
#bodyblock3 .block4 .item div.a_true2 {
	/*border: #999 1px solid;*/
	margin: -4.25% 0 0 86.5%;
    height: 80px;
    position: absolute;
    color: #f00;
    line-height: 1.25em;
    vertical-align: middle;
}

#bodyblock3 .block4 .item table td.title {
	width: auto;
	padding: 0.75em 1em;
}

#bodyblock3 .block4 .result {
	padding: 2em;
	background-color: #fff;
	text-align: center;
}
#bodyblock3 .block4 .result .title {
	color: #747574;
	font-size: 18px;
	font-weight: bold;
}
#bodyblock3 .block4 .result .score {
	margin: 0.25em 0 0.5em;
	padding: 1.25em;
	color: #FF6600;
	font-size: 60px;
	font-weight: bold;
	background-color: #F3F2E6;
}


}



 /******************** SP ********************/

@media screen and (max-width: 768px) {


body{
	font-size: 14px;
}


header {
	padding: 1.5em;
	background-color: #0C4DC4;
	color: #fff;
	font-size: 10px;
}
header a {
	color: #fff;
	text-decoration: none;
}
header a span {
	margin-left: 1em;
	padding: 0.25em 0.5em;
	background-color: #fff;
	border-radius: 8px;
	color: #0C4DC4;
	text-decoration: none;
}


footer {
	width: 100%;
	margin: 0 auto;
	text-align: left;
	position: sticky;
	top: 100vh;
}
footer img {
	width: 6.6%;
	min-width: 68px;
	vertical-align: top;
}


#bodyblock {
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

#bodyblock .block1 a, #bodyblock .block2 a, #bodyblock2 a, #bodyblock3 a .item {
	color: #090909;
	text-decoration: none;
}
#bodyblock3 .block4 .item:hover, div.buttonblock2 div.nextbutton:hover, #bodyblock3 .block4 .answer .answer_result {
	background-color: #F7FFDF;
}
#bodyblock .block1 {
	margin: 3em 0 0.25em;
}
#bodyblock .block1 .item {
	display: inline-block;
	width: 90%;
	margin: 10px;
	padding: 1em 0 1em 6.5em;
	background: #F3F6FC url(../img/common/icon-book.png) no-repeat 0.75em 0.6em;
	background-size: 65px;
	border: #fff 1px solid;
	border-radius: 8px;
	box-shadow: 5px 5px 4px #ECECEC;
	text-align: left;
}

#bodyblock .block2 {
	margin: 0.25em 0 3em;
}
#bodyblock .block2 .item {
	display: inline-block;
	width: 90%;
	margin: 10px;
	padding: 1em 0 1em 6.5em;
	background: #F3F6FC url(../img/common/icon-books.png) no-repeat 0.75em 0.6em;
	background-size: 65px;
	border: #fff 1px solid;
	border-radius: 8px;
	box-shadow: 5px 5px 4px #ECECEC;
	text-align: left;
}


#bodyblock2, #bodyblock3 {
	max-width: 95%;
	margin: 0 auto;
	text-align: left;
}


div.subtitleblock {
	margin-bottom: 1.5em;
}
div.subtitleblock_sp {
	margin-bottom: 1.5em;
}

div.subtitleblock p.mtitle {
	margin: 0 0 1em 0.5em;
	font-size: 18px;
	font-weight: bold;
}
div.subtitleblock p.mtitle span {
	margin: 0 0 1em 0;
	font-size: 16px;
	font-weight: normal;
}
div.subtitleblock p.mtitle span span.mtitle_sub2 {
	padding: 0.15em 0.5em;
	background-color: #333;
	color: #fff;
	border-radius: 6px;
}

div.buttonblock a, div.buttonblock2 a {
	color: #090909;
	text-decoration: none;
}

div.subtitleblock div.buttonblock div.backbutton {
	display: none!important;
}
div.buttonblock div.backbutton {
	width: 120px;
	margin: 2em auto 0 0;
	background-color: #fff;
	border: #0C4DC4 2px solid;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #ddd;
}
div.buttonblock div.backbutton .sub {
	float: left;
	padding: 0.25em 1em;
	background: #0C4DC4 url(../img/common/icon-arrow-back.svg) no-repeat 50%;
    background-size: 20px auto;
	color: #fff;
}
div.buttonblock div.backbutton .title {
	padding: 0.25em 0 0.25em 3.25em;
}

div.buttonblock2 div.nextbutton {
	width: 240px;
	margin: 2em auto 0;
	background-color: #fff;
	border: #0C4DC4 2px solid;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #ddd;
}
div.buttonblock2 div.nextbutton .title {
	display: inline-block;
	width: 190px;
	padding: 0.5em 0;
	font-weight: bold;
	text-align: center;
}
div.buttonblock2 div.nextbutton .sub {
	display: inline-block;
	float: right;
	width: 40px;
	padding: 0.5em 0;
	background: #0C4DC4 url(../img/common/icon-arrow-back.svg) no-repeat 50%;
    background-size: 20px auto;
    transform: rotate(180deg);
}


#bodyblock2 .block3, #bodyblock3 .block4 {
	margin: 3em 0;
	padding: 1.5em;
	background-color: #F3F6FC;
	border: #fff 1px solid;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #ddd;
}
#bodyblock2 .block3 .item {
	width: 100%;
	margin: 10px 0;
	background-color: #fff;
	border: #0C4DC4 2px solid;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #ddd;
}
/*
#bodyblock2 .block3 .item .sub {
	float: left;
	padding: 1em;
	background-color: #0C4DC4;
	color: #fff;
}
#bodyblock2 .block3 .item .sub2 {
	float: left;
	padding: 1em 0.5em;
	background-color: #0C4DC4;
	color: #fff;
}
#bodyblock2 .block3 .item .title {
	padding: 1em 1em 1em 6em;
}
#bodyblock2 .block3 .item .title2 {
	padding: 1em 1em 1em 2.25em
}
*/
#bodyblock2 .block3 .item table {
	height: 100%;
	border-spacing: 0;
}
#bodyblock2 .block3 .item table tr td.sub {
	padding: 1em;
	background-color: #0C4DC4;
	color: #fff;
	white-space: nowrap;
}
#bodyblock2 .block3 .item table tr td.title {
	padding: 1em;
}


#bodyblock3 .block4 .qtitle p.no {
	width: 100px;
	padding: 0.15em;
	background-color: #0C4DC4;
	border-radius: 6px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	vertical-align: top;
}
#bodyblock3 .block4 .qtitle p.question {
	width: 100%;
	margin-top: 0.5em;
	font-size: 20px;
	line-height: 1.3em;
	white-space: pre-line;
}
#bodyblock3 .block4 .qtitle p.question span {
	padding: 0.4em;
	color: #333;
	font-size: 16px;
	line-height: 2.5em;
	background-color: #fff;
	border: #090909 1px solid;
	border-radius: 6px;
}
#bodyblock3 .block4 p.qimg {
	width: 90%;
	margin: 1.5em auto 0.5em;
}
#bodyblock3 .block4 p.qimg img {
	width: 100%;
}
#bodyblock3 .block4 .answer {
	position: relative;
	margin-top: 2em;
}
#bodyblock3 .block4 .answer .answer_true {
    width: 110px;
    height: 110px;
    background: url(../../assets/img/common/question--maru.svg) no-repeat;
    background-size: contain;
    opacity: .3;
    position: absolute;
    left: calc(50% - 65px);
    top: -25px;
}
#bodyblock3 .block4 .answer .answer_false {
    width: 110px;
    height: 110px;
    background: url(../../assets/img/common/question--batsu.svg) no-repeat;
    background-size: contain;
    opacity: .3;
    position: absolute;
    left: calc(50% - 65px);
    top: -25px;
}
#bodyblock3 .block4 .answer .caption {
	margin: 2.5em 0 0.5em;
}
#bodyblock3 .block4 .answer .caption2 {
	margin: 1em 0 0.5em;
}

#bodyblock3 .block4 .answer .caption table, #bodyblock3 .block4 .answer .caption2 table {
	width: 100%;
	background-color: #fff;
	border-collapse: collapse;
}
#bodyblock3 .block4 .answer .caption table td.sub, #bodyblock3 .block4 .answer .caption2 table td.sub {
	width: 60px;
	padding: 0.5em;
	background-color: #E9EAEA;
	color: #747574;
	font-weight: bold;
	text-align: center;
}
#bodyblock3 .block4 .answer .caption table td.title, #bodyblock3 .block4 .answer .caption2 table td.title {
	width: auto;
	padding: 0.5em;
}

#bodyblock3 .block4 .item {
	display: inline-block;
	width: 94%;
	margin: 0.3em 0;
	background-color: #fff;
	border: #0C4DC4 2px solid;
	border-radius: 8px;
	box-shadow: 3px 3px 3px #ddd;
	font-size: 18px;
	font-weight: bold;
}
#bodyblock3 .block4 .item table {
	width: 100%;
	border-collapse: collapse;
}
#bodyblock3 .block4 .item table td.sub {
	width: 60px;
	background-color: #0C4DC4;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
#bodyblock3 .block4 .item div.a_true1 {
	margin-top: -4.85%;
    width: 60px;
    height: 60px;
	background: url(../../assets/img/common/question--maru.svg) no-repeat;
    background-size: contain;
    position: absolute;
    opacity: .6;
}
#bodyblock3 .block4 .item div.a_false1 {
	margin-top: -4.85%;
    width: 60px;
    height: 60px;
	background: url(../../assets/img/common/question--batsu.svg) no-repeat;
    background-size: contain;
    position: absolute;
    opacity: .6;
}
#bodyblock3 .block4 .item div.a_true2 {
	/*border: #999 1px solid;*/
	margin: -2em 0 0 72.5%;
    height: 60px;
    position: absolute;
    color: #f00;
    line-height: 1.25em;
    vertical-align: middle;
}

#bodyblock3 .block4 .item table td.title {
	width: auto;
	padding: 0.25em 1em;
}

#bodyblock3 .block4 .result {
	padding: 2em;
	background-color: #fff;
	text-align: center;
}
#bodyblock3 .block4 .result .title {
	color: #747574;
	font-size: 18px;
	font-weight: bold;
}
#bodyblock3 .block4 .result .score {
	margin: 0.25em 0 0.5em;
	padding: 1.25em;
	color: #FF6600;
	font-size: 30px;
	font-weight: bold;
	background-color: #F3F2E6;
}

.sp_none {
	display: none;
}









}

.correct {
	color: #E22330;
	background-color: #fff;
	border-radius: 6px;
}