@charset "UTF-8";

/* style.css */
/* #view
================================================ */
#view{
	position: relative;
	clear: both;
	width:940px;
	margin: 20px auto;
	overflow: hidden;
	z-index: 1;
}

#view .mainimg img{
	width: 940px;
	z-index: 2;
}

#viewList{
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
	z-index: 3;
	font-size: 13px;
	font-size:1.3rem;
	-webkit-box-shadow: -4px 0px 15px -0px rgba(0, 10, 10, 0.4);
	-moz-box-shadow: -4px 0px 15px -0px rgba(0, 10, 10, 0.4);
	box-shadow: -4px 0px 15px -0px rgba(0, 10, 10, 0.4);
}


#viewList li{
	border-bottom: solid 1px #fff;
	background: url(../common/img/bg_view_list.png) left top repeat;
}

#viewList li.last{
	border-bottom: none;
}

#viewList li:hover, #viewList li:active{
	background: url(../common/img/bg_view_list_on.png) left top repeat;
}

#viewList a {
	display: block;
	padding: 15px 15px 15px 28px;
	color: #fff;
	text-decoration: none;
	height: 19px;
	background: url(../common/img/li_arrow02.png) 10px center no-repeat;
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}
#viewList li.last a {
	padding-bottom: 16px;
}

#viewList a:hover, #viewList a:active{
	background: url(../common/img/li_arrow02_on.png) 10px center no-repeat;
	text-shadow: 0px 0px 5px rgba(13, 94, 129, 0.8);
}


/* .col3_with_image01
================================================ */
.col2_with_image01 {
	clear: both;
}

.col2_with_image01 li {
	position: relative;
	width:340px;
	float: left;
	margin: 0 20px 20px 0;
}

.col2_with_image01 li:nth-child(even){
	margin: 0;
}

.col2_with_image01 li.last {
	margin-right: 0;
}

#main .col2_with_image01 ul li{
list-style: none;
padding-left: 0;
margin-top: 0;
background: none;
}




.col2_with_image01 a { display: block; }

.col2_with_image01 a:hover, .col3_with_image01 a:active  { text-decoration: none; }

#main .col2_with_image01 a:link{
text-decoration: none;
}




.col2_with_image01 h2,
.col2_with_image01 h3 {
	background: #1f6141;
	color: #fff;
	padding: 10px;
	font-size: 12px;
	font-size:1.2rem;
}
#main .col2_with_image01 h3 {
	background: #333333;
font-size: 12px;
font-size: 1.2rem;
padding: 10px;
font-weight: bold;
color: #ffffff;
border-bottom: none;
margin-bottom: 0;
}



.col2_with_image01 div {
	background: #fff;
	border: solid 1px #d7d7d7;
	border-top: none;
	padding: 10px 10px 0 10px;
	min-height: 80px;
	-webkit-transition: all 0.25s;
	-moz-transition: all 0.25s;
	transition: all 0.25s;
}
#main .col2_with_image01 div {
	padding: 10px 10px 30px 10px;
	min-height: 70px;
}

.col2_with_image01 a:hover div,
.col2_with_image01 a:active div {
	background-color: #d3e2db;
	border: solid 1px #d3e2db;
	border-top: none;
}

.col2_with_image01 img{
	position: absolute;
	width: 74px;
	top: 48px;
	left: 11px;
}

.col2_with_image01 p{
	position: relative;
	padding: 5px 0 0 90px;
	margin-bottom: 0;
	font-size: 12px;
	font-size: 1.2rem;
}
#main .col2_with_image01 p{
	padding: 5px 0 0 0px;
}
.col2_with_image01 p.arw{
	padding: 0 0 0 20px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	background-image: url(../common/img/arw.png);
	background-repeat: no-repeat;
	background-position: 0.4rem  0.4rem;
}


/* .news & .jobs
================================================ */

.news {
	margin-right: 20px;
	margin-bottom: 20px;
	position: relative;
	width: 700px;
	min-height: 100px;
}
.jobs {
	float: left;
	margin-right: 20px;
	position: relative;
	width: 300px;
	min-height: 100px;
}

.title{
	position: relative;
	background: #f1f1f1;
	padding: 6px 10px;
	border: solid 1px #d7d7d7;
	*line-height: 1;
}
#main h3.title{
	margin-bottom: 0;
	color: #000000;
	position: relative;
	background: #f1f1f1;
	padding: 6px 10px;
	border: solid 1px #d7d7d7;
	*line-height: 1;
}
.navi01 {
	position: absolute;
	top: 0;
	right: 0;
	border-left: solid 1px #b1b1b1;
	border-top: solid 1px #d7d7d7;
	border-right: solid 1px #d7d7d7;
}
.navi01 li{
	background: #f1f1f1;
	float: left;
	border-left: solid 1px #fff;
	border-right: solid 1px #b1b1b1;
	*line-height: 1;

}
.navi01 li.last{
	border-right: none;
}
.navi01 li a{
	display: block;
	padding: 6px 10px;
}

