@charset "utf-8";

/* ------------------------- TOC 
Setup
CSS Hack
multi column

layout
header
main_col

howto
 ------------------------- */

/* ============================== Setup */
* { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", Osaka, "メイリオ", "MS PGothic", sans-serif; background-repeat: no-repeat; font-size: small; font-style: normal; line-height: 1.4em; text-decoration: none; font-weight: normal; }
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, hr, ul, ol, li, dl, dt, dd, dir, menu, table, th, td, thead, tbody, tfoot, caption, form, fieldset, legend, isindex, embed, object, pre { margin: 0; padding: 0; border: 0; text-align: left; }
ul, ol, dl, li, dt, dd { list-style: none; }
table { border-collapse:collapse; border-spacing:0; font-size: 100%; }
th, td { vertical-align: top; }
strong { font-weight:bold; }
img { border: 0; vertical-align: bottom; }
a { border: 0; }

a { color: #66ccff; text-decoration: underline; }
a:link { color: #66ccff; text-decoration: underline; }
a:visited { color: #66ccff; text-decoration: underline; }
a:hover, a:active { color: #66ccff; text-decoration: none; }
a img, a:link img, a:visited img, a:hover img, a:active img { border: none; text-decoration: none; }


/* ============================== CSS Hack */
/* floating box clear */
.clr:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clr { display: inline-table; min-height: 1%; }
/* Hide from mac IE5 \*/
* html .clr { height: 1%; }
.clr { display: block; }
/* End Hide from mac IE5 */

/* hide text */
.hidetxt { text-indent: -9999px; overflow: hidden; }
.hidetxt a { overflow: hidden; }


/* ============================== multi column */
.multicol { } /* necessary - clr class */
.leftcol { float: left; }
.rightcol { float: right; }


/* ============================== layout */
body {
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	color: #666666;
	text-align: center;
}

#container {
	margin: 0 auto;
	padding: 0 0 10px;
}

ul#guideline,
ul#error {
	margin: 15px 30px 0;
	padding:0;
}

ul#error li {
	color: #ff6699;
}

/* ============================== header */
#header {
	width: 650px;
	background-color: #000000;
}

#header p.leftcol {
	width: 130px;
}

#header p.rightcol {
	width: 60px;
	margin: 10px 0 0;
}

#header p.rightcol a {
	display: block;
	width: 40px;
	height: 11px;
}



/* ============================== main_col */
#main-col {
	width: 610px;
	margin: 15px 0 0 20px;
	text-align: left;
}

#main-col p {
	margin: 20px 0 0 10px;
}

#main-col .red {
	color: #ff6699;
}

#main-col .gray {
	color: #666666;
}

#main-col div#form-wrap {
	width: 610px;
	margin: 20px 0 0;
	padding: 15px 0 0;
	background: url(../img/dot_01.gif) no-repeat 0 0;	
}

#main-col table {
	width: 610px;
	margin: 0 10px;
	border-collapse: collapse;
}

#main-col table th {
	width: 35%;
	padding: 5px 5px 5px 0 ;
	border-collapse: collapse;
	color: #000000;
}

#main-col table th span.indent {
	display: block;
	margin: 0 0 0 1em;
	text-indent: -1em;
}

#main-col table td {
	width: 65%;
	padding: 5px;
	border-collapse: collapse;
}

#main-col table.icon-table {
	width: auto;
}

#main-col table.icon-table td {
	width: auto;
	padding: 0 10px 5px 0;
}

#main-col table td select {
	width: 130px;
}

#main-col table td.comment select {
	width: 300px;
}

#main-col table td textarea {
	width: 95%;
}

#main-col div#btn-box {
	width: 610px;
	margin: 20px 0 0;
	padding: 10px 0 30px;
	background: url(../img/dot_01.gif) no-repeat 0 0;
	text-align: center;
}

#main-col div#btn-box-left,
#main-col div#btn-box-right {
	width: 610px;
	margin: 20px auto 0;
	padding: 10px 0 30px;
	background: url(../img/dot_01.gif) no-repeat 0 0;
	text-align: center;
}

