@charset "utf-8";

/*----------------------------------------
 Reset
---------------------------------------- */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; }

img { border: 0; vertical-align:bottom; }

ul, ol{ list-style: none; }

table { border: 0; border-collapse: collapse; border-spacing: 0; line-height: 1.3; }
th,td { text-align: left; vertical-align: top; }
th { font-weight: bold; }

/*----------------------------------------
 General
---------------------------------------- */
html {overflow-y: scroll; }	

body {
	font-size:62.5%;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Ghothic Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic","MS UI Gothic","Osaka",'Lucida Grande',Verdana,Arial,Sans-Serif;
	color:#000;
	text-align:center;
	background: #FFF;
}

/* Hypertext */
a:hover, a:active { text-decoration: none; }

a:focus { outline: 1px dotted; }

/* Clearfix */
.clearfix { /zoom: 1; }

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

/*----------------------------------------
 LAYOUT & PREFERENCES
------------------------------------------
 -- Container
---------------------------------------- */
#wrapper {
	clear:both;
	width: 920px;
	margin: 0 auto;
	text-align: left;
}

/* ---------------------------------------- 
 -- Header 
---------------------------------------- */
#header {
	position: relative;	
    width: 920px; 
    margin-bottom: 20px; 
    height: 89px; 
    background: url(../img/headBg.png) no-repeat left top; 
}

#header #topNav {
    width: 481px; 
    float: right; 
    padding: 16px 15px 0 0; 
    text-align: right; 
}

#header h1 {
	font-size: 1.2em;
	color: #745f48;
	font-weight: normal;
}

#header #logo {
    float: left; 
    width: 350px; 
    margin: 20px 0 0 30px; 
}


#header ul {
	position: absolute;
	top: 48px;
	right: 10px;
}
#header ul li {
    float: left;
}

/* ---------------------------------------- 
 -- Contents 
---------------------------------------- */
#indexPage h2 {
    margin-bottom: 10px;
}
#subPage h2 {
    font-size: 1.6em; 
    line-height: 36px; 
    margin-bottom: 1em; 
    padding-left: 23px; 
    color: #FFF; 
    background: url(../img/subPageTitle.png) no-repeat; 
}
#subPage h3 {
    font-size: 1.4em; 
    line-height: 33px; 
    margin-bottom: 1em; 
    padding: 10px 0 0 30px; 
    color: #004883; 
    background: url(../img/subHeadline.png) no-repeat 0 10px; 
}

/* #rightCol */ 
#rightCol {
    width: 680px; 
    float: right; 
    margin-bottom: 10px; 
}
#rightCol h3 {
    clear: both;
}
#rightCol p {
    font-size: 1.4em; 
    line-height: 1.6; 
    margin-bottom: 1em; 
}
#rightCol table p {
    font-size: 1em; 
    line-height: 1.5; 
    margin-bottom: 0; 
}
#rightCol .subCon {
    width: 660px; 
    padding: 0 10px; 
}

/* #indexPage #cardRecommned */ 
#rightCol #cardRecommned {
    margin-bottom: 20px;
}
#rightCol #cardRecommned dl {
    float: left; 
    width: 218px; 
}
#rightCol #cardRecommned dt {
    height: 27px; 
    padding-top: 0.4em; 
    font-size: 1.4em; 
    font-weight: bold; 
    text-align: center; 
    color: #FFF; 
}
#rightCol #cardRecommned dd {
    height: 180px; 
    padding: 3px 10px 0; 
}
#rightCol #cardRecommned p {
    font-size: 1.2em;
	line-height: 1.5;
    margin-bottom: 0.5em; 
}
#rightCol #cardRecommned .cardName {
    font-weight: bold; 
    padding-left: 15px; 
}
#rightCol #cardRecommned .cardText {
    clear: left;
}
#rightCol .cardBox01 {
    margin-right: 10px; 
    border: 1px solid #ff8b4c; 
}
#rightCol .cardBox01 dt {
    background: url(../img/top01Title1.png) no-repeat;
 
}
#rightCol .cardBox01 .cardName {
    background: url(../img/top01Ico1.png) no-repeat 0 2px;
 
}
#rightCol .cardBox02 {
    margin-right: 10px; 
    border: 1px solid #6ab627; 
}
#rightCol .cardBox02 dt {
    background: url(../img/top01Title2.png) no-repeat;
}
#rightCol .cardBox02 .cardName {
    background: url(../img/top01Ico2.png) no-repeat 0 2px;
 
}
#rightCol .cardBox03 {
    margin-right: 0px; 
    border: 1px solid #ea507b; 
}
#rightCol .cardBox03 dt {
    background: url(../img/top01Title3.png) no-repeat;
}
#rightCol .cardBox03 .cardName {
    background: url(../img/top01Ico3.png) no-repeat 0 2px;
}

