@charset "utf-8";
/* CSS Document */

body {
	line-height: 1.6;
	font-size: 62.5%;
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,sans-serif;
	background: url(../img/bg.png) repeat;
}

#wrapper {
	margin: 0 auto;
	width: 940px;
	background: #FFF;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
}

#header {
	width: 100%;
	height: 80px;
	border-bottom: 5px solid #3C9EE7;
	position: relative;
}

#header #logo {
	width: 119px;
	height: 40px;
	position: relative;
	top: 20px;
	left: 20px;
}

#main {
	margin: 40px auto 0;
	width: 860px;
	color: #555555;
}

#main h1#main-title {
	padding-bottom: 4px;
	font-size: 20px;
	font-weight: bold;
	text-indent: 20px;
	border-bottom: 3px solid #3C9EE7;
}

#main #contents {
	margin: 20px auto 0;
}

#contents .msg {
	margin: 0 auto;
	width: 820px;
	font-size: 14px;
}

#contents .cate {
	margin: 0 auto;
	width: 820px;
	font-size: 14px;
}

#contents .cate-msg {
	margin: 0 auto;
	width: 760px;
}

.cate h2 {
	padding: 8px 0 8px 30px;
	color: #555;
	font-size:14px;
	font-family:arial, helvetica, sans-serif;
	font-weight:bold;
	border: 1px solid #CCC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #f4f5f5;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
	background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
	background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
	background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
	background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
	background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
	filter:　progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f5f5, endColorstr=#dfdddd);
}

.cate h3 {
	border-left: 6px solid #3C9EE7;
	text-indent: 10px;
}

#main .counter {
	margin: 0 auto;
	width: 820px;
	word-break: break-all;	/* 幅で改行する */
}

#main #input-box {
	margin-top: 30px;
	background: #F7F7F7;
	border: 1px solid #CCC;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#main #output-box {
	margin-top: 0;
	border: 3px solid #3C9EE7;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.counter .license-info {
	margin: 40px auto;
	width: 640px;
	font-size: 14px;
}

.license-info h2 {
	font-weight: bold;
}

.license-info .input-data, .license-info .output-data {
	margin-bottom: 20px;
}

#input-box #pincard-area {
	margin: 0 auto 20px;
	width: 400px;
}

#input-box #pincard-txt {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}

#input-box #pincard-img {
	margin: 5px auto 0;
	width: 206px;
	height: 130px;
}

#input-box input.sbbPinText, #input-box input.text {
	margin-top: 5px;
	padding: 5px 10px;
	font-size: 18px;
	border: 1px solid #CCC;
	-webkit-appearance: none;
}

#output-box input.text {
	padding: 3px 0;
	color: #C00;
	font-size: 18px;
	font-weight: bold;
	text-indent: 150px;
	_text-indent: 70px;
	border: none;
	-webkit-appearance: none;
	border-bottom: 1px solid #CCC;
}

#output-box #serial-area {
	padding: 3px 0;
	border-bottom: 1px solid #CCC;
}

#output-box #serial-area textarea {
	margin: 0 0 0 150px;
	width: 420px;
	color: #C00;
	font-size: 18px;
	font-weight: bold;
	display: block;
	border: none;
	-webkit-appearance: none;
}

.license-info .btn-area {
	margin: 0 auto;
	width: 400px;
}
/* エラーメッセージ表示ラベル */
div.counter .error_msg {
	margin: 20px 0 0;
	color: red;
	font-weight: bold;
}

/* 正常メッセージ表示ラベル */
div.counter .msg {
	color: blue;
	font-weight: bold;
}

/* SBBコードテキストボックス */
div.counter input.sbbPinText {
	text-transform: uppercase;
	width: 100%;
	ime-mode: disabled;
}

/* その他テキストボックス */
div.counter input.text {
	width: 100%;
	ime-mode: disabled;
}

/* ボタン */
div.counter input.button {
	padding: 8px 10px 10px 10px;
	width: 400px;
	height: 40px;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Arial,sans-serif;
	text-decoration: none;
	display: inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	border: 1px solid #25729a;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background-color: #3093c7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3093c7), to(#1c5a85));
	background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
	background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}

div.counter input.button:hover {
	border:1px solid #1c5675;
	background-color: #26759e;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
	background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
	background-image: -moz-linear-gradient(top, #26759e, #133d5b);
	background-image: -ms-linear-gradient(top, #26759e, #133d5b);
	background-image: -o-linear-gradient(top, #26759e, #133d5b);
	background-image: linear-gradient(to bottom, #26759e, #133d5b);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
	cursor: pointer;
}

#downloadlink {
	margin: 20px auto 0;
	padding: 10px 10px 10px 10px;
	width: 300px;
	line-height: 1;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	display: block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	border: 1px solid #72021c;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #a90329;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#a90329), to(#6d0019));
	background-image: -webkit-linear-gradient(top, #a90329, #6d0019);
	background-image: -moz-linear-gradient(top, #a90329, #6d0019);
	background-image: -ms-linear-gradient(top, #a90329, #6d0019);
	background-image: -o-linear-gradient(top, #a90329, #6d0019);
	background-image: linear-gradient(to bottom, #a90329, #6d0019);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a90329, endColorstr=#6d0019);
}

#downloadlink:hover {
	border: 1px solid #450111;
	background-color: #77021d;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#77021d), to(#3a000d));
	background-image: -webkit-linear-gradient(top, #77021d, #3a000d);
	background-image: -moz-linear-gradient(top, #77021d, #3a000d);
	background-image: -ms-linear-gradient(top, #77021d, #3a000d);
	background-image: -o-linear-gradient(top, #77021d, #3a000d);
	background-image: linear-gradient(to bottom, #77021d, #3a000d);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#77021d, endColorstr=#3a000d);
}

#triangle {
	margin: 25px auto 0;
	width: 0;
	height: 0;
	border-top: 25px solid #ff6262;
	border-right: 100px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 100px solid transparent;
}

#footer {
	margin-top: 30px;
	padding: 20px 0 10px;
	width: 100%;
	border-top: 4px solid #666;
	position: relative;
	overflow: hidden;
}

#footer .msg {
	margin: 0 auto 10px;
	font-size: 12px;
	text-align: center;
}

#footer #footer-menu {
/*	margin: 0 auto; */
/*	width: 90%; */
	position: relative;
	left: 50%;
	float: left;
}

#footer-menu li {
	margin-right: 20px;
	font-size: 12px;
	list-style: none;
	position: relative;
	left: -50%;
	float: left;
}

#footer-menu li:last-child {
	margin: 0;
}

#footer #copyright {
/*	margin: 20px auto 0; */
/*	width: 300px; */
	margin: 0;
	padding: 10px 0;
	font-size: 12px;
	text-align: center;
	clear: both;
}

#pinsample {
	display: none;
}

#tooltipbox p {
	color: #555555;
	font-size: 14px;
}

/* common
===========================================*/

.mt5 {
	margin-top: 5px!important;
}

.mt10 {
	margin-top: 10px!important;
}

.mt20 {
	margin-top: 20px!important;
}

.mt30 {
	margin-top: 30px!important;
}

.mt40 {
	margin-top: 40px!important;
}

.mb5 {
	margin-bottom: 5px!important;
}

.mb10 {
	margin-bottom: 10px!important;
}

.mb20 {
	margin-bottom: 20px!important;
}

.mb30 {
	margin-bottom: 30px!important;
}

.mb40 {
	margin-bottom: 40px!important;
}

.txtc {
	text-align: center;
}

.fwb {
	font-weight: bold;
}

.fred {
	color: #C00;
}

/* clearfix
===========================================*/

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}