@charset "UTF-8";

/* layout.css */

/* index
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉

	[0] 共通
	[1] main-flash
	[2] header
	―――――――――――――――
		├ logo
		├ h-navi
		├ search
		├ font-size
		├ g-navi
		└ banner-area

	[3] top-contents
	―――――――――――――――
		├ news
		│	├ news category
		│	├ news linkcolor
		│	├ other-news
		│	└ menu(一覧/RSS)
		└ challenge
			├ tab-challenge
			├ tab-inner
			└ menu(過去の問題)

	[4] sub-contents
	[5] side
	[6] footer-contents
	[7] sub-footer-contents
	[8] footer

┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */


/* ┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉
	[0] 共通
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */

#header,
#top-contents,
#sub-contents,
#footer-contents,
#sub-footer-contents,
#footer{
	clear: both;
	width: 850px;
	margin: 0 auto;
}

/* ┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉
	[1] main-flash
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */

#main-flash{
	clear: both;
	width: 900px;
	margin: 0 auto;
	text-align: center;
}

.main-img{
	padding-top: 24px;
}

/* ┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉
	[2] header
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */

#header{
	line-height: 0;
	font-size: 1px;
}

/* logo */
.logo{
	width: auto;
	float: left;
	margin-top: 25px;
	margin-right: 305px;
	margin-bottom: 24px;
}

/* h-navi */
.h-navi{
	display: inline;
	float: left;
	width: auto;
	margin-top: 39px;
	margin-right: 6px;
}

.h-navi li{
	display: inline;
	float: left;
	width: auto;
	margin-right: 10px;
}

/* font-size */
#font-size{
	float: right;
	width: 117px;
	margin-top: 38px;
}

#font-size dt{
	float: left;
	width: 59px;
}

#font-size ul li{
	display: inline; /* For IE Only */
	float: left;
	width: auto;
}

#font-size ul li a{
	display: block;
	overflow: hidden;
	text-indent: -10000px;
}

#size-s a{
	width: 18px;
	height: 18px;
	margin-right: 2px;
}

#size-m a{
	width: 18px;
	height: 18px;
	margin-right: 2px;
}

#size-l a{
	width: 18px;
	height: 18px;
}

/* g-navi */
#g-navi{
	clear: both;
	width: 850px;
}

#g-navi li{
	display: inline;
	float: left;
}

#g-navi li img{
	margin-bottom: 25px;
}

/* banner-area */

.banner-area{
	display: inline-block;
	clear: both;
	margin-bottom: 25px;
	padding: 5px 5px 5px 0;
	background-color: #eee;
}

.banner-area:after{
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: ".";
}

/* Hides from IE-mac \*/
* html .banner-area {height: 1%;}
.banner-area {display: block;}
/* End hide from IE-mac */

.banner-area li{
	float: left;
	width: auto;
	margin-left: 5px;
}


/* ┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉
	[3] top-contents
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */

/* news */

#top-contents #news{
	float: left;
	width: 450px;
	font-size:93%;
}

#news h4{
	clear: both;
	margin-top: 20px;
	margin-bottom: 12px;
}

#news dl{
	display: inline-block;
	clear: both;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-bottom: 2px;
	background: url(/img/line01.gif) repeat-x bottom left;
}

#news dl:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html #news dl {height: 1%;}
#news dl {display: block;}
/* End hide from IE-mac */

#news dl dt{
	float: left;
	width: auto;
	padding-top: 2px;
}

/* news category */
#news dl dd.category{
	float: left;
	width: 43px;
	margin: 0 8px 2px 8px;
	padding: 2px 0;
	font-size: 77%;
	text-align: center;
}

