* {
  margin: 0;
  padding: 0;
}

/*a:link {color: #009500; text-decoration: none}*/
a:visited {color: #6600FF; text-decoration: none}
a:hover {color: #FF6633; text-decoration: underline}
a:active {color: #FF6600; text-decoration: underline}

body {
  font-size: 98%;
  font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  margin: 0;
  padding: 0;
  background-image: url(../img/b_bcg001.gif);
  background-repeat: repeat;
  scrollbar-3dlight-color:#ffa970;
  scrollbar-arrow-color:#ffffff;
  scrollbar-darkshadow-color:#ffa970;
  scrollbar-face-color:#ffa970;
  scrollbar-highlight-color:#ffffff;
  scrollbar-shadow-color:#000000;
  /*scrollbar-track-color:#ffa970;*/
}

#wrapper {
  text-align: left;
  margin: 0;
  padding: 0;
  width: 960px;
  height: auto;
  background-color: #fff4f4;
  color: #000000;
  border: 1px solid #cccccc;
}

#leftside {
  background-image: url(../img/b_bcg002.png);
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: fixed;
  _position: absolute;
  top: 0;
  left: 0;
  width: 192px;
  height: 100%;
}

#leftsideheader {
  margin: 0px;
  padding: 0;
  height: 140px;
  position: relative;
  color: #000066;
}

#leftsideline {
  margin: 0;
  padding: 0;
  height: 16px;
  position: relative;
  background-image: url(../img/b_lin022.png);
  background-repeat: no-repeat;
  background-position: center;
  color: #000066;
}

#leftsidenavigation {
  margin: 0;
  padding: 0;
  position: relative;
  height: 200px;
}

#leftsidefooter {
  margin: 0;
  padding: 0;
  color: #000066;
}

#rightside {
  margin: 0px 0px 0px 191px;
  padding: 0;
  width: 768px;
  height: 100%;
  background-image: url(../img/head001.png);
  background-repeat: no-repeat;
  color: #ffffff;
  border-left: 1px solid #cccccc;
}

#rightsideheader {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  height: 100px;
  position: relative;
}

/* 本文 */
#rightsideprecontents {
  margin: 10px 10px 10px 10px;
  padding: 10px 10px 0px 10px;
  float: left;
  height: 70px;
  /*width: 65%;*/
  color: #696969;
  line-height: 120%;
}
#rightsidecontentsbg {
  margin: 0;
  padding: 0;
  float: left;
  background-image: url(../img/hokkaido.png);
  background-repeat: repeat;
}
#rightsidecontents {
  margin: 0px 10px 10px 10px;
  padding: 0px 10px 10px 10px;
  float: left;
  /*width: 65%;*/
  color: #696969;
  line-height: 120%;
}

#rightsidefooter {
  clear: both;
  font-size: 90%;
  margin: 0px 0px 0px 0px;
  padding: 22px 30px 22px 30px;
  border-top: 1px solid #666666;
  text-align: left;
  color: #000000;
  background-image: url(../img/foot001.png);
  background-repeat: no-repeat;
}

#sitemap {
  margin: 0;
  padding: 22px 20px 328px 20px;
  font-size: 73%;
  font-family: serif, cursive, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  background-color: #191919;
  color: #ffffff;
  border-top: 1px solid #666666;
  text-align: left;
}

/* ---------------------------------------- #globalnaviの指定 */
#mainmenu {
  font-size: 95%;
  list-style-type: none;
  width: 192px;
  height:200px;
  position: absolute;
  left: 0;
}

#mainmenu li {
  width: 192px;
  float: left;
}

#mainmenu li a {
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  width: 192px;
  height: 28px;
  display: block;
  padding-top: 12px;
}

#mainmenu li a:hover {
  font-size: 135%;
  font-style: italic;
  text-decoration: none;
}

#mainmenu ul {
  list-style-type: none;
  width: 192px;
  height: auto;
  position: static;
  display: none;
}

#mainmenu ul li {
  width: 192px;
  float: none;
}

#mainmenu ul li a {
  text-align: left;
  text-decoration: none;
  width: 182px;
  height: auto;
  display: block;
  padding: 4px;
  border: 1px outset #cccccc;
  background-image: none;
  background-color: #cccccc;
  color: #000000;
}

