@charset "utf-8";
/* =reset
----------------------------------*/
body,div,dl,dt,dd,
h1,h2,h3,h4,h5,h6,pre,form,
fieldset,legend,input,textarea,
blockquote,table,caption,
tbody,tfoot,thead,th,td,option{
margin:0;
padding:0;
}
table{
border-collapse:collapse;
border-spacing:0;
}
fieldset,img,
abbr,acronym{
border:0;
}
address,caption,cite,
code,dfn,th,var,
optgroup,em,b,i{
font-style:normal;
font-weight:normal;
}

caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
a,ins,del{
text-decoration: none;
}
img{
vertical-align: bottom;
}
object,embed,th,td{
vertical-align: top;
}
input, textarea, select {
font-size: 1em;
}


.floatLeft{
	float: left;
}
.floatRight{
	float: right;
}
.floatLeftMargin{
	float: left;
	margin-right: 10px;
}
.floatRightMargin{
	float: right;
	margin-left: 10px;
}
.clear { clear: both; }


.txtCenter{ text-align: center; }
.txtRight{ text-align: right; }
.txtLeft{ text-align: left; }

.clearfix:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
.clearfix{
display:inline-block;
}
/* MacIE begin \*/
*+html .clearfix{
height:1%;
}
* html .clearfix{
height:1%;
}
.clearfix{
display: block;
}
/* Mac IE end */


.small{
	font-size:70%;
	font-weight:normal;
}

.small2{
	font-size:12px;
	font-weight:bold;
	letter-spacing:-0.05em;
}

.red{color:#F00;}
	
/*layout*/

body{
	background:#eee;
	font-family:"メイリオ", Meiryo, Osaka,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic";
	line-height:1.3em;
	font-size:95%;
	color:#333333;
	font-size:13px;
}

a,
a:link,
a:visited {
	text-decoration:underline;
	color:#0085B2;
}
a:hover,
a:active {
	text-decoration:none;
	color:#6CF;
}

a img{
	border:none;
}
a:hover img{
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
}

#container {
	width: 830px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding:10px;
	background:#fff;
	line-height:1.5em;
	min-height:600px;
}
h1 {
	font-weight: normal;
	font-size: 90%;
	margin-bottom: 20px;
}
#header {
	width:850px;
	margin:0 auto 0 auto;
	background:#fff;
	text-align:left;	
}
#header-top{
	background: #B0CBCE url(http://www.jcsr.co.jp/img/bg-header1.gif) repeat-x;
	height: 25px;
	margin-bottom: 5px;
	padding-bottom: 0px;
}
#header-top h1{	font-size:10px; padding-left:10px; padding-top:3px;}
#header-top p{margin:0; padding:3px 10px 0px 10px;}
#header-mid{margin:0 ; padding:0px 10px 0px 10px; border-bottom : 5px solid #eee;}

/* nav */
#gnav{
    margin:0px auto 10px auto;
	padding:3px 10px 0px 10px;
	width:830px;
	height:30px;
	background:url(http://www.jcsr.co.jp/img/bg-gnav.gif) repeat-x #274B68;
	border-bottom:4px solid #F78148;
}
#gnav a,
#gnav a:link,
#gnav a:visited {
	text-decoration:none;
	color:#fff;
	font-weight:bold;
}
#gnav a:hover,
#gnav a:active {
 background:#069;
 color: #FFF;
}
ul#menu { margin: 0; padding: 0; list-style: none; position: relative; }
ul#menu ul {
 width: 250px; /* Sub Menu Width */
 margin-top: 15px;
 list-style: none;
 display: none;
 position: absolute;
 top: 100%;
 left: -85%;
}
ul#menu ul ul,ul#menu ul ul ul { top: 0; left: 100%; }
ul#menu li { float: left; display: inline; position: relative; }
ul#menu ul li { width: 100%; display: block; }

/* Root Menu */
ul#menu a {
 padding: 6px;
 float: left;
 display: block;
 color: #666;
 text-decoration: none;
 height: 1%;
}

/* Root Menu Hover Persistence */
ul#menu a:hover,ul#menu li:hover a,ul#menu li.iehover a {
 background:#069;
 color: #FFF;
}

/* 2nd Menu */
ul#menu li:hover li a,ul#menu li.iehover li a {
 float: none;
 background:#E5E5E5;
 border-bottom:1px #fff solid;
 color:#333;
}

/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover,ul#menu li:hover li:hover a,ul#menu li.iehover li a:hover,ul#menu li.iehover li.iehover a {
 background:#9CC0CF;
}

