@charset "utf-8";

/* structure
----------------------------------------------------------------------------------*/
/*width*/
div#container{width:990px;}
div#header,
div#contents,
div#footer{width:97%;}
h1,h2{width:100%;}


div#container{
	margin:30px auto;
	padding:0;
	border:5px #b26e00 solid;
	background:#ffffff url(../img/deco_body.png) repeat-y center center;
}
div#header,
div#contents,
div#footer  {margin:0 auto;padding:0;text-align:center;}

div#header  {min-height:140px;background:url(/trivia/common/img/deco_top.png) no-repeat center top;}
div#footer  {min-height:140px;background:url(/trivia/common/img/deco_bottom.png) no-repeat center bottom;}

div#container,
div#header,
div#footer{
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
}

@media only screen and (max-width: 990px){
	div#container{
	width:97%;
	padding:10px;
	background:#FFFFFF;
	}
	div#header{background:url(/trivia/common/img/deco_lt.png) no-repeat left top,url(/trivia/common/img/deco_rt.png) no-repeat right top;}
	div#footer{background:url(/trivia/common/img/deco_lb.png) no-repeat left bottom,url(/trivia/common/img/deco_rb.png) no-repeat right bottom;}
}
@media only screen and (max-width: 480px){
	div#header,
	div#contents,
	div#footer  {width:100%;}
}

/* header
----------------------------------------------------------------------------------*/
div#header h1{
	padding:70px 0 0;
	text-align:center;
}


/* contents
----------------------------------------------------------------------------------*/

div#contents h2.ttl {
	position:relative;
	margin:-40px auto 10px;
	background:url(/trivia/common/img/ttl_torivia.png) no-repeat center top;
	z-index:999;
}
div#contents h2.ttl2{
	margin-bottom:10px;
	background:url(/trivia/common/img/ttl_way.png) no-repeat center center;
}
div#contents h2 p{
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
div#contents p{
	text-align:center;
}



/* btn
----------------------------------------------------------------------------------*/
/*width*/
div#contents ul#btn,
div#contents ul#btn li a,
div#footer{width:100%;}
div#contents ul li{width:254px;}

div#contents ul{
	margin:-90px 0 30px 5px;
	text-align:center;
}
div#contents ul li,
div#contents ul li a{
	height:276px;
}
div#contents ul li{
	display:inline-block;
	margin:0 0 0 -50px;
	vertical-align:top;
	zoom:1;
}
div#contents ul li a{
	display:block;
	text-indent:100%;
    white-space:nowrap;
    overflow: hidden;
}

div#contents ul li.beginer a{background:url(/trivia/common/img/btn1.png) center center;}
div#contents ul li.expart  a{background:url(/trivia/common/img/btn2.png) center center;}
div#contents ul li.expart2 a{background:url(/trivia/common/img/btn3.png) center center;}
div#contents ul li.other   a{background:url(/trivia/common/img/btn4.png) center center;}
div#contents ul li.beginer a:hover{background:url(/trivia/common/img/btn1o.png) center center;}
div#contents ul li.expart  a:hover{background:url(/trivia/common/img/btn2o.png) center center;}
div#contents ul li.expart2 a:hover{background:url(/trivia/common/img/btn3o.png) center center;}
div#contents ul li.other   a:hover{background:url(/trivia/common/img/btn4o.png) center center;}

@media only screen and (max-width: 990px){
	div#contents p.outline{
		margin-bottom:90px;
	}
	div#contents ul li{
	margin-top:-90px;
	}
	div#contents ul li a{position:relative;}
	div#contents ul li.beginer a{z-index:400;}
	div#contents ul li.expart  a{z-index:300;}
	div#contents ul li.expart2 a{z-index:200;}
	div#contents ul li.other   a{z-index:100;}
	div#contents ul li.beginer a:hover,
	div#contents ul li.expart  a:hover,
	div#contents ul li.expart2 a:hover,
	div#contents ul li.other   a:hover{z-index:500;}
}

/* footer
----------------------------------------------------------------------------------*/
address{
	padding-top:30px;
	font-size:87.5%;
}