@charset "UTF-8";

/*
reset & base style sheet
last update 2010-08-24
*/

/*==================================================

css for sunny coding department - for common
http://sunny-coding-department.com/
copyright (c) 2010 sunny coding department all rights reserved.

author - sunny coding department
http://sunny-coding-department.com/

==================================================*/

/*========== body ==========*/
* {
margin: 0;
padding: 0;
}

body {
line-height: 24px;
color: #999999;
background: #555555 url(../image/background/stripes.png);
font-family: "Helvetica", sans-serif;
font-size: 12px;
text-align: center;
}

#wrapper {
margin: 0 auto;
width: 1000px;
text-align: left;
background: #ffffff;
}

#container {
padding: 0px 50px;
}

img {
border: 0;
behavior: expression(IEPNGFIX.fix(this));
} 

.clearLine {
clear:both; 
}

.float {
float: left;
}

ul {
list-style: none;
}

* html .iepngfix {
behavior: expression(IEPNGFIX.fix(this));
}

/*========== hypertext ==========*/
/* nomal */
a:link, a:visited {
color: #888888;
text-decoration: none;
border-bottom: 1px dotted #888888;
}

a:hover, a:active {
color: #7AC0DC;
text-decoration: none;
border: 0;
}

/* undecoration */
a.undecoration:link, a.undecoration:visited, a.undecoration:hover, a.undecoration:active {
border: 0;
text-decoration: none;
}

h1 a:link, h1 a:visited {
color: #555555;
text-decoration: none;
border: 0;
}

h1 a:hover, h1 a:active {
color: #888888;
text-decoration: none;
border: 0;
}

div#nav a:link, div#nav a:visited,
div.topic a:link, div.topic a:visited,
div#catch a:link, div#catch a:visited,
div.contentsFaq a:link, div.contentsFaq a:visited,
.noborder a:link, .noborder a:visited {
color: #888888;
border: 0;
}

div#footer a:link, div#footer a:visited,
.breadcrumbs a:link, .breadcrumbs a:visited {
color: #888888;
border: 0;
}

div#nav a:hover, div#nav a:active,
.breadcrumbs a:hover, .breadcrumbs a:active,
div.topic a:hover, div.topic a:active,
div#catch a:hover, div#catch a:active,
div#footer a:hover, div#footer a:active,
div.contentsFaq a:hover, div.contentsFaq a:active,
.noborder a:hover, .noborder a:active {
color: #7AC0DC;
border: 0;
}

div#nav a:link, div#nav a:visited, div#nav a:hover, div#nav a:active,
div.breadcrumbs a:link, div.breadcrumbs a:visited, div.breadcrumbs a:hover, div.breadcrumbs a:active,
div#footer a:link, div#footer a:visited, div#footer a:hover, div#footer a:active,
.breadcrumb a:link, .breadcrumb a:visited, .breadcrumbs a:hover, .breadcrumbs a:active,
div.portfolioImg a:link, div.portfolioImg a:visited, div.portfolioImg a:hover, div.portfolioImg a:active {
font-weight: normal;
border: 0;
}

.breadcrumb a:link, .breadcrumb a:visited, .breadcrumbs a:hover, .breadcrumbs a:active {
font-weight: bold;
}

/* attention */
a.attention:link, a.attention:visited {
color: #ffffff;
border-bottom: 1px dotted #ffffff;
}

a.attention:hover, a.attention:active {
color: #00ffff;
border-bottom: 1px dotted #00ffff;
}

/*========== txt ==========*/
/* heading */
h1 a {
display:block;
width: 180px;
height: 80px;
background:url(../image/background/logo.png);
background-repeat:no-repeat; 
behavior: expression(IEPNGFIX.fix(this));
}

h1 span {
display:none;
}

h2 {
margin-bottom: 10px;
padding-bottom: 5px;
border: 0;
width: 100%;
height: 50px;
color: #999999;
clear: both;
font-size: 17px;
font-weight: bold;
text-align: left;
background:url(../image/background/h2_base.png) 250% 20%;
background-repeat: repeat-x;
}

span.plus {
padding-left: 5px;
color: rgb(128, 200, 229);
}

div#catch h2 {
margin-bottom: 50px;
border: 0px;
line-height: 50px;
color: #dddddd;
font-size: 50px;
background: none;
}

div.catch span {
color: #222222;
font-size: 16px;
}

h3 span {
margin-right: 5px;
}

h3 {
margin-bottom: 20px;
font-size: 13px;
font-weight: bold;
}