#main-col div.multicol {
	width: 306px;
	margin: 0 auto;
}

#main-col div.multicol-left {
	width: 113px;
	margin: 0 auto;
}

#main-col div.multicol-right {
	width: 163px;
	margin: 0 auto;
}

#main-col div#btn-box p.leftcol,
#main-col div#btn-box-left p.leftcol {
	width: 113px;
}

#main-col div#btn-box p.leftcol a,
#main-col div#btn-box-left p.leftcol a {
	display: block;
	width: 113px;
	height: 19px;
}

#main-col div#btn-box p.rightcol,
#main-col div#btn-box-right p.rightcol {
	width: 163px;
}

#main-col div#btn-box p.rightcol a,
#main-col div#btn-box-right p.rightcol a {
	display: block;
	width: 163px;
	height: 19px;
}

#main-col div#login-attention {
	width: 560px;
	margin: 20px auto 0;
	padding: 10px;
	text-align: left;
	background:url(../img/bg_attention.gif) repeat 0 0;
	border:#333 1px solid;
	color:#000;
	}


/* マウスのオン、オフの設定
-------------------------------- */
/* オフ */
.btn-close a { background: url("../img/btn_close.gif") no-repeat 0 0;}
.btn-clear a { background: url("../img/btn_clear.gif") no-repeat 0 0;}
.btn-conf a { background: url("../img/btn_conf.gif") no-repeat 0 0;}
.btn-back a { background: url("../img/btn_back.gif") no-repeat 0 0;}
.btn-back2 a { background: url("../img/btn_back2.gif") no-repeat 0 0;}
.btn-login a { background: url("../img/btn_login.gif") no-repeat 0 0;}
.btn-registration a { background: url("../img/btn_registration.gif") no-repeat 0 0;}
.btn-close2 a { background: url("../img/btn_close2.gif") no-repeat 0 0;}
.btn-guideline a { 
	background: url("../img/btn_guideline.gif") no-repeat 0 0;
	display:block; width:211px; height:17px;
}
.btn-web a { 
	background: url("../img/btn_web.gif") no-repeat 0 0;
	display:block; width:211px; height:17px;
}
.btn-account a { 
	background: url("../img/btn_account.gif") no-repeat 0 0;
	display:block; width:211px; height:17px;
}


/* オン */
.btn-close a:hover { background-position: 0 -11px;}
.btn-clear a:hover { background-position: 0 -19px;}
.btn-conf a:hover { background-position: 0 -19px;}
.btn-back a:hover { background-position: 0 -19px;}
.btn-back2 a:hover { background-position: 0 -19px;}
.btn-login a:hover { background-position: 0 -19px;}
.btn-registration a:hover { background-position: 0 -19px;}
.btn-close2 a:hover { background-position: 0 -19px;}
.btn-guideline a:hover { background-position: 0 -17px;}
.btn-web a:hover{ background-position: 0 -19px;}
.btn-account a:hover{ background-position: 0 -19px;}



/* ============================== howto */
#howto {
	width: 650px;
	margin: 0 auto;
}

#howto #contents {
	width: 610px;
	margin: 0 20px;
	background: url(../howto/img/howto_bg.gif) no-repeat 0 0;	
}

#howto #main-col {
	float: left;
	width: 410px;
	margin: 15px 0 0;
}

#howto #main-col h1 {
	margin: 0;
	padding: 0;
}

#howto #main-col h2 {
	margin: 35px 0 0 10px;
	padding: 0;
}

#howto #main-col ul {
	margin: 20px 0 0 10px;
	padding: 0;
}

#howto #main-col ul li {
	list-style: outside disc;
	margin: 5px 0 0 20px;
}

#howto #main-col dl {
	margin: 0 0 0 10px;
	padding: 0;
}

#howto #main-col dl dt {
	margin: 20px 0 3px;
	padding: 0;
	color: #000000;
}

#howto #main-col dl dd ul {
	margin: 0;
}


#howto #main-col p.btn-web a,
#howto #main-col p.btn-account a {
	display: block;
	width: 303px;
	height: 19px;
}

