/* QUIZ STYLES */
/* Styles to prettify the quiz page */

strong { font-weight: bold; }
em { font-style: italic; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
ol li { list-style-type: decimal; margin-left: 20px; }

.button {
    width: 200px;
    padding: 7px 40px;
    margin:0 auto;
    color:#fff;
    font-size:107%;
    font-weight:bold;
    background-color:rgba(12,59,75,1);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-decoration: none;
}
.button:hover {
    background-color:darkslategray;
}

.startQuiz {
    margin-top: 40px;
}

.tryAgain {
    float: none;
    margin: 20px 0;
}

/* clearfix */
.quizArea, .quizResults {
    zoom: 1;
}
.quizArea:before, .quizArea:after, .quizResults:before, .quizResults:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
}
.quizArea:after, .quizResults:after {
    clear: both;
}

.questionCount {
    background-color:rgba(12,59,75,1);
    padding:5px 0 5px 10px;
    margin:0 0 2% 0;
    font-size: 125%;
    font-weight:bold;
    line-height:200%;
    border-radius:8px/8px;
    color:#FFF;
}

ol.questions {
    padding:0 0 20px 0;
}
ol.questions li {
    margin: 5px;
    line-height:150%;
}
ol.questions li label {
    margin: -1.6em 0 0 25px;
    display:block;
}
.quizArea ol p{
    font-size:115%!important;
    margin:15px 0 15px 15px;
    color:rgba(12,59,75,1);
    font-weight:bold;
}
ul.answers {
    margin-left: 5px;
    margin-bottom: 15px;
    padding:0 0 10px 0;
}

ul.responses li {
    margin: 10px 20px 20px;
}
ul.responses li p span {
    display: block;
    font-weight: bold;
    font-size: 18px;
}
.complete ul.answers li.correct, ul.responses li.correct p span {
    color: #FF2337;
    font-weight: bold;
}
ul.responses li.incorrect p span {
    color: #B5121B;
}

.quizResults {
    padding:0 0 20px 0;
}

.quizResultsCopy {
    clear: both;
    margin-top: 20px;
}




/*PC版*/
@media screen and (min-width:1025px){

.result-text{font-size:250%; font-weight:bold; text-align:center; margin:40px 0 25px 0;}
#result-background01{width:600px; height:380px; margin:0 auto 40px auto; background:url(../images/kekka01.jpg)left top no-repeat #DDD;}
#result-background02{width:600px; height:380px; margin:0 auto 40px auto; background:url(../images/kekka02.jpg)left top no-repeat #DDD;}
#result-background03{width:600px; height:380px; margin:0 auto 40px auto; background:url(../images/kekka03.jpg)left top no-repeat #DDD;}
#result-background04{width:600px; height:380px; margin:0 auto 40px auto; background:url(../images/kekka04.jpg)left top no-repeat #DDD;}
#result-contents{padding:60px 30px}
.result-head{font-size:160%; text-align:center; margin:0 0 25px 0;}
.result-your{margin:0 0 25px 0;}
.result-points{font-size:180%; color:#FF4A4A;}
.result-comment{font-size:130%; text-align:center; margin:0 20px;}

}
/*TB版よこ*/
@media screen and (min-width:781px) and ( max-width:1024px){

.result-text{font-size:250%; font-weight:bold; text-align:center; margin:30px 0 20px 0;}
#result-background01{width:480px; height:288px; margin:0 auto 40px auto; background:url(../images/kekka01.jpg)left top no-repeat #DDD; background-size:480px 288px;}
#result-background02{width:480px; height:288px; margin:0 auto 40px auto; background:url(../images/kekka02.jpg)left top no-repeat #DDD; background-size:480px 288px;}
#result-background03{width:480px; height:288px; margin:0 auto 40px auto; background:url(../images/kekka03.jpg)left top no-repeat #DDD; background-size:480px 288px;}
#result-background04{width:480px; height:288px; margin:0 auto 40px auto; background:url(../images/kekka04.jpg)left top no-repeat #DDD; background-size:480px 288px;}
#result-contents{padding:40px 30px}
.result-head{font-size:160%; text-align:center; margin:0 0 15px 0;}
.result-your{margin:0 0 25px 0;}
.result-points{font-size:180%; color:#FF4A4A;}
.result-comment{font-size:130%; text-align:center; margin:0 20px;}

}
/*TB版たて*/
@media screen and (min-width:481px) and ( max-width:780px){

.result-text{font-size:250%; font-weight:bold; text-align:center; margin:30px 0 20px 0;}
#result-background01{width:360px; height:228px; margin:0 auto 40px auto; background:url(../images/kekka01.jpg)left top no-repeat #DDD; background-size:360px 228px;}
#result-background02{width:360px; height:228px; margin:0 auto 40px auto; background:url(../images/kekka02.jpg)left top no-repeat #DDD; background-size:360px 228px;}
#result-background03{width:360px; height:228px; margin:0 auto 40px auto; background:url(../images/kekka03.jpg)left top no-repeat #DDD; background-size:360px 228px;}
#result-background04{width:360px; height:228px; margin:0 auto 40px auto; background:url(../images/kekka04.jpg)left top no-repeat #DDD; background-size:360px 228px;}
#result-contents{padding:30px}
.result-head{font-size:140%; text-align:center; margin:0 0 15px 0;}
.result-your{margin:0 0 25px 0;}
.result-points{font-size:160%; color:#FF4A4A;}
.result-comment{font-size:110%; text-align:center; margin:0 20px;}

}
/*スマホ版レイアウト*/
@media screen and (max-width:480px){

.result-text{font-size:200%; font-weight:bold; text-align:center; margin:25px 0 15px 0;}
#result-background01{width:300px; height:190px; margin:0 auto 40px auto; background:url(../images/kekka01.jpg)left top no-repeat #DDD; background-size:300px 190px;}
#result-background02{width:300px; height:190px; margin:0 auto 40px auto; background:url(../images/kekka02.jpg)left top no-repeat #DDD; background-size:300px 190px;}
#result-background03{width:300px; height:190px; margin:0 auto 40px auto; background:url(../images/kekka03.jpg)left top no-repeat #DDD; background-size:300px 190px;}
#result-background04{width:300px; height:190px; margin:0 auto 40px auto; background:url(../images/kekka04.jpg)left top no-repeat #DDD; background-size:300px 190px;}
#result-contents{padding:25px 15px}
.result-head{font-size:140%; text-align:center; margin:0 0 12px 0;}
.result-your{margin:0 0 25px 0;}
.result-points{font-size:160%; color:#FF4A4A;}
.result-comment{font-size:100%; text-align:center; margin:0 20px;}

}

/*Twitter*/
a.twit{
display:block;
width:70%;
margin:0 15% 30px 15%;
padding:15px 0;
color:#FFF;
font-weight:bold;
text-align:center;
background:url(/common/svgicon/twitter.svg)8px center no-repeat;
background-color:rgba(12,59,75,1);
background-size:38px 38px;
border-radius:8px/8px;
}

/*link*/
a.terminal{
display:block;
width:70%;
margin:0 15% 70px 15%;
padding:15px 0;
color:#FFF;
font-weight:bold;
text-align:center;
background-color:rgba(12,59,75,1);
border-radius:8px/8px;
}