#news dl dd.bg-black{ background: #000; color: #fff; }
#news dl dd.bg-gray{ background: #808080; color: #fff; }
#news dl dd.bg-lightgrey{ background: #ccc; }
#news dl dd.bg-darkblue{ background: #004ec4; color: #fff; }
#news dl dd.bg-lightblue{ background: #d6ebf9; }
#news dl dd.bg-darkgreen{ background: #458918; color: #fff; }
#news dl dd.bg-lightgreen{ background: #9eca40; }
#news dl dd.bg-yellow{ background: #ffd700; }
#news dl dd.bg-orange{ background: #ffa500; }
#news dl dd.bg-darkred{ background: #8b0000; color: #fff; }
#news dl dd.bg-red{ background: #ff0000; color: #fff; }
#news dl dd.bg-deeppink{ background: #ff1493; color: #fff; }
#news dl dd.bg-purple{ background: #800080; color: #fff; }
#news dl dd.bg-indigo{ background: #4b0082; color: #fff; }


/* news linkcolor */
#news dl dd a:link,
#news dl dd a:visited{
	padding: 2px;
	color: #333;
	text-decoration: none;
}

#news dl dd a:hover,
#news dl dd a:active{
	padding: 0 2px;
	background-color: #d6ebf9;
	color: #004cc6;
	text-decoration: none;
}
#news dl dd a.pdf,
#news dl dd a.ppt{ padding: 0 0 0 40px !important; }
#news dl dd a.excel,
#news dl dd a.word{ padding: 0 0 0 50px !important; }
#news dl dd a.window{ padding: 0 0 3px 20px !important; }

/* other-news */
#news .other-news{
	height: 235px;
	padding: 20px 15px;
	border: #CCC solid 1px;
}

#news .flexcroll{
	position: relative;
	width: 405px;
	height: 235px;
	overflow: auto;
	padding-right: 15px;
}

#news .flexcroll ul{
	margin-top: 25px;
	margin-bottom: 40px;
	padding-left: 15px;
	background: url(/img/arrow01.gif) no-repeat 0px 0.25em;
	font-size: 77%;
}

/* menu(一覧/RSS) */
#news .menu{
	float: right;
	width: auto;
	margin-top: 12px;
	margin-bottom: 25px;
}

#news .menu li{
	float: left;
	width: auto;
}

/* challenge */
#challenge{
	float: right;
	width: 370px;
	line-height: 0;
	background: url(/img/bg_challenge-h.gif) top left no-repeat;
}

#challenge h3{
	display: inline;
	float: left;
	width: auto;
	margin: 27px 23px 10px 25px;
}

/* tab-challenge */
#challenge ul.tab-challenge{
	padding-top: 23px;
}

#challenge ul.tab-challenge li{
	display: inline;
	float: left;
	width: auto;
	margin-left: 5px;
}

/* tab-inner */
#challenge .tab-inner dl{
	clear: both;
	min-height: 348px;
	padding: 20px 25px 25px 25px;
	background: url(/img/bg_challenge-f.gif) bottom left no-repeat;
	line-height: 1.6;
}

#challenge .tab-inner dl dt img{
	padding: 1px;
	background-color: #ccc;
	border: #eee solid 3px;
}

#challenge .tab-inner dl dd.problem{
	margin-top: 15px;
}

/* menu(過去の問題) */
#challenge .menu{
	float: right;
	width: auto;
	margin-top: 12px;
	margin-bottom: 25px;
}

#challenge .menu li{
	float: left;
	width: auto;
}

/* ┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉
	[4] sub-contents
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */

#sub-contents{
	display: inline-block;
	clear: both;
	margin-bottom: 30px;
	line-height: 1.66;
}

/* clearfix */
#sub-contents:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html #sub-contents {height: 1%;}
#sub-contents {display: block;}
/* End hide from IE-mac */

/* main */
#main{
	float: right;
	width: 618px;
}

#main h1{
	padding: 2px 0 5px 0;
	min-height: 23px;
	font-size: 182%;
	font-weight: normal;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;

}

#main h2{
	clear: both;
	margin-top: 20px;
	margin-bottom: 10px;
	padding-top: 15px;
	padding-bottom: 5px;
	padding-left: 30px;
	background: url(/img/bg_h2.gif) top left no-repeat;
	border-bottom: #ccc solid 3px;
	font-size:123.1%;
	font-weight: normal;
}

