@charset "utf-8";

body {margin:0; padding:0; line-height:135%;font-family:'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka,Arial,sans-serif;}
h1,h2,h3,h4,h5,h6,p,ol,ul,li,span,a,dl,dt,dd,div,img {margin: 0; padding: 0;}
h1,h2,h3 {text-indent: -9999px;}
img {border: none;}

body {background: url("images/top_bg.jpg") repeat-x;}

#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
background: url("images/bg.gif") repeat-y;
}

ul, li {list-style: none;}
a {text-decoration: none; color:#0099CC;}
a:hover {text-decoration: underline;}

#top {height:54px;}

#header {
font-size: 78%;
width: 960px;
margin-top: 22px;
margin-left: auto;
margin-right: auto;
position: relative;
height: 53px;
}

html>body #header {
height: auto;
}

#header #logo-ctn {
width:350px;
margin-left:80px;
}

#header h1 {
width: 210px;
height: 20px;
display: block;
background: url("images/header.gif") no-repeat;
float:left;
}

#header #tohoku {
width: 55px;
height: 20px;
display: block;
background: url("images/header.gif") no-repeat -210px 0;
float:left;
}

#header #tohoku a {
width: 55px;
height: 20px;
display: block;
}

#header_left {float: left; width: 530px;}
#header_right {position: absolute; top: 0; right: 0; float: right; width: 390px; margin-top: -4px;}
html>body #header_right {position: relative;}

#header_right h2 {
width: 411px;
height: 30px;
display: block;
background: url("images/header.gif") 0 -30px no-repeat;
margin-left: 80px;
float: right;
$margin-left:-25px;
_margin-left: 80px;
}

#header_right ul {float: right; margin-right:-100px;}
#header_right ul li {float: left; padding-left: 12px;}
html>body #header_right ul {margin-right:0;}

#header_right ul li a {background: url("images/ar.gif") 2px no-repeat; padding-left:10px;}
p#logo {float: left; margin-right: 8px;}


#key h2 { text-indent:0;}
#key {
background: url("images/key_bg.jpg") center top no-repeat;
color: #fff;
height: 240px;
text-align: center;
clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
$margin-top:22px;
_margin-top:0;
}

/*#key h2 {text-indent: 0;}*/
#key img {
behavior:url(htc/iepngfix.htc);
}

#main {float: left; width: 800px;}

#contents {
padding: 10px 24px 10px 16px;
font-size: 86%;
height: 1%;;
}

html>body #contents {
margin-left: 170px;
padding: 10px 24px 10px 10px;
}

#contents h2 {
background-image: url("images/h2tls.gif");
background-repeat: no-repeat;
height: 20px;
display: block;
margin-top: 10px;
}

#contents h2#tl01 {background-position: 0 0; width:72px; float:left;}
#contents h2#tl02 {background-position: 0 -50px; width:162px; float:left; margin-bottom:0;}
#contents h2#tl03 {background-position: 0 -100px; width:50px; margin-bottom:5px;}
#contents h2#tl04 {background-position: 0 -150px; width:110px; margin-bottom:5px;}
p.showall {	text-align:right; margin:12px 0 10px; font-size:86%;}
p.showall a {background: url("images/ar.gif") 2px no-repeat; padding-left:10px;}

#contents_left {float: left; width: 300px;}
#contents_right {float: right; width: 263px;}

#sidenavi {width: 162px; background: #1B6BC2; float: left;}

div#sidenavi ul li a {
background-image: url("images/nav.png");
background-repeat: no-repeat;
display: block;
width: 150px;
text-indent: -9999px;
margin-left: 7px;
}

div#sidenavi p img {margin: 10px 0 0 7px;}

ul#gn li a {height: 36px;}
ul#sn li a {height: 20px;}
ul#cn li a {height: 12px; width: 100px!important;}