/* #indexPage #cardRank1 */
#rightCol #cardRank1 {
    height: 180px; 
    margin-bottom: 10px; 
    padding: 25px 30px 5px 30px; 
    background: url(../img/topRank1Bg.png) no-repeat; 
}
#rightCol #cardRank1 dl {
    float: right; 
    width: 480px; 
}
#rightCol #cardRank1 dt {
    padding: 5px 0 15px 55px; 
    font-size: 1.4em; 
    font-weight: bold; 
    line-height: 1.5; 
    background: url(../img/topRank1Ico.png) no-repeat; 
}

/* #indexPage #cardRank2-3 */ 
#rightCol #cardRank2-3 {
    clear: both; 
    margin-bottom: 20px; 
}
#rightCol #cardRank2-3 dt {
    padding: 0 0 10px 48px; 
    font-size: 1.4em; 
    font-weight: bold; 
    line-height: 1.5; 
}
#rightCol #cardRank1 dd, 
#rightCol #cardRank2-3 dd {
    font-size: 1.2em; 
    line-height: 1.6; 
}
#rightCol .rank2 {
    float: left; 
    height: 169px; 
    width: 290px; 
    padding: 20px 20px 5px 25px; 
    background: url(../img/topRank2Bg.png) no-repeat; 
}
#rightCol .rank2 dt {
    background: url(../img/topRank2Ico.png) no-repeat;
}
#rightCol .rank3 {
    float: right; 
    height: 169px; 
    width: 290px; 
    padding: 20px 20px 5px 25px; 
    background: url(../img/topRank3Bg.png) no-repeat; 
}
#rightCol .rank3 dt {
    background: url(../img/topRank3Ico.png) no-repeat;
}

/* #indexPage #pickup */ 
#pickup {
    margin-bottom: 15px; 
    padding: 5px 0 10px 1px; 
    background: #edf3f5; 
    border-right: 2px solid #48a1e2; 
    border-bottom: 2px solid #48a1e2; 
    border-left: 2px solid #48a1e2; 
}
#pickup dl {
    width: 208px; 
    float: left; 
    margin-left: 11px; 
    border: 1px solid #48a1e2; 
    background: #FFF; 
}
#pickup dt {
    height: 23px; 
    padding-top: 7px; 
    background: url(../img/top03CardTitle.png) no-repeat; 
    text-align: center; 
    font-size: 1.2em; 
    font-weight: bold; 
}
#pickup dd {
    padding: 10px;
}
#pickup dd p {
    font-size: 1.2em; 
    margin-bottom: 0.5em; 
}
#pickup dd .pickImg {
    text-align: center; 
    margin-bottom: 0.5em; 
}

/* #docBox01 */ 
#rightCol .docBox01 {
    margin-bottom: 15px; 
    padding: 15px 15px 5px 15px; 
    border: solid 3px #62a5de; 
    background: url(../img/top01Bg.png) repeat-y center top; 
}
#rightCol .docBox01 p {
    background: url(../img/dot1.png); 
    line-height: 25px; 
}

/*.dtBoxOuter & .dtBoxInner */ 
#rightCol .dtBoxOuter {
    clear: both; 
    margin-bottom: 2em; 
    padding: 0 10px; 
    background: url(../img/subItemboxBtm.png) no-repeat bottom; 
}
#rightCol .dtBoxInner {
    padding: 20px; 
    background: url(../img/subItemboxTop.png) no-repeat; 
}
#rightCol .dtBoxInner p.dtTitle {
    margin-bottom: 1em; 
    padding-left: 20px; 
    line-height: 26px; 
    color: #004883; 
    font-weight: bold; 
    background: url(../img/subComboxTitle.png) no-repeat; 
}
#rightCol .dtBoxInner p.dtTxt {
    font-size: 1.2em; 
    margin-bottom: 0; 
}
#rightCol .dtBoxInner .join {
    padding-top: 20px; 
    text-align: center; 
}
#rightCol .dtBoxInner .join img {
    margin-bottom: 5px;
}

