@charset "utf-8";
/* CSS Document */


/* ================================================
Classes
------------------------------------------------ */

.clearfix:before,
.clearfix:after{
	content:"";display:table;
}
.clearfix:after{ clear:both; }
.clearfix{ *zoom:1; }

.leftbox{ float:left; display:inline; }
.rightbox{ float:right; display:inline; }

.must{ font-weight:bold; color:#f80;}

.align-c{ text-align:center; }
.align-l{ text-align:left; }
.align-r{ text-align:right; }


/* ================================================
Common Style
------------------------------------------------*/
html{
}
body{
	font-family:'Lucida Grande', 'ヒラギノ角ゴ ProN W4', 'Hiragino Kaku Gothic ProN', Meiryo, メイリオ, sans-serif;
}

a{ color:#07f; }
a:visited{ color:#05c;}
a:hover{ color:#39f;}

img{ vertical-align:top; }

/*
	10px = 77%
	11px = 85%
	12px = 93%
	13px = 100%
	14px = 108%
	15px = 116%
	16px = 123.1%
	17px = 131%
	18px = 138.5%
	19px = 146.5%
	20px = 153.9%
	21px = 161.6%
	22px = 167%
	23px = 174%
	24px = 182%
	25px = 189%
	26px = 197%
*/

/* ================================================
Style
------------------------------------------------*/


header h1{
	height:144px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
header h1#ss01{ background:url("../img/series/01head.jpg") no-repeat 50% 0;}
header h1#ss02{ background:url("../img/series/02head.jpg") no-repeat 50% 0;}
header h1#ss03{ background:url("../img/series/03head.jpg") no-repeat 50% 0;}
header h1#ss04{ background:url("../img/series/04head.jpg") no-repeat 50% 0;}
header h1#ss05{ background:url("../img/series/05head.jpg") no-repeat 50% 0;}
header h1#ss06{ background:url("../img/series/06head.jpg") no-repeat 50% 0;}
header h1#ss07{ background:url("../img/series/07head.jpg") no-repeat 50% 0;}
header h1#ss08{ background:url("../img/series/08head.jpg") no-repeat 50% 0;}
header h1#ss09{ background:url("../img/series/09head.jpg") no-repeat 50% 0;}
header h1#ss10{ background:url("../img/series/10head.jpg") no-repeat 50% 0;}
header h1#ss11{ background:url("../img/series/11head.jpg") no-repeat 50% 0;}
header h1#ss12{ background:url("../img/series/12head.jpg") no-repeat 50% 0;}
header h1#ss13{ background:url("../img/series/13head.jpg") no-repeat 50% 0;}
header h1#ss14{ background:url("../img/series/14head.jpg") no-repeat 50% 0;}
header h1#ss15{ background:url("../img/series/15head.jpg") no-repeat 50% 0;}
header h1#ss16{ background:url("../img/series/16head.jpg") no-repeat 50% 0;}
header h1#ss17{ background:url("../img/series/17head.jpg") no-repeat 50% 0;}
header h1#ss18{ background:url("../img/series/18head.jpg") no-repeat 50% 0;}
header h1#ss19{ background:url("../img/series/19head.jpg") no-repeat 50% 0;}
header h1#ss20{ background:url("../img/series/20head.jpg") no-repeat 50% 0;}
header h1#ss21{ background:url("../img/series/21head.jpg") no-repeat 50% 0;}
header h1#ss22{ background:url("../img/series/22head.jpg") no-repeat 50% 0;}
header h1#ss23{ background:url("../img/series/23head.jpg") no-repeat 50% 0;}
header h1#ss24{ background:url("../img/series/24head.jpg") no-repeat 50% 0;}
header h1#ss25{ background:url("../img/series/25head.jpg") no-repeat 50% 0;}
header h1#ss26{ background:url("../img/series/26head.jpg") no-repeat 50% 0;}
header h1#ss27{ background:url("../img/series/27head.jpg") no-repeat 50% 0;}
header h1#ss28{ background:url("../img/series/28head.jpg") no-repeat 50% 0;}
header h1#ss29{ background:url("../img/series/29head.jpg") no-repeat 50% 0;}
header h1#ss30{ background:url("../img/series/30head.jpg") no-repeat 50% 0;}
header h1#ss31{ background:url("../img/series/31head.jpg") no-repeat 50% 0;}
header h1#ss32{ background:url("../img/series/32head.jpg") no-repeat 50% 0;}


section#questionArea{
	background:url("../img/series/bg_q.png") repeat 50% 0;
}

section#questionArea article{
	width:628px;
	margin:0 auto;
}

section#questionArea article h2{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background:url("../img/series/question.png") no-repeat 50% 0;
	width:240px;
	height:59px;
	margin:0 auto;
}

section#questionArea article .author{
	background-color:#fff;
	border-radius:8px;  
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	margin-bottom:10px; 
}

section#questionArea article .author .leftbox{
	display:inline-block;
	width:131px;
	float:left;
	margin-left:17px;
	padding-top:17px;
	padding-bottom:17px;
}

section#questionArea article .author .rightbox{
	display:inline-block;
	width:446px;
	float:right;
	margin-right:17px;
	padding-top:36px;
}

section#questionArea article .author p.name{
	color:#222;
	line-height:30px;
	margin-bottom:19px;
	font-weight:bold;
}

section#questionArea article .author p.name span{
	padding:0 10px;
	color:#265cff;
}

section#questionArea article .author p.done{
	height:63px;
	background:#feddd0 url("../img/series/ic_finish.png") no-repeat 14px 16px;
	padding-left:54px;
	line-height:66px;
	font-weight:bold;
	color:#f94906;
}

section#questionArea article .question{
	background:url("../img/series/bg_fuki_q.png") no-repeat 0 0;
	padding-top:19px;
}