#mainmenu ul li a:hover {
  text-decoration: none;
  border: 1px outset #666666;
  background-image: none;
  background-color: #666666;
  color: #ffffff;
}

#mainmenu .offmenu ul {
  display: none;
}

#mainmenu .onmenu ul {
  display: block;
}

/*------off*/
#g_navi01 a {
  background:url(../img/b_bcg002_off.png) no-repeat 0px -156px;
  width:192px;
}
#g_navi02 a {
  background:url(../img/b_bcg002_off.png) no-repeat 0px -196px;
  width:192px;
}
#g_navi03 a {
  background:url(../img/b_bcg002_off.png) no-repeat 0px -236px;
  width:192px;
}
#g_navi04 a {
  background:url(../img/b_bcg002_off.png) no-repeat 0px -276px;
  width:192px;
}
#g_navi05 a {
  background:url(../img/b_bcg002_off.png) no-repeat 0px -316px;
  width:192px;
}

/*------hover*/
#g_navi01 a:hover {
  background:url(../img/b_bcg003.png) no-repeat 0px -156px;
  border-left: 1px inset #cccccc;
  border-top: 1px inset #cccccc;
  border-right: 2px inset #cccccc;
  border-bottom: 2px inset #cccccc;
}
#g_navi02 a:hover {
  background:url(../img/b_bcg003.png) no-repeat 0px -196px;
  border-left: 1px inset #cccccc;
  border-top: 1px inset #cccccc;
  border-right: 2px inset #cccccc;
  border-bottom: 2px inset #cccccc;
}
#g_navi03 a:hover {
  background:url(../img/b_bcg003.png) no-repeat 0px -236px;
  border-left: 1px inset #cccccc;
  border-top: 1px inset #cccccc;
  border-right: 2px inset #cccccc;
  border-bottom: 2px inset #cccccc;
}
#g_navi04 a:hover {
  background:url(../img/b_bcg003.png) no-repeat 0px -276px;
  border-left: 1px inset #cccccc;
  border-top: 1px inset #cccccc;
  border-right: 2px inset #cccccc;
  border-bottom: 2px inset #cccccc;
}
#g_navi05 a:hover {
  background:url(../img/b_bcg003.png) no-repeat 0px -316px;
  border-left: 1px inset #cccccc;
  border-top: 1px inset #cccccc;
  border-right: 2px inset #cccccc;
  border-bottom: 2px inset #cccccc;
}

/*------on*/
#g_navi01_on a {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -156px;
  width:192px;
}
#g_navi02_on a {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -196px;
  width:192px;
}
#g_navi03_on a {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -236px;
  width:192px;
}
#g_navi04_on a {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -276px;
  width:192px;
}
#g_navi05_on a {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -316px;
  width:192px;
}

/*------enable*/
#g_navi01_ena {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -156px;
  width:192px;
  height:40px;
}
#g_navi02_ena {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -196px;
  width:192px;
  height:40px;
}
#g_navi03_ena {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -236px;
  width:192px;
  height:40px;
}
#g_navi04_ena {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -276px;
  width:192px;
  height:40px;
}
#g_navi05_ena {
  background:url(../img/b_bcg002_on.png) no-repeat 0px -316px;
  width:192px;
  height:40px;
}

/*------disable*/
#g_navi01_dis {
  background:url(../img/b_bcg002_dis.png) no-repeat 0px -156px;
  width:192px;
  height:40px;
}
#g_navi02_dis {
  background:url(../img/b_bcg002_dis.png) no-repeat 0px -196px;
  width:192px;
  height:40px;
}
#g_navi03_dis {
  background:url(../img/b_bcg002_dis.png) no-repeat 0px -236px;
  width:192px;
  height:40px;
}
#g_navi04_dis {
  background:url(../img/b_bcg002_dis.png) no-repeat 0px -276px;
  width:192px;
  height:40px;
}
#g_navi05_dis {
  background:url(../img/b_bcg002_dis.png) no-repeat 0px -316px;
  width:192px;
  height:40px;
}

/* ---------------------------------------- #パンくずリストの指定 */
ol#topicPath {
  argin: 20px 0;
  padding: 0;
  font-size: 100%;
  list-style: none;
}

ol#topicPath li {
  float: left;
  padding-right: 6px;
  padding-left: 36px;
  background: url(../img/next.gif) no-repeat 0 50%;
}