/* #subPage .dtImg */
.dtImg {
    float: left; 
    width: 145px; 
}
.dtTbl {
    float: right; 
    width: 515px; 
}

/* ---------------------------------------- 
 -- Side Navigation 
-------------------------------------------*/
#leftCol {
    width: 220px; 
    float: left; 
    margin-right: 15px; 
}
#leftCol .navImg {
    vertical-align: top;
}
#leftCol ul.leftNav {
    width: 198px; 
    margin-bottom: 15px; 
    padding: 2px 10px; 
    font-size: 1.2em; 
    line-height: 1.3; 
    border: 1px solid #ccd1de; 
    background: #fbfdfd; 
}
#leftCol ul.leftNav li {
    background: url(../img/navListIcon.png) no-repeat 0 8px;
}
#leftCol ul.leftNav a{
	display: block;
    padding: 6px 0 7px 13px;	
    background: url(../img/navDot.png) repeat-x left bottom;
}
#leftCol ul.leftNav li.last a{
    background: none;
}
/* ---------------------------------------- 
 -- Footer 
-------------------------------------------*/
#footer {
    clear: both; 
    height: 50px; 
    width: 880px; 
    margin: 0px 0px 10px 0px; 
    padding: 20px; 
    background: url(../img/footBg.png) no-repeat; 
    text-align: center; 
    font-size: 1.2em; 
    color: #657b92; 
}
/* ---------------------------------------- 
 VARIOUS STYLES 
-------------------------------------------*/
/* ===[ Table Pattern1 ]=== */ 
table.table01 {
    margin-bottom: 1.5em; 
    width: 90%; 
    border: solid 1px #859cbb; 
}
table.table01 th, 
table.table01 td {
    padding: 8px 6px; 
    text-align: right; 
    border: solid 1px #859cbb; 
    font-size: 1.2em; 
    vertical-align: middle; 
}
table.table01 th {
    text-align: left; 
}
table.table01 td.join {
    text-align: center;
}
table.table01 td.category {
    padding: 3px 4px; 
    background: url(../img/tbl01HdBg.png) repeat-x; 
    color: #004883; 
    text-align: center; 
    font-weight: bold; 
    white-space: nowrap; 
}
/* ===[ Table Pattern2 ]=== */ 
table.table02 {
    margin-bottom: 1.5em; 
    width: 515px; 
    border: solid 1px #859cbb; 
}
table.table02 th, 
table.table02 td {
    padding: 6px; 
    text-align: center; 
    border: solid 1px #859cbb; 
    font-size: 1.2em; 
    vertical-align: middle; 
}
table.table02 th {
    padding: 4px; 
    color: #004883; 
    background: url(../img/tbl01HdBg.png) repeat-x; 
    white-space: nowrap; 
}
/* ===[ Table Pattern3 ]=== */ 
table.table03 {
    width: 620px; 
    border: solid 1px #859cbb; 
}
table.table03 th, 
table.table03 td {
    padding: 8px 15px; 
    border: solid 1px #859cbb; 
    background: #FFF; 
    font-size: 1.2em; 
}
table.table03 th {
    width: 20%; 
    color: #004883; 
    background: url(../img/tbl02HdBg.png) repeat-y; 
    white-space: nowrap; 
    vertical-align: middle; 
}

.leftImg{float:left; margin: 0 10px 10px 0;}
.message{color: #F00; font-weight: bold;}
.bf{font-weight: bold;}
.txtS {font-size: 10px; }
.txtM {font-size: 12px; }
.txtL {font-size: 14px; }
b {
	color: #F60;
}

.topic-path {
	list-style-type: none;
	padding-bottom: 10px;
}
.topic-path li {
	display: inline;
	font-size:80%;
}