#howto #main-col ol {
	margin: 20px 0 0 10px;
}

#howto #main-col ol li {
	list-style: outside decimal;
	margin: 0 0 0 25px;
}

#howto #main-col ol.type2 {
	margin: 20px 0 0 10px;
}

#howto #main-col ol.type2 li {
	list-style: none;
	margin: 0 0 0 3em;
	text-indent: -3em;
}

#howto #main-col ol.type2 li strong {
	color: #000000;
}

#howto #main-col .caption span {
	display: block;
	margin: 0 0 0 1em;
	text-indent: -1em;
}

#howto #main-col span.star {
	color:#ff3366;
}

#howto #main-col .margin2 {
	margin: 10px 0 0 10px;
}

#howto #main-col .margin3 {
	margin: 10px 0 0 0;
}

#howto #main-col .margin4 {
	margin: 20px 0 0 0;
}

#howto #sub-col {
	float: right;
	width: 179px;
	margin: 60px 0 0;
}

#howto #sub-col ul li a {
	display: block;
	width: 179px;
}


/* マウスのオン、オフの設定
-------------------------------- */
/* オフ */
#howto .menu-1 a { height: 40px; background: url("../howto/img/howto_menu_01.gif") no-repeat 0 0;}
#howto .menu-2 a { height: 40px; background: url("../howto/img/howto_menu_02.gif") no-repeat 0 0;}
#howto .menu-3 a { height: 40px; background: url("../howto/img/howto_menu_03.gif") no-repeat 0 0;}
#howto .menu-4 a { height: 56px; background: url("../howto/img/howto_menu_04.gif") no-repeat 0 0;}
#howto .menu-5 a { height: 40px; background: url("../howto/img/howto_menu_05.gif") no-repeat 0 0;}
#howto .menu-6 a { height: 40px; background: url("../howto/img/howto_menu_06.gif") no-repeat 0 0;}
#howto .menu-7 a { height: 40px; background: url("../howto/img/howto_menu_07.gif") no-repeat 0 0;}
#howto .menu-8 a { height: 40px; background: url("../howto/img/howto_menu_08.gif") no-repeat 0 0;}
#howto .menu-9 a { height: 41px; background: url("../howto/img/howto_menu_09.gif") no-repeat 0 0;}

/* オン */
#howto .menu-1 a:hover { background-position: 0 -40px;}
#howto .menu-2 a:hover { background-position: 0 -40px;}
#howto .menu-3 a:hover { background-position: 0 -40px;}
#howto .menu-4 a:hover { background-position: 0 -56px;}
#howto .menu-5 a:hover { background-position: 0 -40px;}
#howto .menu-6 a:hover { background-position: 0 -40px;}
#howto .menu-7 a:hover { background-position: 0 -40px;}
#howto .menu-8 a:hover { background-position: 0 -40px;}
#howto .menu-9 a:hover { background-position: 0 -41px;}

/* アクティブ */
#howto .menu-1-act a { height: 40px; background: url("../howto/img/howto_menu_01.gif") no-repeat 0 -80px;}
#howto .menu-2-act a { height: 40px; background: url("../howto/img/howto_menu_02.gif") no-repeat 0 -80px;}
#howto .menu-3-act a { height: 40px; background: url("../howto/img/howto_menu_03.gif") no-repeat 0 -80px;}
#howto .menu-4-act a { height: 50px; background: url("../howto/img/howto_menu_04.gif") no-repeat 0 -112px;}
#howto .menu-5-act a { height: 40px; background: url("../howto/img/howto_menu_05.gif") no-repeat 0 -80px;}
#howto .menu-6-act a { height: 40px; background: url("../howto/img/howto_menu_06.gif") no-repeat 0 -80px;}
#howto .menu-7-act a { height: 40px; background: url("../howto/img/howto_menu_07.gif") no-repeat 0 -80px;}
#howto .menu-8-act a { height: 40px; background: url("../howto/img/howto_menu_08.gif") no-repeat 0 -80px;}
#howto .menu-9-act a { height: 41px; background: url("../howto/img/howto_menu_09.gif") no-repeat 0 -82px;}