@charset "utf-8";
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, 
fieldset, input, textarea, p, blockquote, th, td{
    margin: 0; 
    padding: 0;
}
html{
	height: 100%;
	margin-bottom: 1px;
    overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6{
    font-size: 100%; 
    font-weight: normal;
}
ol, ul{
    list-style:none;
}
img{
     border:0;
}
address, caption, cite, code, dfn, em, strong, th, var{
    font-style: normal; 
    font-weight: normal;
}
/*テーブル関連の初期化*/
table {
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
}
caption {
	text-align: left;
}
th {
	vertical-align: top;
	font-weight: normal;
	text-align: left;
}
td {
	vertical-align: top;
}
/*フォーム関連の初期化*/
fieldset {
	border: 0;
}
input {
	_margin: -1px 0;
}
/* テキストエリア内文字サイズのブラウザ間での差異をなくす */
textarea { font-size: 100%; }

/* 画像の下にできる隙間をなくす */
img { vertical-align: bottom; }

/* hr 要素は不可視で使う */
hr { display: none; }

/*clearfixハック*/
.clearfix:after {
	content: " ";
	display: block;	
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix { display: inline-block; }
/* \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* */

/* 全体 */
body{
	color:#333333;
	font:13px "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
	line-height: 1.7em;
	background-image: url(../images/backgrand.jpg);
	background-repeat: repeat-y;
}
.text10 { font-size:77%; }
.text11 { font-size:85%; }
.text12 { font-size:93%; }
.text13 { font-size:100%; }
.text14 { font-size:108%; }
.text15 { font-size:116%; }
.text16 { font-size:123.1%; }
.text17 { font-size:131%; }
.text18 { font-size:138.5%; }
.text19 { font-size:146.5%; }
.text20 { font-size:153.9%; }
.text21 { font-size:161.6%; }
.text22 { font-size:167%; }
.text23 { font-size:174%; }
.text24 { font-size:182%; }
.text25 { font-size:189%; }
.text26 { font-size:197%; }
br.clear {
	clear: both;
	font: 0px/0px sans-serif;
}
.none{
	display: none;
}
/* リンクカラー */
a:link,
a:visited,
a:active{
	color:#0066CC;
	text-decoration: none;
}
a:hover{
	color:#00FFFF;
}
/* レイアウト */
#container{
/*	width:1300px;
	margin:0px auto;
	background-color: #FFFFFF;
	background-repeat: repeat-y;
*/}
#container-inner{
	margin:0px 25px;
	height: 740px;
	padding: 10px 0px 50px 0px;
}
#container-inner-02{
	margin:0px 25px;
	padding: 10px 0px 50px 0px;
}

#header{
}
h1{
	float: left;
}
#header-navi{
	float:right;
	text-align: right;
	font-size:93%;
	margin-bottom:10px;
}
#header-navi #sub-navi ul{
	text-align: right;
	margin-bottom:7px;
}
#header-navi #sub-navi li{
	display: inline;
	padding-left:9px;
}
#header-navi #sub-navi a:link,
#header-navi #sub-navi a:visited,
#header-navi #sub-navi a:active{
	color:#333333;
	text-decoration: none;
}
#header-navi #sub-navi a:hover{
	color:#00FFFF;
}

h1 .topmain{
	clear:both;
}
#content{
	left:150px;
	float: left;
	width:700px;
	padding-top:10px;
}
#side{
	float: left;
	width:350px;
	margin-right:10px;
	padding-top:10px;
}
#side img{
	margin-bottom:8px;
}
#content-inner{
}
.List-title{
	height: 20px;
	padding:10px;
	background-color: #FFFFFF;
}


/* footer */
#footer{
	height: 50px;
	background-color: #FFFFFF;
}
#footer-inner{
	height: 50px;
	padding:0px 15px;
	background-color: #FFFFFF;
}
#footer-menu ul{
	text-align: right;
	padding-top: 30px;
}
#footer-menu li{
	display: inline;
}
address{
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

/* toppage ---------------------------------------------------------- */
.whatsnew{
	width:730px;
	margin: 0px 0px 10px 10px;
}
.whatsnew ul{
}
.whatsnew li{
	background-color: #99CCCC;
	margin: 5px 0px 0px 0px;
	padding:0px 10px;
}
.case{
	width:740px;
	margin-top:10px;
}
.case dl{
	float:left;
	width:335px;
	margin:5px 0px 5px 10px;
	padding:8px;
	border: 1px solid #CCCCCC;
}
.case dt{
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #4d9dc6;
	padding-left:10px;
}
.case dd{
	float:left;
}
.case img{
	float:left;
	width:100px;
	height:80px;
	margin-right:10px;
	border: 6px solid #CCCCCC;
}
/* table ---------------------------------------------------------- */
div#tb table { width: 80%; margin: auto; }
div#tb td, div#tb th { font-size: 12px; line-height: 140%; text-align: left; }
div#tb td {
border: 1px solid #ccc;
padding: 10px;
background-color: #FFFFFF;
}
div#tb th {
border: 1px solid #ccc;
background-color: #FFFFFF;
white-space: nowrap;
padding: 10px;
}
div#tb .type-red {
	color: #666600;
}
div#tb .border-red { border-left-color: #666600; }

/* relevant for the tutorial - start */
#gallery { position: relative; }
  #pictures { position: relative; height: 408px; }
  #pictures img {
	position: absolute;
	top: 2px;
	left: 99px;
}
#prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }
/* relevant for the tutorial - end */

/* Creating a polaroid photo viewer with CSS3 and jQuery - start */
.polaroid { width:400px; height:342px; position:absolute; }
.polaroid img { width:400px; height:342px; margin:25px 0 0 15px; }
.polaroid p { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E; margin-top:15px; }
/* Creating a polaroid photo viewer with CSS3 and jQuery - end */



#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 50;
	right: 0;
	top: 0;
	background: url(../images/subscribe.png) no-repeat right top;
	text-indent: -9999px;
}