li#nav1 a {background-position: 0 0;}
li#nav1 a:hover, li#nav1 a.active {background-position: -151px 0;}
li#nav2 a {background-position: 0 -36px;}
li#nav2 a:hover, li#nav2 a.active {background-position: -151px -36px;}
li#nav3 a {background-position: 0 -72px;}
li#nav3 a:hover, li#nav3 a.active {background-position: -151px -72px;}
li#nav4 a {background-position: 0 -108px;}
li#nav4 a:hover, li#nav4 a.active {background-position: -151px -108px;}
li#nav5 a {background-position: 0 -144px;}
li#nav5 a:hover, li#nav5 a.active {background-position: -151px -144px;}
li#nav6 a {background-position: 0 -180px;}
li#nav6 a:hover, li#nav6 a.active {background-position: -151px -180px;}
li#nav7 a {background-position: -8px -361px;}
li#nav8 a {background-position: -8px -401px;}
li#nav9 a {background-position: 0 -240px;}
li#nav10 a {background-position: 0 -280px;}

ul#gn {margin-top: 10px;}

#contact {
background: url("images/contact_bg.gif") no-repeat;
width: 147px;
height: 130px;
margin: 5px 0 0 7px;
text-align: center;
}

#contact h3 {height: 32px;}
ul#cn { border-top: solid 1px #CCCCCC; width:130px; margin:5px 10px;}
ul#cn li {margin: 8px 0 -8px -35px;}
html>body ul#cn li {margin: 8px 0 0 -5px; $margin: 0 0 0 -35px;}

ul#sn {margin-top: 10px;}

#feature {
background: url("images/bg_right_ec.gif") 1px top no-repeat;
float: right;
width: 160px;
margin-top: 1px;
margin-bottom: 20px;
padding-bottom: 4px;
}

#feature h2 {height: 56px; display: block;}
#feature ul {margin: 0 0 3px 4px; padding-bottom: 5px;}
html>body #feature ul {margin:0 0 3px 7px;}
html>body #feature ul li {margin: 0 3px;}

#feature1 {
float: right;
width: 160px;
margin-top: 1px;
margin-bottom: 10px;
padding-bottom: 4px;
}

#feature1 h2 {height: 56px; display: block;}
#feature1 ul {margin: 0 0 4px 4px; padding-bottom: 5px;}
#feature1 ul li {margin: 0 4px -3px; height: 91px; float:left;}
html>body #feature1 ul {margin:0 0 4px 7px;}
html>body #feature1 ul li {margin: 0 4px;}

#feature2 {
background: url("images/bg_right.gif") -1px top no-repeat;
float: right;
width: 160px;
margin-bottom: 20px;
padding-bottom: 4px;
}

#feature2 h2 {height: 56px; display: block;}
#feature2 ul {margin: 0 0 3px 4px; padding-bottom: 5px;}
#feature2 ul li {margin: 0 3px -3px; height: 90px; float:left;}
html>body #feature2 ul {margin:0 0 3px 7px;}
html>body #feature2 ul li {margin: 0 3px;}

div#news {padding-bottom:1px; margin-bottom:40px; width:100%; position:relative;}
html>body div#news { margin-left:0;}
div#news dl { border-bottom:dotted 1px #D2DCDF; height:30px;}
div#news dt { font-weight:bold; color:#666; width:95px; float:left; font-size:92%; padding:8px 0 0 28px;font-family:'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka,Arial,sans-serif;}
html>body div#news dt { padding:8px 0 0 28px; width:95px;}
div#news dd { color:#666; font-size:100%; padding:8px 0 0; width:320px; float:left;font-family:'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', Osaka,Arial,sans-serif;}
div#news dd span {float:right; background-image:url("images/labels.gif"); background-repeat:no-repeat; padding-left:18px;}
div#news dd.ctg {clear:right; float:right; width:80px; padding-right:46px;}

span.lb_b {background-position: 0 6px;}
span.lb_g {background-position: 0 -44px;}