#main h3{
	clear: both;
	margin-top: 35px;
	margin-bottom: 15px;
	padding-bottom: 5px;
	border-bottom: #004cc6 solid 3px;
}

#main h4{
	clear: both;
	margin-top: 25px;
	margin-bottom: 15px;
	padding-bottom: 5px;
	padding-left: 18px;
	background: url(/img/bg_point01.gif) top left no-repeat;
	border-bottom: #ccc solid 1px;
}

#main p{
	margin-bottom: 10px;
}

/* topicpath */
#topicpath{
	display: inline-block;
	background: #f8f8f8 url(/img/bg_topicpath.gif) top left repeat-x;
	font-size: 85%;
}

/* clearfix */
#topicpath:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html #topicpath {height: 1%;}
#topicpath {display: block;}
/* End hide from IE-mac */

#topicpath ul{
	float: right;
	width: auto;
	margin: 2px 5px 1px 5px;
}

#sub-contents #main #topicpath li{
	display: inline;
	margin-bottom: 0;
	padding-left: 0;
	background: none;
}

#topicpath li a{
	margin-right: 3px;
	padding-right: 13px;
	background: url(/img/topicpath.gif) no-repeat right center;
	text-decoration: none;
}

#topicpath li strong{
	font-weight: normal;
}

#sub-contents .page-top{
	clear: both;
	width: 100%;
	margin-top: 30px;
	text-align: right;
}

/* ┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉
	[5] side
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */

#side{
	float: left;
	width: 200px;
	line-height: 1;
}

#side .sidetit{
	margin-bottom: 25px;
}

/* 1階層目 */
#side .menu{
	width: 198px;
	margin-bottom: 2px;
	border-top: #ccc solid 1px;
	border-right: #ccc solid 1px;
	border-left: #ccc solid 1px;
}

#side .menu li{
	position: relative;
	width: 198px;
	border-bottom: #ccc solid 1px;
}

#side .menu li a:link,
#side .menu li a:visited{
	display: block;
	width: 178px;
	padding: 10px;
	background-color: #fff;
	font-weight: bold;
	color: #333;
	text-decoration: none;
}
#side .menu li a:hover,
#side .menu li a:active{
	display: block;
	width: 178px;
	padding: 10px;
	background-color: #d6ebf9;
	font-weight: bold;
	color: #004cc6;
	text-decoration: none;
}

#side .menu li a.window{
	width: 143px;
	background: url(/img/icon_window.gif) no-repeat 5px 10px;
	padding: 10px 10px 10px 45px;
}

#side .menu li a.pdf:link,
#side .menu li a.pdf:visited{
	width: 143px;
	background: url(/img/icon_pdf.gif) no-repeat 5px 10px;
	padding: 10px 10px 10px 45px;
}

#side .menu li a.pdf:hover,
#side .menu li a.pdf:active{
	width: 143px;
	background: #d6ebf9 url(/img/icon_pdf.gif) no-repeat 5px 10px;
	padding: 10px 10px 10px 45px;
}

#side .menu li.switch a:link,
#side .menu li.switch a:visited{
	display: inline-block;
	width: 178px;
	padding: 10px;
	background: none;
	border-bottom: none;
	text-decoration: none;
}


#side .menu li.switch a:hover,
#side .menu li.switch a:active{
	display: inline-block;
	width: 178px;
	padding: 10px;
	background-color: #d6ebf9;
	border-bottom: none;
	text-decoration: none;
}

#side .menu li em{
	display: block;
	width: 178px;
	padding: 10px;
	background-color: #fff;
	font-weight: bold;
	color: #333;
	text-decoration: none;
}

#side .menu li.switch img{
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
}

/* 2階層目 */
#side .menu li ul,
#side .menu li.switch ul{
	clear: both;
	width: 178px;
	padding: 10px;
	background-color: #eee;
	border-top: #ccc solid 1px;
}