/* paragraph */
p.alignR {
padding-top: 10px;
padding-right: 20px;
text-align: right;
color: #999999;
font-size: 11px;
}

/* other */
span.bold {
font-weight: bold;
color: #888888;
}

address {
font-style: normal;
}

/*========== header ==========*/
div#header{
padding: 50px 0 0 0;
width: 900px; 
height: 270px;
}

div#title {
padding-top: 50px;
float: left;
width: 180px;
height: 72px;
}

/* navigation */
div#nav {
padding-top: 100px;
float: right;
width: 540px;
height: 20px;
font-size: 11px;
}

.dropdown {
float:left;
}

.dropdown dt a:link, .dropdown dt a:visited,
.dropdown dt a:hover, .dropdown dt a:active {
display:block;
}

.dropdown dt {
border-left: 1px solid #cccccc;
display:block;
width:89px;
text-align: center;
}

.dropdown dd {
position:absolute;
overflow:hidden;
display:none; 
width:200px;
z-index:200;
opacity:0;
font-size: 10px;
border-right: 1px solid #cccccc;
}
 
.dropdown ul {
border-left: 1px solid #cccccc;
border-bottom:1px solid #cccccc;
}

.dropdown li {
display:inline;
}

.dropdown dd a:link, .dropdown dd a:active, .dropdown dd a:visited {
padding:5px;
display:block;
width:200px;
color:#cccccc;
background:#ffffff;
text-decoration:none;
}

.dropdown dd a:hover {
background: #efefef;
}

/*========== main ==========*/
div.contentsImgWrap {
float: left;
width: 100px;
}

.contentsImg {
display:block;
width: 80px;
height: 80px;
}

.contentsImg span {
display:none;
}

.icon01 {
background:url(../image/icons/www.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

.icon02 {
background:url(../image/icons/logotype.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

.icon03 {
background:url(../image/icons/sound.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

.icon04 {
background:url(../image/icons/diagnosis.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

.icon05 {
background:url(../image/icons/school.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

.icon06 {
background:url(../image/icons/renewal.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

.icon07 {
background:url(../image/icons/cms.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

.icon08 {
background:url(../image/icons/workflow.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

.icon09 {
background:url(../image/icons/song.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

.icon10 {
background:url(../image/icons/illustration.png) no-repeat;
behavior: expression(IEPNGFIX.fix(this));
}

/*========== footer ==========*/
div#footer {
padding: 30px 0 0 0;
clear: both;
width: 900px;
height: 170px;
background: #ffffff;
text-align: left;
font-size: 11px;
}

/* breadcrumbs */
ol#breadcrumbs ol, ol#breadcrumbs li {
margin:0;
padding:0;
list-style-type:none;
}

ol#breadcrumbs {
border:1px solid #dddddd;
height:40px;
background-color: #efefef;
list-style-type:none;
}

ol#breadcrumbs li, ol#breadcrumbs li.home, ol#breadcrumbs li.currentPlace {
padding-left:.75em;
float:left;
line-height:40px;
color:#777;
}

ol#breadcrumbs li a,  ol#breadcrumbs li.currentPlace a {
padding:0 15px 0 0;
display:block;
background:url(../image/background/crumbs.png) no-repeat right center;
behavior: expression(IEPNGFIX.fix(this));
}

ol#breadcrumbs li.home a {
padding:0 15px 0 0;
display:block;
background:url(../image/background/home.png) no-repeat right center;
behavior: expression(IEPNGFIX.fix(this));
width: 60px; text-indent: -9999px; overflow: hidden;
}

/* ----- IE6 hack ----- */
html*ol#breadcrumbs li a {
background:url(../image/background/arrow.gif) no-repeat right center;
}

html*ol#breadcrumbs li.home a {
background:url(../image/background/arrow.gif) no-repeat right center;
text-indent: 10px;
overflow: auto;
}

html* ol#breadcrumbs li.currentPlace  a {
background:none;
}

/* footernav */
ol#footernav {
margin: 0px 0px 40px 0px;
list-style-type:none;
float: right;
}

ol#footernav li {
display:inline;
padding: 0px 10px 0px 0px;
text-align: center;
list-style-type:none;
}

ol#footernav li:before {
content:" | ";
padding: 0 10px 0 0;
}

div#copyright {
padding-top: 10px;
padding-left: 10px;
clear: both;
width: 690px;
height: 20px;
text-align: left;
}

/*color:#ECF5F5;*/


/*========== end ==========*/