ol#topicPath li.home {
  padding-left: 28px;
  background: url(../img/home.png) no-repeat 0 50%;
}

ol#topicPath li a:link,
ol#topicPath li a:visited {
  color: #0000FF;
  text-decoration: underline;
}

ol#topicPath li a:hover,
ol#topicPath li a:active {
  color: #FF0000;
  text-decoration: underline;
}

/* ---------------------------------------- #見出しの指定 */
h1 {
  font-size: 120%;
  color: #020375;
  margin-bottom: 0.5em;
  padding: 0.5em 0 0.5em 0;
  /*background: url(../img/h1_bg.gif) no-repeat 0 50%;*/
  /*border-left: 2px inset #cccccc;*/
  border-bottom: 1px inset #cccccc;
  width: 100%;
}

h2 {
  font-size: 100%;
  color: #020375;
  margin-bottom: 0.3em;
  padding: 0.5em 0 0.3em 0;
  /*background: url(../img/h2_bg.gif) no-repeat 0 50%;*/
  /*border-left: 2px inset #cccccc;*/
  border-bottom: 1px inset #cccccc;
  width: 100%;
}

h3 {
  font-size: 100%;
  color: #020375;
  margin-bottom: 0.3em;
  padding: 0.5em 0 0.3em 0;
  /*background: url(../img/h2_bg.gif) no-repeat 0 50%;*/
  /*border-left: 2px inset #cccccc;*/
  border-bottom: 1px inset #cccccc;
  width: 100%;
}

h6 {
  font-size: 80%;
  color: #020375;
  margin-bottom: 0.3em;
  padding: 0.5em 0 0.3em 0;
  /*background: url(../img/h6_bg.gif) no-repeat 0 50%;*/
  /*border-left: 1px inset #cccccc;*/
  border-bottom: 1px inset #cccccc;
  width: 100%;
}

.browsererror{
  margin: 0px 0px 0px 191px;
  padding: 20px;
  width: 731px;
  text-align: center;
  background-color: #ff6699;
  border-bottom: 1px inset #cccccc;
}

h2.newslogo {
  font-size: 260%;
  background: url(../img/h2_news.png) no-repeat 0 0;
}
h2.servicelogo {
  font-size: 280%;
  background: url(../img/h2_service.png) no-repeat 0 0;
}
h2.samplelogo {
  font-size: 280%;
  background: url(../img/h2_sample.png) no-repeat 0 0;
}
h2.processlogo {
  font-size: 280%;
  background: url(../img/h2_process.png) no-repeat 0 0;
}
h2.chargelogo {
  font-size: 280%;
  background: url(../img/h2_charge.png) no-repeat 0 0;
}
h2.inquirylogo {
  font-size: 280%;
  background: url(../img/h2_inquiry.png) no-repeat 0 0;
}

h3.planlogo {
  font-size: 280%;
  background: url(../img/h3_plan.png) no-repeat 0 0;
}

h3.examplelogo {
  font-size: 280%;
  background: url(../img/h3_example.png) no-repeat 0 0;
}

h3.optionslogo {
  font-size: 280%;
  background: url(../img/h3_options.png) no-repeat 0 0;
}

h3.maintenancelogo {
  font-size: 280%;
  background: url(../img/h3_maintenance.png) no-repeat 0 0;
}

h3.discountlogo {
  font-size: 280%;
  background: url(../img/h3_discount.png) no-repeat 0 0;
}

h3.otherslogo {
  font-size: 280%;
  background: url(../img/h3_others.png) no-repeat 0 0;
}

h3.paymentlogo {
  font-size: 280%;
  background: url(../img/h3_payment.png) no-repeat 0 0;
}

#p_chg1 {
  color: #645ab9;
}
#p_chg2 {
  color: #696969;
}
#p_chg3 {
  color: #696969;
}

TABLE#tableid {
  line-height: 125%;
  font-size: 110%;
  background-color: #fff4ea;
}

THEAD {
  background-color: #ffefea;
}

TABLE.tablecenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------------------------------------- #テキストボックスの指定 */
/* --- ボックス --- */
.textBox {
  /*background-color: #fff9f9;*/
  background: url(../img/bcg_textbox002.png);
  background-repeat: repeat;
  border: 2px #909090 solid;
}