#side .menu li ul li,
#side .menu li.switch ul li{
	width: 178px;
	border: none;
}

#side .menu li ul li a:link,
#side .menu li ul li a:visited,
#side .menu li.switch ul li a:link,
#side .menu li.switch ul li a:visited{
	display: block;
	width: 158px;
	margin: 0;
	padding: 5px 5px 5px 15px;
	background: url(/img/arrow02.gif) no-repeat 0px 0.5em;
	border: none;
	font-weight: normal;
	color: #333;
	text-decoration: none;
}

#side .menu li ul li a:hover,
#side .menu li ul li a:active,
#side .menu li.switch ul li a:hover,
#side .menu li.switch ul li a:active{
	display: block;
	width: 158px;
	margin: 0;
	padding: 5px 5px 5px 15px;
	background: #fff url(/img/arrow02.gif) no-repeat 0px 0.6em;
	border: none;
	font-weight: normal;
	color: #004cc6;
	text-decoration: none;
}

#side .menu li ul li a.pdf:link,
#side .menu li ul li a.pdf:visited,
#side .menu li.switch ul li a.pdf:link,
#side .menu li.switch ul li a.pdf:visited{
	width: 113px;
	background: url(/img/icon_pdf.gif) no-repeat 5px 5px;
	padding: 5px 5px 5px 45px;
}
#side .menu li ul li a.window:link,
#side .menu li ul li a.window:visited,
#side .menu li.switch ul li a.window:link,
#side .menu li.switch ul li a.window:visited{
	width: 113px;
	background: url(/img/icon_window.gif) no-repeat 5px 5px;
	padding: 5px 5px 5px 45px;
}
#side .menu li ul li a.pdf:hover,
#side .menu li ul li a.pdf:active,
#side .menu li.switch ul li a.pdf:hover,
#side .menu li.switch ul li a.pdf:active{
	width: 123px;
	background: #fff url(/img/icon_pdf.gif) no-repeat 5px 5px;
	padding: 5px 5px 5px 45px;
}
#side .menu li ul li a.window:hover,
#side .menu li ul li a.window:active,
#side .menu li.switch ul li a.window:hover,
#side .menu li.switch ul li a.window:active{
	width: 123px;
	background: #fff url(/img/icon_window.gif) no-repeat 5px 5px;
	padding: 5px 5px 5px 45px;
}

/* menu-new */
#side .menu-new li{
	width: 180px;
	margin-bottom: 5px;
	padding: 10px;
	background: #eee url(/img/bg_menu.gif) top left no-repeat;
	border-bottom: #ccc solid 1px;
	font-weight: bold;
}

#side .adobe{
	margin-top: 15px;
	padding: 10px;
	background-color: #EEE;
	font-size: 77%;
	line-height: 1.6;
}

#side .banner{ margin-top: 20px; }
#side .banner li{ margin-bottom: 5px; }

#side .adobe dt{ background-color: #fff; }
#side .adobe dd{ margin-top: 5px; }

/* ┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉
	[6] footer-contents
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */

#footer-contents{
	display: inline-block;
	clear: both;
	width: 840px;
	min-height: 112px;
	padding: 0 5px 5px 5px;
	background-color: #eee;
}

#footer-contents .address{
	display: inline-block;
	float: left;
	width: 637px;
	min-height: 85px;
	margin-top: 5px;
	padding: 10px 15px;
	background-color: #fff;
	border: #ccc solid 1px;
}

#footer-contents:after,
#footer-contents .address:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html #footer-contents,
* html #footer-contents .address {height: 1%;}
#footer-contents,
#footer-contents .address {display: block;}
/* End hide from IE-mac */

/* news linkcolor */
#news dl dd a:link,
#news dl dd a:visited{
	padding: 2px;
	color: #333;
	text-decoration: none;
}

#news dl dd a:hover,
#news dl dd a:active{
	padding: 0 2px;
	background-color: #d6ebf9;
	color: #004cc6;
	text-decoration: none;
}