/* Hover Function - Do Not Move */
ul#menu li:hover ul ul,ul#menu li:hover ul ul ul,ul#menu li.iehover ul ul,ul#menu li.iehover ul ul ul { display: none; }
ul#menu li:hover ul,ul#menu ul li:hover ul,ul#menu ul ul li:hover ul,ul#menu li.iehover ul,ul#menu ul li.iehover ul,ul#menu ul ul li.iehover ul { display: block; }


/* contents */
.tc1{
	width:250px;
	margin-right:10px;
	padding:10px;
	background:url(http://www.jcsr.co.jp/img/bg-tc.gif) #fff repeat-x;
	text-align:left;
}
.tc2{
	width:250px;
	margin-right:10px;
	float:left;
	padding:10px;
	background:url(http://www.jcsr.co.jp/img/bg-tc.gif) #fff repeat-x;
	text-align:left;	
}

.tc3{
	width:250px;
	padding:10px;
	background:url(http://www.jcsr.co.jp/img/bg-tc.gif) #fff repeat-x;
	text-align:left;
}

h4{ font-weight:bold; font-size:15px;}

h2{ background:url(http://www.jcsr.co.jp/img/bg-h2.jpg) repeat-x ; height:30px; padding-left:10px; padding-top:10px; font-weight:bold; font-size:15px;}
h3{ height:30px; margin-top : 15px; margin-bottom :-18px; padding-top:10px; font-weight:bold; font-size:13px;}

#pagetop{text-align: right; margin-top: 55px;}

/* footer */
#footer{
	margin-top:20px;
	border-top:1px #ddd solid;
	width :830px;
}
#footer p{
	font-size:85%;
}
#f-link{
	width: 450px;
	float: left;
	margin-top: 10px;
	line-height: 1.5em;
}
#f-logo{float:right; margin-top:20px;}

.copy{font-size:10px; text-align:center; color:#777;}

#breadList { 
height: 30px; 
margin-bottom:10px;
}
#breadList * {
	margin: 0px !important;
	padding: 0px !important;
	list-style: none;
	font-size: 12px;
}
#breadList ul li {
	float: left;
	background: url(http://www.jcsr.co.jp/img/breadlist_arrow.gif) no-repeat right center;
	padding-right: 15px !important;
	margin-right: 10px !important;
}
#breadList ul .end { background: url(none); }


table {
	width: 100%;
	border-collapse: collapse;
}
th.t_top {
    border-top: #b3b3b3 4px solid;
}
th {
	border-bottom: #e3e3e3 1px solid;
	border-left: #e3e3e3 1px solid;
	text-align: left;
	background: #f7f7f7;
	padding: 10px;
	font-weight: normal;
}
td.t_top {
	border-top: #1f6a96 4px solid;
}
td {
	border-bottom: #e3e3e3 1px solid;
	border-right: #e3e3e3 1px solid;
	text-align: left;
	padding: 10px;
	background-color:#FFFFFF;
}

.section{
	margin-bottom:30px;
}

dl.aboutlist {  
    overflow: hidden;  
    zoom: 1; 
}  
dl.aboutlist dt {  
    margin-bottom: 5px;  
    padding-bottom: 5px;  
    width: 120px;  
    float: left;  
    clear: both;    
}  
dl.aboutlist dd {  
    margin-bottom: 5px;  
    padding: 0 0 5px 120px;  
    border-bottom: 1px dotted #999;  
}  

td p{ margin:0; padding:0; }

#blank{ background:#FFF; }
#blank-container{ width:800px; margin:10px auto 10px auto;}

.li-margin{ margin-bottom:5px; }

#rssArea{margin-top:15px;}
#rssArea dt {
  clear: left;
  float: left;
  margin: 0 0 0.8em;
  width: 7.5em;
  border-left: solid 8px #CCC;
  padding-left: 5px;
  color: #000;
}

#rssArea dd {
  margin-bottom: 0.8em;
  margin-left: 7.5em;
}

