/* CSS Document */
@charset "utf-8";
/* ----------------reset---------------- */
*{margin:0;padding:0}
a {text-decoration:none}
ul, ol, li {list-style:none}
img{vertical-align:top;border:0}
body{-webkit-text-size-adjust: 100%}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display: block}
/* ----------------set---------------- */
img{ max-width:100%;height:auto;width:auto\9; /* ie8 */}
html{font-family:'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;font-size:100%;line-height:1.5;background-color:#ffffff;color:#666}
html,body{height:100%}
main{padding-bottom:24px;clear:both}
a {color:#0071BC;width: 100%}
/*form button,button{cursor:pointer}*/
h1,h2,h3,h4,h5,h6{margin:0;padding:0}

/* resize matsuzaki */
h1 {font-size:32px;line-height:1}
h2 {font-size:24px;line-height:1.5}
h3 {font-size:16px;line-height:1}
h4 {font-size:14px;line-height:1}
h5 {font-size:12px;line-height:1}
h6 {font-size:10px;line-height:1}
/*
h1 {font-size:46px;line-height:1}
h2 {font-size:36px;line-height:1.5}
h3 {font-size:18px;line-height:1}
h4 {font-size:16px;line-height:1}
h5 {font-size:14px;line-height:1}
h6 {font-size:12px;line-height:1}
*/
/* resize end */
red{color:red}blue{color:blue}

.posright{float:right}.posleft{float:left}.clear{clear:both}
.textright{text-align:right}.textleft{text-align:left}.textcenter{text-align:center}
.block{display:block}.inline{display:inline}
.mar12{margin-bottom:12px}.mar24{margin-bottom:24px}
.printonly{display:none}


/* ----------------set(sp)---------------- */
.ponly, .wonly{display:none}
.sonly, .monly{display:none}

/* ----------------header---------------- */
header h1{margin-bottom:24px;padding:12px 3px 0;font-weight:normal;text-align:left}
header h1 span.small{font-size:28px;}
header h2{font-weight:normal;text-align:center}
header p{padding:0 5px 5px;font-size:18px;font-weight:normal;text-align:left}

/* ----------------category---------------- */
header.category p{color:#666;text-align:center;margin:48px auto;}
header.category .topicon{width:440px;max-width:100%;margin:0 auto;}
header.category .topicon img{margin:48px 4px 24px;width:100%;max-width:22%;}

nav.category{width:100%;margin:20px auto}
nav.category form{
	position:relative;margin:6px 0;padding:0;
	width:100%;height:112px;
	border-top:1px #ccc solid;border-bottom:1px #666 solid;
	cursor:pointer;
}
nav.category form img,nav.category form h2,nav.category form span{
	display:inline-block;position:absolute;padding:6px;
	color:#fff;
}
nav.category form img{
	top:0;left:0;
	width:54px;height:54px;
}
nav.category form h2{
	top:0;right:0;
}
nav.category form span{
	bottom:0;
	max-width:320px;
}


article.category{
    width:90%;margin:0 auto 24px;padding:12px;
    border:0;border-radius:10px;border-radius:10px;-moz-border-radius:10px;background:#eee;
    }
article.category h3{margin:12px 0;}

/* ----------------select----------------*/
header.select h1, header.select p{color:#fff}

nav.select{width:90%;margin:20px auto}
nav.select hr{
    width:100%;height:1px;border:0;margin:0;
    background: #666;
    background-image: -webkit-linear-gradient(left, #ccc, #666, #ccc);
    background-image:    -moz-linear-gradient(left, #ccc, #666, #ccc);
    background-image:     -ms-linear-gradient(left, #ccc, #666, #ccc)
    }
form.select{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
	display:block;margin:0 auto;padding:0;
    width:100%;height:80px;
    border:0;background:#fff;
    color:#666;font-size:20px;line-height:80px;font-weight:bold;text-align:left;text-indent:2em;
	cursor:pointer;
    }
form.select span.small{font-size:14px;}

/* ----------------start----------------*/
header.start{width:100%;height:100px}
header.start h1, header.start p{color:#666}
header.start p{padding-bottom:35px}

nav.start{width:100%;margin:20px auto 0;padding-top:50px;display:block;position:relative;}
nav.start div.circle{margin:3px auto;width:250px;height:250px;display:block;position:relative;z-index:40}
nav.start form{
    appearance: none;
    width:210px;height:210px;margin:5px auto;display:block;
    border:0;border-radius:50%;border-radius:50%;-moz-border-radius:50%;background:#fff;
    color:#666;font-size:36px;font-weight:bold;line-height:200px;text-align:center;
    z-index:50;
	cursor:pointer;
    }
nav.start p.circle{
    width:60px;height:60px;padding:0;position:absolute;top:3px;left:-3px;
    border:0;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
    color:#ffffff;font-size:18px;line-height:60px;text-align:center;
    z-index:100
    }
nav.start img{width:100%;max-width:980px;max-height:400px;margin:5px auto 20px;position:absolute;bottom:-20px;z-index:0;}


section article.start{width:90%;height:150px;margin:24px auto;}
section article.start h3{color:#666;font-size:20px;text-align:left;clear:both}
section article.start p{
    margin:24px auto;padding:15px 1em;
    border:0;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;background:#ddd;
    color:#333;font-size:16px;text-align:left;line-height:1.5}



/* ----------------question&answer----------------*/
header.ques, header.ans{width:100%;height:100px}
header.ques h1, header.ans h1{margin-bottom:24px;padding:12px 3px 0;color:#666;font-weight:normal;text-align:left}
div.progress{width:90%;height:50px;margin:24px auto;padding:0}
header.ques p, header.ans p{width:100%;font-size:14px;color:#aaa}
progress{
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
    width:100%;height:18px;padding:1px;
    border:none;background:#eee !important;
    border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
    box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.2) inset;
    font-size:14px;padding:0;background-size:auto;
    }
progress::-webkit-progress-bar {
    padding:1px;
    background:#eee;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
    box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.2) inset;
    }
progress::-moz-progress-bar{
    padding:1px;
    border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;background:#666;
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.4) inset
    }
progress::-webkit-progress-value{
    border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;background:#666;position:relative;
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.4) inset
    }
progress::-webkit-progress-value::after{
    content: '★';
    position: absolute;right:0;top:-3px;
    color: yellow;
    }

div.question, div.answer{width:90%;min-height:80px;margin:50px auto 20px}
.quesnum{
    width:15%;min-width:80px;height:60px;float:left;
    border:0;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;
    background:#666
    }
.quesnum h4{color:#fff;font-size:26px;line-height:60px;text-align:center}

p.ques{width:70%;margin:0;padding:0;float:right;color:#666;font-size:16px;text-align:left}
p.ans{width:70%;margin:0;padding:8px 0;float:right;color:#cd1c46;font-size:30px;text-align:center}

section.ques, section.answer{width:90%;margin:20px auto;clear:both}
section.answer article{margin:12px 0;width:100%}
section.ques form{cursor:pointer;}
section.ques form,article.ans button{
    -webkit-appearance: none;
    margin:12px auto;padding:15px 1em;display:block;
    border:0;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;background:#ddd;
    color:#fff;font-size:16px;text-align:left;line-height:1.5;
    }
article.ans button{
	width:100%;
}
article.ans button, article.comment p{margin-bottom:20px}
article.answer h3{margin:12px 0;color:#666;font-size:20px;text-align:left;clear:both}
article.comment p{
    margin:auto;padding:15px 1em;display:block;
    border:0;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;background:#ddd;
    color:#333;font-size:16px;text-align:left;line-height:1.5
    }

/* ----------------re----------------*/
nav.start.re button{font-size:48px}
p.restart{margin:-25px auto 0;text-align:center;z-index:20}

.quesnum.re h4{color:#fff;font-size:24px;line-height:1;margin:8px;text-align:center}
.quesnum.re h5{margin:8px;color:#fff;font-size:18px;text-align:center}

div.score{width:90%;margin:25px auto;}
div.score table{width:100%;background:#999;clear:both}
div.score table th{text-align:center}
div.score table td{padding:12px 0.5em;font-size:16px;background:#fff;color:#333;text-align:left}



/* ----------------c1~c4 color----------------- */
/*c1:#cd1c46;c2:#562560;c3:#17a2c8;c4:#ea5439;*/
.category form{background:#999}
.category form.c1{background:#cd1c46}
.category form.c2{background:#562560}
.category form.c3{background:#17a2c8}
.category form.c4{background:#ea5439}
.category form.c5{background:#385960}

.pass_submit .box.c1{background:rgba(205,28,70,.3);}
.pass_submit .box.c2{background:rgba(86,37,96,.3);}
.pass_submit .box.c3{background:rgba(23,162,200,.3);}
.pass_submit .box.c4{background:rgba(234,84,57,.3);}


header.c1, .quesnum.c1, section.ques form.c1, section.c1.answer .ans button{background:#cd1c46}
header.c2, .quesnum.c2, section.ques form.c2, section.c2.answer .ans button{background:#562560}
header.c3, .quesnum.c3, section.ques form.c3, section.c3.answer .ans button{background:#17a2c8}
header.c4, .quesnum.c4, section.ques form.c4, section.c4.answer .ans button{background:#ea5439}
.quesnum.c5, section.ques form.c5, section.c5.answer .ans button{background:#385960}

nav.c1.start p.circle{background:#cd1c46;border:1px #cd1c46 solid}
nav.c2.start p.circle{background:#562560;border:1px #562560 solid}
nav.c3.start p.circle{background:#17a2c8;border:1px #17a2c8 solid}
nav.c4.start p.circle{background:#ea5439;border:1px #ea5439 solid}
nav.c5.start p.circle{background:#385960;border:1px #385960 solid}

header.start.c1, header.ques.c1,
header.start.c2, header.ques.c2,
header.start.c3, header.ques.c3,
header.start.c4, header.ques.c4,
header.start.c5, header.ques.c5{background-color:#fff}

header.start.c1 h1, header.start.c1 p, header.ques.c1 h1, section.c1.answer h3, div.score.c1 td num{color:#cd1c46}
header.start.c2 h1, header.start.c2 p, header.ques.c2 h1, section.c2.answer h3, div.score.c2 td num{color:#562560}
header.start.c3 h1, header.start.c3 p, header.ques.c3 h1, section.c3.answer h3, div.score.c3 td num{color:#17a2c8}
header.start.c4 h1, header.start.c4 p, header.ques.c4 h1, section.c4.answer h3, div.score.c4 td num{color:#ea5439}
header.start.c5 h1, header.start.c5 p, header.ques.c5 h1, section.c5.answer h3, div.score.c5 td num{color:#385960}

nav.c1.start form{border:1px #cd1c46 solid;color:#cd1c46}
nav.c2.start form{border:1px #562560 solid;color:#562560}
nav.c3.start form{border:1px #17a2c8 solid;color:#17a2c8}
nav.c4.start form{border:1px #ea5439 solid;color:#ea5439}
nav.c5.start form{border:1px #385960 solid;color:#385960}

/*nav.start button.hover, section.ques form.c1 button.hover{color:#fff;background:#ffaa22}*/

progress.c1::-moz-progress-bar{background:#cd1c46}
progress.c2::-moz-progress-bar{background:#562560}
progress.c3::-moz-progress-bar{background:#17a2c8}
progress.c4::-moz-progress-bar{background:#ea5439}
progress.c5::-moz-progress-bar{background:#385960}

progress.c1::-webkit-progress-value{background:#cd1c46}
progress.c2::-webkit-progress-value{background:#562560}
progress.c3::-webkit-progress-value{background:#17a2c8}
progress.c4::-webkit-progress-value{background:#ea5439}
progress.c5::-webkit-progress-value{background:#385960}


/* ----------------guide----------------*/
section.guide{width:97%;padding:12px;}
section.guide h3{padding:5px 3px;font-size:36px;line-height:36px;background:#666;color:#fff;font-weight:normal;}
section.guide p{padding:12px 0.5em;font-size:20px;line-height:1.6;color:#666;}
section.guide img{padding:12px 0;max-width:350px;width:100%;height:100%;}
section.guide hr{width:97%;height:0;padding:0 12px;border:0;border-bottom:1px #666 dashed;}
form.guide{
    -webkit-appearance: none;
    width:100%;max-width:320px;height:60px;margin:24px auto;padding:0;display:block;
    border:0;box-shadow:1px 1px 0px 0 rgba(0, 0, 0, 0.4);background:#666;
    color:#fff;font-size:20px;line-height:60px;font-weight:bold;text-align:center;
	cursor:pointer;
    }
form.guide:hover{filter:alpha(opacity=80);opacity:0.8}


/* ----------------banner----------------*/
a.banner{width:300px;height:100px;margin:0 9px 12px;border:1px #333 solid;}
a.banner:hover img{filter:alpha(opacity=80);opacity:0.8}


/* ----------------back&next---------------- */
form.back, form.next{
    -webkit-appearance: none;
    width:32%;height:40px;margin:15px 0 15px 15px;display:block;
    border:0;box-shadow:1px 1px 0px 0 rgba(0, 0, 0, 0.4);background:#666;
    color:#fff;font-size:15px;line-height:40px;font-weight:bold;text-align:center;
	cursor:pointer;
    }
form.back:hover, form.next:hover{filter:alpha(opacity=80);opacity:0.8}
form.next{float:right;margin:0px 15px 15px 0;}

/* ----------------footer---------------- */
footer{width:100%;height:24px;margin:0;margin-top:48px;color:#666;font-size:10px;text-align:center;clear:both}


/*c5*/
.pass_submit{
    display:block;margin:0 auto;
    width:100%;height:auto;
}
.pass_submit h3{text-align:center;}
.pass_submit .box{
    margin:4px auto;padding-bottom:4px;
    width:90%;
}
.pass_submit label{
    display:block;margin:0.5em auto;
    font-size:18px;
}
.pass_submit label span{
    display:inline-block;
    width:5em;margin:0.5em 0.2em;
}
.pass_submit input[type="text"]{
    padding:0.4em;
    width:4em;font-size:18px;
}
.pass_submit input[type="submit"]{
    -webkit-appearance: none;-moz-appearance: none;appearance: none;
    display:block;margin:36px auto;padding:0.5em;width:5em;clear:both;
    color:#fff;font-size:18px;background:#666;
    border:0;border-radius:10px;border-radius:10px;-moz-border-radius:10px;
    cursor:pointer;
}

/* ----------------768px---------------- */
@media screen and (min-width : 768px){
    .wonly{display:block}
    .monly{display:none}

	nav.category form img{width:100px;height:100px;}
	nav.category form span{max-width:none;right:0;}
    form.select span.small{font-size:20px;}
    /* ----------------start----------------*/
    nav.start{height:400px;margin:20px auto 60px;padding-top:50px;}
    nav.start div.circle{margin:3px auto;width:400px;height:300px}
    nav.start form{width:300px;height:300px;line-height:300px;margin:5px auto;font-size:58px;}
    nav.start p.circle{width:100px;height:100px;padding:0;font-size:38px;line-height:100px}
    nav.c1.start form{border:2px #cd1c46 solid;color:#cd1c46}
    nav.c2.start form{border:2px #562560 solid;color:#562560}
    nav.c3.start form{border:2px #17a2c8 solid;color:#17a2c8}
    nav.c4.start form{border:2px #ea5439 solid;color:#ea5439}
    /* ----------------question&answer----------------*/
    p.ques{width:80%}
    p.ans{width:84%}
    /* ----------------banner----------------*/
    a.banner{width:300px;height:250px;margin:0 9px 6px;border:1px #333 solid;}
    a.banner:hover{filter:alpha(opacity=80);opacity:0.8}


    /* ----------------back&next---------------- */
    form.back, form.next{width:32%}

    /* ----------------footer----------------*/
    footer{position:relative;bottom:0px;}

    /*c5*/
    .pass_submit .box{margin:4px;width:23.9%;display:block;float:left;}
    .pass_submit label{font-size:16px;}
    .pass_submit input[type="text"]{font-size:16px;width:2em;}
    .pass_submit p.alert{color:#ed6362;text-align:center;font-weight:bold;}

}
/* ----------------1024px---------------- */
@media screen and (min-width : 1024px) {
    html {font-size:16px}
    .ponly{display:block}
    .sonly{display:none}
    .pagewrap{width:980px;height:auto !important;height:100%;min-height:100%;margin:0 auto;padding:0;padding-bottom:12px;
        background-color:#fff;position:relative;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
           -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
                box-shadow: 0 0 10px rgba(0, 0, 0, .3)
       }
     h1 {font-size:46px;line-height:1}
     h2 {font-size:36px;line-height:1.5}
     h3 {font-size:18px;line-height:1}
     h4 {font-size:16px;line-height:1}
     h5 {font-size:14px;line-height:1}
     h6 {font-size:12px;line-height:1}
    header h1 span.small{font-size:48px;}
    form.select:hover{background:#ffaa22;color:#fff}
    nav.start form:hover{background:#ffaa22;color:#fff}
    section.ques form.c1:hover{background:#ffaa22;color:#fff}
    section.ques form.c2:hover{background:#ffaa22;color:#fff}
    section.ques form.c3:hover{background:#ffaa22;color:#fff}
    section.ques form.c4:hover{background:#ffaa22;color:#fff}
    section.ques form.c5:hover{background:#ffaa22;color:#fff}

    .pass_submit input[type="text"]{font-size:16px;width:4em;}

}