#footer-contents .address h4{
	padding: 5px 0;
}

#footer-contents .address dl{
	clear: both;
}

#footer-contents .address dl dt{
	display: inline;
	float: left;
	margin-top: 2px;
	margin-right: 5px;
	padding: 2px 0;
	min-width: 84px;
	background-color: #eee;
	font-size: 85%;
	text-align: center;
}

#footer-contents .address dl dd{
	display: inline;
	float: left;
	margin-top: 2px;
	margin-right: 15px;
	padding: 2px;
	font-size: 85%;
}

#footer-contents .f-banner-area{
	float: right;
	width: auto;
}

#footer-contents .f-banner-area img{
	margin-top: 5px;
}


/* ┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉
	[7] sub-footer-contents
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */

#sub-footer-contents{
	display: inline-block;
	clear: both;
	width: 840px;
	padding: 5px;
	background-color: #eee;
}

#sub-footer-contents:after,
#sub-footer-contents .link-area:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html #sub-footer-contents,
* html #sub-footer-contents .link-area {height: 1%;}
#sub-footer-contents,
#sub-footer-contents .link-area {display: block;}
/* End hide from IE-mac */

#sub-footer-contents .link-area{
	display: block;
	clear: both;
	padding: 10px 15px 10px 160px;
	background: #fff url(/img/img_logo-s.gif) 15px 15px no-repeat;
	border: #ccc solid 1px;
}

#sub-footer-contents .link-area a:link,
#sub-footer-contents .link-area a:visited{
	display: block;
	width: 80%;
	padding: 2px;
	color: #333;
	text-decoration: none;
}

#sub-footer-contents .link-area a:hover,
#sub-footer-contents .link-area a:active{
	display: block;
	width: 80%;
	padding: 2px;
	background-color: #d6ebf9;
	color: #004cc6;
	text-decoration: none;
}

#sub-footer-contents .link-area a.window:link,
#sub-footer-contents .link-area a.window:visited{ padding: 0 0 3px 20px; }
#sub-footer-contents .link-area a.window:hover,
#sub-footer-contents .link-area a.window:active{ padding: 0 0 3px 20px; }

#sub-footer-contents .link-area .float-left{
	width: 20%;
	margin-top: 12px;
}

#sub-footer-contents .link-area ul li{
	font-size: 85%;
	font-weight: bold;
}

#sub-footer-contents .link-area ul li ul{
	margin-top: 3px;
}

#sub-footer-contents .link-area ul li ul li{
	padding-left: 15px;
	font-size: 100%;
	font-weight: normal;
}

/* ┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉
	[8] footer
┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉┉ */

#footer .f-navi{
	display: inline-block;
	margin-top: 8px;
	margin-bottom: 5px;
	font-size: 77%;
}

#footer .f-navi:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Hides from IE-mac \*/
* html #footer .f-navi{height: 1%;}
#footer .f-navi{display: block;}
/* End hide from IE-mac */

#footer .f-navi li{
	float: left;
	width: auto;
	margin-right: 10px;
}

#footer .book li{
	margin: 0 10px 0 0;
	padding: 1px;
	border: #ccc solid 1px;
}

#footer .book li a:link,
#footer .book li a:visited{
	padding: 2px;
	color: #333;
	text-decoration: none;
}

#footer .book li a:hover,
#footer .book li a:active{
	padding: 0 2px;
	background-color: #d6ebf9;
	color: #333;
	text-decoration: none;
}

#footer hr{
	clear: both;
	margin: 0;
	padding: 5px 0;
	height: 1px;
	border: none;
	border-top: 1px #ccc solid;
}

#footer .page-top{
	float: right;
	width: 83px;
	margin-bottom: 30px;
}

p.copyright{
	float: left;
	width: 700px;
	font-size: 85%;
	color: #999;
}

p.copyright a:link,
p.copyright a:visited,
p.copyright a:hover,
p.copyright a:active{
	color: #999;
	text-decoration: none;
}