.textBox h3 {
  font-size: 150%;
  color: #000066;
  text-align: center;
  font-weight: bold;
  margin: 4px 4px 4px 4px;
  padding-right: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid #666666;
}

/* --- 本文領域 --- */
.textBox .textArea {
  font-size: 110%;
  margin: 2px 6px 2px 6px;
  padding: 0;
  overflow: auto;
}

/* --- 本文領域内の段落 --- */
.textBox .textArea p {
  margin: 2px 6px 2px 6px;
  display: inline;
  border-bottom: 1px solid #000000;
}

.textBox .textArea a {
  text-decoration: none;
  /*padding: 5px 0;*/
  display: block;
  /*width: 100%;*/
  border-bottom: 1px solid #999999;
}

.textBox .textArea a:link {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #000000;
}

.textBox .textArea a:visited {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #000000;
}

.textBox .textArea a:hover {
  color: #ffff80;
  text-decoration: none;
  border-bottom: 1px solid #000000;
}

.textBox .textArea a:active {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #000000;
}

/* ---------------------------------------- #Coda-Slider jQuery pluginの指定 */
/* Insignificant stuff, for demo purposes */
.panel h2.title { margin:0; padding:0; color:#cb2121; font-size:140%; font-weight:bold; border-bottom-style:none !important;}
/* Most common stuff you'll need to change */
.coda-slider-wrapper { /*margin:0; padding:20px 0;*/ }
.coda-slider { /*background:#ebebeb*/ }
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { /*height:200px;*/ overflow:auto !important; /*padding-right:20px*/ }
/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width:730px } 
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width:730px }
.coda-slider-wrapper.arrows .coda-slider { /*margin:0 10px*/ }
/* Arrow styling */
.coda-nav-left a, .coda-nav-right a { /*background:#000; color:#fff; padding:5px; width:100px*/ }
/* Tab nav */
.coda-nav ul li a.current { background:#ffb167 }
/* Panel padding */
.coda-slider .panel-wrapper { /*padding:20px*/ }
/* Preloader */
.coda-slider p.loading { /*padding:20px; text-align:center*/ }
/* Don't change anything below here unless you know what you're doing */
/* Tabbed nav */
.coda-nav ul { clear:both; display:block; margin:auto; overflow:hidden; }
.coda-nav ul li { display:inline; font-weight:bold; }
.coda-nav ul li a { background:#666666; color:#383b6a; display:block; float:left; margin-right:1px; padding:5px 12px; text-decoration:none; border-right: 1px inset #aaaaaa; border-bottom: 1px inset #aaaaaa; }
.coda-nav ul li a:hover { color:#383b6a; border-right: 1px inset #333333; border-bottom: 1px inset #333333; }
/* Miscellaneous */
.coda-slider-wrapper { clear:both; overflow:auto }
.coda-slider { float:left; overflow:hidden; position:relative }
.coda-slider .panel { display:block; float:left }
.coda-slider .panel-container { position:relative }
.coda-nav-left, .coda-nav-right { float:left }
.coda-nav-left a, .coda-nav-right a { display:block; text-align:center; text-decoration:none }

/* Styling for specific sliders */
/* Tab nav */
.c_coda-nav-1 ul li a.current { background:#ffb167 }
/* Tabbed nav */
.c_coda-nav-1 ul { clear:both; display:block; margin:auto; overflow:hidden; }
.c_coda-nav-1 ul li { display:inline; }
.c_coda-nav-1 ul li a { background:#666666; color:#383b6a; display:block; float:left; margin-right:0px; padding:0px; text-decoration:none; }
#coda-nav-left-1 { /*margin:0 1px 0 135px;*/ }
#coda-nav-left-1, #coda-nav-1, #coda-nav-right-1 { /*float:left;*/ }
#coda-nav-1 ul { /*margin:0; padding:0;*/ list-style:none; }
#coda-nav-1 a { /*margin:0; padding:4px;*/ list-style:none;/*margin-right:1px;*/ }
#coda-nav-1 li { /*margin:0; padding:0;*/ list-style:none; }
#coda-nav-left-1 a, #coda-nav-right-1 a { /*padding:4px; width:20px;*/ }
#coda-slider-1 { clear:both; }

/* ---------------------------------------- #Marquee jQuery pluginの指定 */
ul.marquee {
  display: block;
  margin:0; padding:0;
  list-style: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
  /* optional */
  width: 704px; height: 26px;
  /*background-color: #f2f2ff;
  border: 1px solid #08084d;*/
}
ul.marquee li {
  margin:0;
  list-style:none;
  position: absolute;
  top: -999em; left: 0;
  display: block;
  white-space: nowrap;
  /* optional */
  /*font: 14px Arial, Helvetica, sans-serif;*/
  padding: 3px 5px;
}

/* ---------------------------------------- #Self-resizing navigation の指定 */
.codropsmenu1{
  margin:20px 0; padding:3px;
  height:30px;
  background-color:#191919;
}
.codropsmenu1 ul{
  list-style:none;
  margin:0; padding:0;
}
.codropsmenu1 ul li{
  list-style:none;
  margin:0; padding:0;
  display:inline;
  position:relative;
}
.codropsmenu1 ul li a{
  float:left;
  height:28px;
  line-height:30px;
  text-align:center;
  text-decoration:none;
  display:block;
  background-color:#191919;
  font-size:12px;
  color:#dddfdf;
  text-shadow: 0 1px 0 #000000;
  border-right:1px solid #000000;
  border-left:1px solid #404040;
  border-top:1px solid #191919;
  border-bottom:1px solid #191919;
  outline:none;
  cursor:pointer;
  overflow:hidden;
}
.codropsmenu1 ul li a.last{
  border-right:1px solid #191919;
}
.codropsmenu1 ul li a.first{
  border-left:1px solid #191919;
}
.codropsmenu1 ul li a:hover,
.codropsmenu1 ul li a.selected{
  background-color:#404;
  border-top:1px solid #111111;
  border-bottom:1px solid #111111;
  color:#ffffff;
}

/* ---------------------------------------- #tooltip の指定 */
#dynatip {
	display:none;
	background:transparent url("../sample/jqsample/images/jquery.tools/black_arrow.png");
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;
	z-index: 9999;
}
 
/* style the trigger elements */
#dyna {
	text-align:center;
}
#dyna img {
	border:0;
	cursor:pointer;
}
/* override the arrow image of the tooltip */
#dynatip.bottom {
	background-image:url("../sample/jqsample/images/jquery.tools/black_arrow_bottom.png");
	padding-top:40px;
	height:55px;
}
 
#dynatip.bottom {
	background-image:url("../sample/jqsample/images/jquery.tools/black_arrow_bottom.png");
}
/*
</style>
<!-- use gif image for IE --> 
<!--[if lt IE 7]>
<style>
#dynatip {
	background-image:url("../sample/jqsample/images/jquery.tools/black_arrow_bottom.gif");
}
 
#dynatip.bottom {
	background:url("../sample/jqsample/images/jquery.tools/black_arrow_bottom.gif");
}
</style>
<![endif]-->
*/