.tbl2 td{border:1px solid #39C;}
.tbl2 .tdbg{color:#fff; font-weight:bold; background-color:#39C;}

.red li{font-size:15px;}

.bgorange{border:3px solid #FFAB57; padding-top:5px;}
.bgorange li,.bglib li{font-size:15px;}

.cs h4{color:#349DC0; border-bottom:1px dotted #F90; padding-bottom:5px; margin:10px;}

.bglib{border:3px solid #AFDAE4; padding-top:5px;}
.bglib p{margin-right:10px; margin-left:10px;}

#vertical {
				clear: both;
			}

			#horizon {
				margin: 0px auto;
				border-top:1px solid #ccc;
				border-bottom:1px solid #ccc;
				border-right: 1px solid #ccc;
			}

		/*
			Vertical Accordions
		*/
		
		
		.accordion_toggle_active {
			background: #E0542F;
			color: #ffffff;
		}
		
		.accordion_content {
			background-color: #ffffff;
			overflow:hidden;
		}

			
		/*
			Horizontal Accordion
		*/
		
		.horizon {
			/* REQUIRED */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */
			display: block;
			height: 245px;
			width: 25px;
			background:#98D1CC;
			color: #FFFFFF;
			text-decoration: none;
			outline: none;
			border-right: 1px solid #C8C8C8;
			cursor: pointer;
			margin: 0;
			padding:5px 5px 0px 0px;
		}
		h1.horizon{-webkit-writing-mode: vertical-rl;
writing-mode: tb-rl;
direction:ltr;}
		.horizon_active {
			background: #0673BC;
			color:#ffffff;
		}
		
		.horizontal_accordion_content {
			/* REQUIRED */
			height: 250px;	/* We need to define a height for the accordion as it stretches the width */
			float: left;	/* This make sure it stays horizontal */

			/* REQUIRED */
			overflow:hidden;
			background-color: #ffffff;
		}
		
/* for the other script */
		.third {
			float: left;
			display: block;
			height: 250px;
			width: 30px;
			background: #DCDCDC;
			color: #FFFFFF;
			text-decoration: none;
			outline: none;
			border-right: 1px solid #C8C8C8;
			cursor: pointer;
			margin: 0;
		}
		
		.third_active {
			background: #171B20;
			color: #ffffff;
		}
		
		.third_content {
			height: 250px;
			float: left;
			background-color: #ffffff;
			overflow: auto;
		}
.inn{padding-top:10px;padding-right:10px;}

table.mailform tr th,table.mailform tr td {
	text-align: left;
	font-weight: normal;
	font-size: 12px;
	border: solid 1px #999999;
	padding: 7px 5px 7px 5px;
}
table.mailform tr th {
	width: 150px;
}
table.mailform tr th span {
	color: #CC0000;
	font-size: 10px;
}
table.mailform tr th p {
	margin: 0px;
	padding: 0px;
	font-size: 10px;
	color: #999999;
}
table.mailform tr td textarea {
	width: 100%;
	height: 120px;
}

table.mailform th.t_top {
    border-top: #b3b3b3 4px solid;
}

table.mailform td.t_top {
	border-top: #1f6a96 4px solid;
}



.comment {
	width : 450px;
	height : auto; 
}

#login {
	width : 300px;
	height : 150px;
	margin : 100px auto;
	border : 2px solid #bbb;
}

#login .top {
	height : 20px;
	border-bottom : 2px solid #bbb;
	background : #bbb;
	text-align: center;
}

#login .under {
	height : 120px;
	padding : 30px 10px 10px 10px;
	text-align: left;
}

#login h3 {
	margin-top : 0;
}



#select-design {
	width : 760px;
	height : 180px;
	margin : 35px auto;
}

#select-design .design-box {
	width : 110px;
	height : 65px;
	margin : 10px;
	padding-left : 5px; 
	float : left;
	border : 2px solid #ddd;
	background:url(../img/design-image.gif) repeat-x;
}

#card-box {
	width : 500px;
	height : 280px;
	margin : 45px auto;
	border : 2px solid #ddd;
	background:url(../img/back1.gif) repeat-x;
}

#card-box .title {
	margin : 20px;
	padding : 5px;
	width : 300px;
	height : 20px;
	float : left;
}

#card-box .title .inner {
	border : 1px solid #ddd;
	height : 20px;
	background: #fff;
}

#card-box .number {
	margin : 20px;
	padding : 5px;
	width : 50px;
	height : 20px;
	border : 1px solid #ddd;
	float : right;
	background: #fff;
}

#card-box .text {
	padding : 5px;
	width : 380px;
	height : 80px;
	margin : 2px auto;
	border : 1px solid #ddd;
	background: #fff;
}

#card-box .url {
	padding : 5px;
	width : 300px;
	height : 20px;
	margin-left : 25px;
	border : 1px solid #ddd;
	float : left;
	background: #fff;
}

#card-box .special {
	margin-left : 20px;
	float : left;
}
	
#card-box .qr {
	width : 90px;
	height : 90px;
	margin-right : 25px;
	border : 2px solid #ddd;
	float : right;
	background:url(../img/qr.gif) repeat-x;
}