.news .inner,
.jobs .inner {
	background: #fff;
	border: solid 1px #d7d7d7;
	border-top: none;
	padding: 10px;
}

.news .inner dl {
	border-bottom: dotted 1px #999999;
	padding-bottom: 8px;
	margin-bottom: 8px;
}
.news .inner dt {
	float: left;
	width: 110px;
	margin-right: 3px;
}
.news .inner dd {
	float: left;
	width: 248px;
}

.news .inner dd.summary {
	width: 100%;
	font-weight:bold;
	font-size: 16px;
	font-size: 1.6rem;
}

.news .inner dd.summary a{
	display: block;
}


.news .inner dd.category {
	width: 80px;
	background-color: #efefef;
	text-align: center;
	float: left;
	margin: 2px 15px 0 0;
	font-size: 11px;
	font-size: 1.1rem;
}


.jobs .inner ul.li_withImage li { background: url(../common/img/bg_dot02.gif) left bottom repeat-x;}
.jobs .inner ul.li_withImage li a{
	display: block;
	padding-bottom: 8px;
	margin-bottom: 8px;
}
.jobs .inner ul.li_withImage img {
	float: left;
	width: 100px;
	margin-top: 5px;
}
.jobs .inner ul.li_withImage .summary {
	float: left;
	width: 158px;
	margin-left: 10px;
}
.jobs .inner ul.li_withImage div.summary:hover,
.jobs .inner ul.li_withImage div.summary:active{ text-decoration: underline;}