section#questionArea article .question .inner{
	color:#fff;
	background-color:#6967cb;
	border-radius:8px;  
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	margin-bottom:10px;
}

section#questionArea article .question .inner h3{
	padding:20px;
	line-height:1.7em;
} 

section#answerArea{
	background:url("../img/series/bg_a.png") repeat 50% 0;
}

section#answerArea .giza{
	background:url("../img/series/line.png") repeat-x 50% 100%;
}

section#answerArea article{
	width:628px;
	margin:0 auto;
}


section#answerArea article h2{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background:url("../img/series/answer.png") no-repeat 50% 0;
	width:240px;
	height:59px;
	margin:0 auto;
}


section#answerArea article .author{
	background-color:#fff;
	border-radius:8px;  
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	margin-bottom:10px; 
}

section#answerArea article .author .leftbox{
	display:inline-block;
	width:446px;
	float:left;
	margin-left:17px;
	padding-top:36px;
}

section#answerArea article .author .rightbox{
	display:inline-block;
	width:131px;
	float:right;
	margin-right:17px;
	padding-top:17px;
	padding-bottom:17px;
}

section#answerArea article .author p.name{
	text-align:right;
	color:#222;
	line-height:30px;
	margin-bottom:19px;
	font-weight:bold;
}

section#answerArea article .author p.name span{
	padding:0 10px;
	color:#265cff;
}

section#answerArea article .author p.best{
	height:63px;
	background:#eee755 url("../img/series/ic_best.png") no-repeat 14px 16px;
	padding-left:54px;
	line-height:66px;
	font-weight:bold;
	color:#f94906;
}

section#answerArea article .answer{
	background:url("../img/series/bg_fuki_a.png") no-repeat 0 0;
	padding-top:19px;
}

section#answerArea article .answer .inner{
	color:#fff;
	background-color:#419241;
	border-radius:8px;  
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	margin-bottom:10px;
}

section#answerArea article .answer .inner p{
	padding:40px;
	line-height:1.7em;
}

section#answerArea article .answer .inner ul{
	text-align:center;
	padding-bottom:37px;
}

section#answerArea article .answer .inner ul li{
	margin-bottom:20px;
}

section#answerArea ul.pagenav{
	text-align: center;
	padding: 30px 0;
}

section#answerArea ul.pagenav li{
	display: inline-block;
	margin:0 10px 20px;
}

section#seriesArea{
	background-color:#C9CF49;
}

section#seriesArea article{
	width:660px;
	margin:0 auto;
}

section#seriesArea article h2{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background:url("../img/series/series.jpg") no-repeat 50% 0;
	height:172px;
	margin-bottom:40px;
}

section#seriesArea article ul{
}

section#seriesArea article ul li{
	display:inline-block;
	margin:0 6px 12px;
}

footer{
	color:#fff;
	background:#333 url("../img/series/bg_footer.gif") no-repeat 50% 0;
}

footer dl{
	text-align:center;
	margin-bottom:24px;
}

footer dl dt{
	margin-bottom:10px;
}

footer p{
	padding:0 0 30px;
	text-align:center;
}

footer a{ color:#fff;}
footer a:visited{ color:#fff;}
footer a:hover{ color:#ff7;}


@media screen and (min-width: 801px){
	.con-pc{
		display:block;
	}
	.con-sp{
		display:none;
	}
	img{
	}
	body{
		min-width:800px;
	}
	section#questionArea{
		padding-top:50px;
		padding-bottom:84px;
	}

	section#questionArea article h2{
		margin-bottom:50px;
	}

	section#questionArea article .author p.name{
		font-size:182%;
	}

	section#questionArea article .author p.done{
		font-size:182%;
	}

	section#questionArea article .question .inner h3{
		font-size:182%;
	}

	section#answerArea .giza{
		padding-top:50px;
		padding-bottom:100px;
	}

	section#answerArea article h2{
		margin-bottom:50px;
	}


	section#answerArea article .author p.name{
		font-size:182%;
	}

	section#answerArea article .author p.best{
		font-size:174%;
	}

	section#answerArea article .answer .inner p{
		font-size:161.6%;
	}

	section#seriesArea article{
		padding-top:60px;
		padding-bottom:100px;
	}
	footer{
		padding-top:106px;
	}

	footer dl dt img{
		width:200px;
		height:auto;
	}

	footer dl dd{
		font-size:123.1%;
	}
}

@media screen and (max-width: 800px){
	.con-pc{
		display:none;
	}
	.con-sp{
		display:block;
	}
	img{
	}
	body{
		width:750px;
	}

	section#questionArea{
		padding-top:50px;
		padding-bottom:84px;
	}

	section#questionArea article h2{
		margin-bottom:50px;
	}

	section#questionArea article .author p.name{
		font-size:1.6rem;
	}

	section#questionArea article .author p.done{
		font-size:1.8rem;
	}

	section#questionArea article .question .inner h3{
		font-size:1.8rem;
	}

	section#answerArea .giza{
		padding-top:70px;
		padding-bottom:100px;
	}

	section#answerArea article h2{
		margin-bottom:50px;
	}


	section#answerArea article .author p.name{
		font-size:1.6rem;
	}

	section#answerArea article .author p.best{
		font-size:1.6rem;
	}

	section#answerArea article .answer .inner p{
		font-size:1.5rem;
	}

	section#seriesArea article{
		padding-top:60px;
		padding-bottom:100px;
	}

	footer{
		padding-top:59px;
	}
	footer dl dd{
		font-size:1.4rem;
	}
	footer p{
		font-size:1.2rem;
	}
}

@media screen and (max-width: 640px){
	.con-pc{
		display:none;
	}
	.con-sp{
		display:block;
	}
	img{
	}
}