/* ポップアップメッセージを表示する*/
#dialog-overlay {
  /* set it to fill the whil screen */
  width:100%;
  height:100%;
  /* transparency for different browsers */
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  background:#000;
  /* make sure it appear behind the dialog box but above everything else */
  position:absolute;
  top:0;left:0;
  z-index:9990;
  /* hide it by default */
  display:none;
}
#dialog-box {
  /* css3 drop shadow */
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  /* css3 border radius */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background:#eee;
  /* styling of the dialog box, i have a fixed dimension for this demo */ 
  width:360px;
  /* make sure it has the highest z-index */
  position:absolute;
  z-index:9999;
  /* hide it by default */
  display:none;
}
#dialog-box .dialog-content {
  /* style the content */
  text-align:left;
  margin:13px; padding:10px;
  color:#666;
  font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  font-size:100%;
}
a.button {
  /* styles for button */
  margin:10px auto 0 auto;
  padding: 5px 10px 6px;
  text-align:center;
  display: block;
  width:50px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  line-height: 1;
  /* button color */
  background-color: #e33100;
  /* css3 implementation :) */
  /* rounded corner */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  /* drop shadow */
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  /* text shaow */
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
}
a.button:hover {
  background-color: #c33100;
}
/* extra styling */
#dialog-box .dialog-content p {
  margin:0;
}
#dialog-box .dialog-content ul {
  margin:10px 0 10px 20px;
  padding:0;
  height:50px;
}
/*#back {
  bottom: 0;
  left: 0;
}*/