/* -------- catColor -------- */
.news .inner dd.catBlue { background-color: #46A4C5; color: #fff;}
.news .inner dd.catOrange { background-color: #ff8c00; color: #fff;}
.news .inner dd.catGreen { background-color: #5FBD42; color: #fff;}
.news .inner dd.catGray { background-color: #797979; color: #fff;}
.news .inner dd.catRed { background-color: #d13622; color: #fff;}
.news .inner dd.catDarkblue { background-color: #00008b; color: #fff;}
.news .inner dd.catMaroon { background-color: #800000; color: #fff;}
.news .inner dd.catPurple { background-color: #800080; color: #fff;}
.news .inner dd.catDimgray { background-color: #696969; color: #fff;}
.news .inner dd.catSteelblue { background-color: #4682b4; color: #fff;}
.news .inner dd.catGold { background-color: #ffd700; color: #fff;}
.news .inner dd.catOlive { background-color: #808000; color: #fff;}


.news .inner dd.catBlue a,
.news .inner dd.catOrange a,
.news .inner dd.catGreen a,
.news .inner dd.catGray a,
.news .inner dd.catRed a,
.news .inner dd.catDarkblue a,
.news .inner dd.catMaroon a,
.news .inner dd.catPurple a,
.news .inner dd.catDimgray a,
.news .inner dd.catSteelblue a,
.news .inner dd.catGold a,
.news .inner dd.catOlive a{ color: #fff; text-decoration: none !important; padding:0;}


/* .banner & #mark
================================================ */
/* -------- banner_contact -------- */
.banner_contact {
	float: right;
	width: 220px;
}
.banner_otoiawase {
	padding-bottom: 6px;
	margin-bottom: 10px;
	float: right;
	width: 218px;
	background-color: #f1f1f1;
	border: 1px solid #d7d7d7;
}
.banner_otoiawase .title_box{
	margin-bottom: 12px;
}

.banner_otoiawase ul li{
	text-align: center;
	margin-bottom: 2px;
}
.banner_otoiawase ul li.tel_img{
	margin-bottom: 10px;
}
.banner_otoiawase ul li a:hover img{
 opacity: 0.5;
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
}


.main_topbanner01 a,
.main_topbanner02 a,
.main_topbanner03 a{
	margin: 0 auto 2px auto;
	display: block;
	width: 300px;
	height: 103px;
	background-repeat: no-repeat;
	background-position: top left;
	text-indent: -1000em;
}
.main_topbanner01 a{background-image: url(../common/img/banner01.jpg);}
.main_topbanner02 a{background-image: url(../common/img/banner02.jpg);}
.main_topbanner03 a{background-image: url(../common/img/banner03.jpg);}

.side_inq_list01 a,
.side_inq_list02 a,
.side_inq_list03 a{
	margin: 0 auto 2px auto;
	display: block;
	width: 203px;
	height: 33px;
	background-image: url(../common/img/bnr_oto_btn01.png);
	background-repeat: no-repeat;
	background-position: top left;
	text-indent: -1000em;
}
.side_inq_list01 a{background-image: url(../common/img/bnr_oto_btn01.png);}
.side_inq_list02 a{background-image: url(../common/img/bnr_oto_btn02.png);}
.side_inq_list03 a{background-image: url(../common/img/bnr_oto_btn03.png);}
.side_inq_list01 a:hover{background-image: url(../common/img/bnr_oto_btn01_on.png);}
.side_inq_list02 a:hover{background-image: url(../common/img/bnr_oto_btn02_on.png);}
.side_inq_list03 a:hover{background-image: url(../common/img/bnr_oto_btn03_on.png);}

.banner li.sidebar_sub01_banner01,
.banner li.sidebar_sub01_banner02{
	border: none;
}
.banner li.sidebar_sub01_banner01 a,
.banner li.sidebar_sub01_banner02 a{
	margin: 0 auto 0 auto;
	display: block;
	width: 220px;
	height: 50px;
	background-repeat: no-repeat;
	background-position: top left;
	text-indent: -1000em;
}
.banner li.sidebar_sub01_banner01 a{background-image: url(../common/img/bnr_btn01b.png);}
.banner li.sidebar_sub01_banner02 a{background-image: url(../common/img/bnr_btn01.png);}


.banner li.sidebar_main_list01 a,
.banner li.sidebar_main_list02 a,
.banner li.sidebar_main_list03 a,
.banner li.sidebar_main_list04 a,
.banner li.sidebar_main_list05 a,
.banner li.sidebar_main_list06 a{
	margin: 0 auto 0 auto;
	display: block;
	width: 220px;
	height: 33px;
	background-repeat: no-repeat;
	background-position: top left;
	text-indent: -1000em;
}
.banner li.sidebar_main_list01,
.banner li.sidebar_main_list02,
.banner li.sidebar_main_list03,
.banner li.sidebar_main_list04,
.banner li.sidebar_main_list05,
.banner li.sidebar_main_list06{
	border: none;
}
.banner li.sidebar_main_list01 a{background-image: url(../common/img/bnr_link01.png);}
.banner li.sidebar_main_list02 a{background-image: url(../common/img/bnr_link02.png);}
.banner li.sidebar_main_list03 a{background-image: url(../common/img/bnr_link03.png);}
.banner li.sidebar_main_list04 a{background-image: url(../common/img/bnr_link04.png);}
.banner li.sidebar_main_list05 a{background-image: url(../common/img/bnr_link05.png);}
.banner li.sidebar_main_list06 a{background-image: url(../common/img/bnr_link06.png);}


.banner li.sidebar_sub02_banner01,
.banner li.sidebar_sub02_banner02,
.banner li.sidebar_sub02_banner03,
.banner li.sidebar_sub02_banner04{
	border: none;
}
.banner li.sidebar_sub02_banner01 a,
.banner li.sidebar_sub02_banner02 a,
.banner li.sidebar_sub02_banner03 a,
.banner li.sidebar_sub02_banner04 a{
	margin: 0 auto 0 auto;
	display: block;
	width: 220px;
	height: 38px;
	background-repeat: no-repeat;
	background-position: top left;
	text-indent: -1000em;
}
.banner li.sidebar_sub02_banner01 a{
	background-image: url(../common/img/bnr_btn02.png);
	height: 48px;
}
.banner li.sidebar_sub02_banner02 a{background-image: url(../common/img/bnr_btn03.png);}
.banner li.sidebar_sub02_banner03 a{background-image: url(../common/img/bnr_btn04.png);}
.banner li.sidebar_sub02_banner04 a{background-image: url(../common/img/bnr_btn07.png);}


.banner li.sidebar_maintenance_list01{
	border: none;
}
.banner li.sidebar_maintenance_list01 a{
	margin: 0 auto 0 auto;
	display: block;
	width: 220px;
	height: 33px;
	background-repeat: no-repeat;
	background-position: top left;
	text-indent: -1000em;
}
.banner li.sidebar_maintenance_list01 a{background-image: url(../common/img/bnr_btn06.png);}


.banner_contact ul li{
	display: block;
	margin-bottom: 10px;
	border: solid 1px #333;
	background: #666 url(../common/img/bg_banner_contact01.gif) left top repeat-x;
}

.banner_contact ul li a{
	display: block;
	padding: 8px 10px;
	border: solid 1px #ccc;
	background: url(../common/img/bg_banner_contact02.png) left top no-repeat;
}

.banner_contact ul li a span{
	display: block;
	margin-left :80px;
	font-weight: bold;
	color: #fff;
}

.banner_contact ul li a:hover,
.banner_contact ul li a:active {
	text-decoration: none;
}

#mark_box li{
	margin-top: 16px;
	margin-bottom: 20px;
	text-align: center;
}


.main_topbanner{
	margin: 20px -10px 0;
}
.main_topbanner li{
	float: left;
	margin: 0 10px;
}





/*--------------------------------------------------*/
.midasi03{
	margin-top: 2em;
}
.midasi02{
	margin-top: 2em;
}
.point04 {
font-size: 12px;
line-height: 1.5;
text-align: left;
background: url("../common/img/point04.jpg") no-repeat;
background-position: left center;
padding-left: 1.2em!important;
}
.point072 {
font-size: 16px;
color: #643d04;
line-height: 1.5;
text-align: left;
background: url("../common/img/point07.jpg") no-repeat;
background-position: left center;
padding-left: 1.2em!important;
}
#main ul.serverPlanList li {
margin: 25px 0;
padding: 0;
background-image: none;
border-bottom: 1px dashed #cfa568;
}

.point03 {
font-size: 14px;
line-height: 1.5;
text-align: left;
background: url("../common/img/point03.jpg") no-repeat;
background-position: left center;
padding-left: 1.2em!important;
}

.text01 {
    overflow: hidden;
}
.serverbill00 {
display: block;
width: 470px;
float: left;
}
.serverbill02 {
display: block;
width: 210px;
float: right;
}
.maintxt {
display: block;
width: 470px;
float: left;
}
.subimg {
display: block;
width: 210px;
float: right;
}



.twitter-share-button {
width: 90px !important;
}
.fb-like{
	top: -5px;
}

.right{
	text-align: right;
}



/* flow */
.usage {
	width					: 567px;
	margin					: 20px auto;
	border:none;
}

.usage td{
	border:none;
	padding:0;
	display: table-cell;
vertical-align: inherit;
text-align: center;
}

th.usageth {
	width					: 275px;
	height					: 70px;
	text-indent				: -9999px;
	border:none;
		padding:0;
}

td.usagetd {
	width					: 472px;
	height					: 70px;
	font-size				: 11px!important;
	line-height				: 1.2;
	color					: #056f51;
	text-align				: left;
	border:none;
	text-align: left;
}

.usagein {
	width					: 350px;
	display					: block;
	margin-left				: 10px;
	border:none;
}

.usage01 {background		: url("../common/img/intro01.jpg") no-repeat;}
.usage02 {background		: url("../common/img/intro02.jpg") no-repeat;}
.usage03 {background		: url("../common/img/intro03.jpg") no-repeat;}
.usage04 {background		: url("../common/img/intro04.jpg") no-repeat;}
.usage05 {background		: url("../common/img/intro05.jpg") no-repeat;}
.usage06 {background		: url("../common/img/intro06.jpg") no-repeat;}
.usage07 {background		: url("../common/img/intro07.jpg") no-repeat;}
.usage08 {background		: url("../common/img/intro08.jpg") no-repeat;}
.usage09 {background		: url("../common/img/intro09.jpg") no-repeat;}

.usage001 {background		: url("../common/img/intro001.jpg") no-repeat;}
.usage002 {background		: url("../common/img/intro002.jpg") no-repeat;}
.usage003 {background		: url("../common/img/intro003.jpg") no-repeat;}
.usage004 {background		: url("../common/img/intro004.jpg") no-repeat;}
.usage005 {background		: url("../common/img/intro005.jpg") no-repeat;}
.usage006 {background		: url("../common/img/intro006.jpg") no-repeat;}
.usage007 {background		: url("../common/img/intro007.jpg") no-repeat;}
.usage008 {background		: url("../common/img/intro008.jpg") no-repeat;}
.usage009 {background		: url("../common/img/intro009.jpg") no-repeat;}




.con-box{
	margin-bottom: 20px;
	overflow: hidden;
}
.con-box .img-box{
	margin-right: 20px;
	float: left;
}
.con-box .txt-box{
	float: left;
	width: 420px;
}

img.alignleft {
    text-align: left;
}
img.aligncenter {
    display: block;
    margin: 1px auto;
}
img.alignright {
    display: block;
    margin: 1px 1px 1px auto;
}