dl#casestudy {padding: 0;}
dl#casestudy dt {float: left; margin: 0 10px 0 0; clear:both;}
dl#casestudy dt img {border: solid 2px #C4DDF1; margin-bottom:20px;}
dl#casestudy dd a {font-weight: bold;}
dl#casestudy dd {border-bottom: dotted 1px #D2DCDF; padding:0 0 18px; margin: 0 0 18px;}

#find {background: #EBF7FC; padding: 5px; margin-bottom:20px;}
#find ul li a {
background-image:url("images/find_bts.gif");
background-repeat: no-repeat;
display: block; width: 253px; height: 52px;
text-indent: -9999px;
}

#find ul li#find01 a {background-position: 0 0;}
#find ul li#find02 a {background-position: 0 -101px; margin-top:5px;}
#find ul li#find03 a {background-position: 0 -201px; margin-top:5px;}
#find ul li#find01 a:hover {background-position: -300px 0;}
#find ul li#find02 a:hover {background-position: -300px -101px;}
#find ul li#find03 a:hover {background-position: -300px -201px;}

#bases { background: url("images/bases_bg.gif") no-repeat; border:solid 1px #D2DCDF; margin-bottom:20px; height:105px;}
#bases p { text-indent: -9999px; height:50px; display:block;}
#bases ul {width: 100px; margin-left:10px;}
#bases ul li {float: left; margin:0 10px 5px 0;}
#bases ul li a {background: url("images/ar.gif") 2px no-repeat; padding-left:10px;}

#recomend {
border-top: solid 2px #7E685D; border-left: solid 1px #BBB28E; border-right: solid 1px #BBB28E; border-bottom: solid 1px #BBB28E;
background: #FAF9F7; padding: 10px; margin-bottom: 20px;
}

#recomend h3 {background: url("images/recomend_tl.gif") no-repeat; border-bottom:double 3px #BBB28E; margin:5px 0 10px;}
#recomend p {margin-top: 5px;}
#recomend p.rightar {text-align:right;}
#recomend p.rightar a {background: url("images/ar.gif") 2px no-repeat; padding-left:10px;}

.ttop {margin: 20px 0; text-align: right;}

#footer {
clear: both;
background: url("images/footer_bg.gif") no-repeat;
border-top: solid 1px #cccccc;
border-left: solid 1px #cccccc;
border-right: solid 1px #cccccc;
height: 1%;
}

#footer h2 {
background: url("images/h2tls.gif") 0 -200px no-repeat;
width: 180px;
float: left;
margin: 20px 0 0 10px;
}

html>body #footer h2 {
margin: 20px 0 0 20px;
}

#footer ul {
float: left;
width: 140px;
margin: 20px 0 20px 10px;
}

#footer ul li a {
color: #999;
font-size: 78%;
}

#copyright {clear: both; color:#fff; background:#6f6f6f; font-size:72%; padding:5px;}
#copyright p {width: 500px; float:left;}
#copyright ul#fn {width:282px; float: right; margin-top:2px;}
#copyright ul#fn li {float: left;}
#copyright ul#fn li#fm01 {width:70px;}
#copyright ul#fn li#fm02 {width:90px;}
#copyright ul#fn li#fm03 {width:70px;}

html>body #copyright ul#fn {width: 275px;}
html>body #copyright ul#fn li#fm01 {width:90px;}
html>body #copyright ul#fn li#fm02 {width:110px;}
html>body #copyright ul#fn li#fm03 {width:70px;}

#copyright ul#fn li a {float:left;}

ul#fn li a {
background-image: url("images/bg_footer_menu.gif");
background-repeat:no-repeat;
display:block;
height:20px;
text-indent:-9999px;
}

li#fm01 a {background-position: 0 0; width:70px; margin-right:10px;}
li#fm02 a {background-position: 0 -50px; width:90px; margin-right:10px;}
li#fm03 a {background-position: 0 -100px; width:70px;}


.clear {clear: both;}