@charset "euc-jp";

/*common style-------------------------------*/
body{padding: 0;margin: 0;border: 0;font-size: 12px;color: #333;text-align: center;background-image:url(../i/top/bg.gif)}
#outer{ width:1020px; background-color:#FFFFFF; text-align:center; margin:10px auto;}
#container{width: 1000px;margin: 0 auto;text-align: center;font-family:verdana,MS PGothic;background-color:#FFFFFF; padding:0 10px;}
#wrapper{width: 1000px;padding: 0;margin: 0;}
#main{float: left;width: 835px;}
#left{float:left;width:155px;text-align:center;}
#center{float:right;width:670px;text-align:left;}
#right{float:right;width:155px;text-align:center;}
h1,h2,h3,h4,h5,h6,dl,dt,dd {padding: 0;margin: 0;}
img{padding: 0;margin: 0;border: none;}
ul,li{padding: 0;margin: 0;list-style: none;}
#main p{font-size:12px;padding: 0;margin: 0;}
.clear{clear: both;padding: 0;margin: 0;}


#bussiness p,#card p,#optiworld p,#campaign p{text-align:left;line-height:150%; padding-left:10px;}
/* header
---------------------------------------------------- */
#header{width: 1000px;padding-bottom: 5px;text-align:left;margin: 0;
/*background-image:url("../i/top/topbg.jpg"); background-repeat:no-repeat; background-position:left top;*/}
#header h1{ display:block;background-image:url("../i/top/h555.gif"); background-repeat:no-repeat;width:250px;height:67px; float:left; background-position:left bottom; margin:10px 0;}
#header h1 a span{position: absolute;left: -9999px;text-indent:-9999px; width:160px;}

/*
change----------------------------------------*/

#change { text-align:right; width:600px; height:80px; float:right; margin:10px 0;}
/*
area----------------------------------------*/
#area {width:160px; float:left;}
#area input{ vertical-align:middle;}
#area img { vertical-align:middle;}
#area .put1{margin-left:15px;}
#area .put2{margin-left:30px;}

#right #area {width:155px;float:none;}
#right #area .put1{margin-left:0;}
#right #area .put2{margin-left:0;}


/*
search----------------------------------------*/

#search{width:1000px;height:50px; margin:0 0 10px 0; padding:5px 0;background-color:#003366;}
#search form{ width:500px; float:left; text-align:center; }	
#search input{ vertical-align:middle; padding:0; margin:0;}
#search img { vertical-align:middle;}
#search span{ color:#FFFFFF;vertical-align:middle; font-weight:bold;}
/*
navi----------------------------------*/
#navi{clear: both;margin:0 auto 5px auto;padding: 0;width: 1000px;height: 39px;}
#navi span {position: absolute;width: 1000px;left: -9999px;}
#navi li {float: left;margin: 0;padding: 0;height: 39px;}
#navi02, #navi03, #navi04, #navi05, #navi06, #navi07  {width: 124px;}
#navi01{width: 131px;}
#navi08{width: 125px;}
#navi a {display: block;height: 39px;}
#navi02 a, #navi03 a, #navi04 a {width: 124px;}
#navi01 a {width: 131px;}
#navi08 a{width: 125px;}
#navi01,#navi01 a:link, #navi01 a:visited {background: url(../i/top/navi01.jpg) no-repeat;}
#navi01 a:hover, #navi01 a:active {background: url(../i/top/navi01.jpg) no-repeat ;background-position:0 -39px;}
#navi02,#navi02 a:link, #navi02 a:visited {background: url(../i/top/navi02.jpg) no-repeat ;}
#navi02 a:hover, #navi02 a:active {background: url(../i/top/navi02.jpg) no-repeat ;background-position:0 -39px;}
#navi03,#navi03 a:link, #navi03 a:visited {background: url(../i/top/navi03.jpg) no-repeat ;}
#navi03 a:hover, #navi03 a:active {background: url(../i/top/navi03.jpg) no-repeat ;background-position:0 -39px;}
#navi04,#navi04 a:link, #navi04 a:visited {background: url(../i/top/navi09.jpg) no-repeat ;}
#navi04 a:hover, #navi04 a:active {background: url(../i/top/navi09.jpg) no-repeat ;background-position:0 -39px;}
#navi05,#navi05 a:link, #navi05 a:visited {background: url(../i/top/navi05.jpg) no-repeat ;}
#navi05 a:hover, #navi05 a:active {background: url(../i/top/navi05.jpg) no-repeat ;background-position:0 -39px;}
#navi06,#navi06 a:link, #navi06 a:visited {background: url(../i/top/navi06.jpg) no-repeat ;}
#navi06 a:hover, #navi06 a:active {background: url(../i/top/navi06.jpg) no-repeat ;background-position:0 -39px;}
#navi07,#navi07 a:link, #navi07 a:visited {background: url(../i/top/navi07.jpg) no-repeat ;}
#navi07 a:hover, #navi07 a:active {background: url(../i/top/navi07.jpg) no-repeat ;background-position:0 -39px;}
#navi08,#navi08 a:link, #navi08 a:visited {background: url(../i/top/navi08.jpg) no-repeat ;}
#navi08 a:hover, #navi08 a:active {background: url(../i/top/navi08.jpg) no-repeat ;background-position:0 -39px;}
#navi09,#navi09 a:link, #navi09 a:visited {background: url(../i/top/navi09.jpg) no-repeat ;}

/*
h2title-------------------------------*/
#left h2,#right h2{width:153px;height:40px;text-indent:-9999px;padding:0;margin:0 auto;}
#newcustmer h2{background: url(../i/top/newcustmer.jpg) no-repeat top left; height:47px;}
#service h2{background: url(../i/top/service.gif) no-repeat top left;}
#option h2{background: url(../i/top/option.gif) no-repeat top left;}
#recruit h2{background: url(../i/top/recruit.gif) no-repeat top left;}
#campaign h2{background: url(../i/top/campaign.gif) no-repeat top left;}
#contact h2{background: url(../i/top/contact.gif) no-repeat top left;}
#bussiness h2{background: url(../i/top/bussiness.gif) no-repeat top left;}
#info h2{background: url(../i/top/info.gif) no-repeat top left;}
#isp h2{background: url(../i/top/isp.gif) no-repeat top left;}
#security h2{background: url(../i/top/security.gif) no-repeat top left;}
#kansaibb h2{background: url(../i/top/kansaibb.gif) no-repeat top left;}
#kbb h2{background-color: #EFEFEF no-repeat top left;}
#member h2{background: url(../i/top/member.gif) no-repeat top left;}
#nowcustmer h2{background: url(../i/top/nowcustmer.jpg) no-repeat top left; height:47px;}
#faq h2{background: url(../i/top/faq.gif) no-repeat top left;}
#card h2{background: url(../i/top/card.gif) no-repeat top left;}
#optiworld h2{background: url(../i/top/optiworld.gif) no-repeat top left; height:60px;}
#banner h2{background: url(../i/top/banner.gif) no-repeat top left;}

div.titletop{background: url(../i/top/titletop.gif) no-repeat top left; width:155px; height:5px; margin:0; padding:0;}
div.titlebottom{background: url(../i/top/titlebottom.gif) no-repeat bottom left; width:155px; height:5px; margin:0; padding:0;}
div.titletop2{background: url(../i/top/titletop_r.gif) no-repeat top left; width:155px; height:5px; margin:0; padding:0;}
div.titlebottom2{background: url(../i/top/titlebottom_r.gif) no-repeat bottom left; width:155px; height:5px; margin:0; padding:0; }


/*
left service-------------------------------*/

#service li{display:block;width:135px;text-indent:-9999px;margin:0 auto; text-align:center;}
#service li a{display:block;width:135px;height:45px; text-decoration:none;}
li#s01{background: url(../i/top/adsl_btn.jpg) no-repeat top center;}
li#s02{background: url(../i/top/fletsadsl_btn.jpg) no-repeat top center;}
li#s03{background: url(../i/top/bflets_btn.jpg) no-repeat top center;}
li#s04{background: url(../i/top/dialup_btn.jpg) no-repeat top center;}
li#s05{background: url(../i/top/entry_btn.jpg) no-repeat top center;}
#service .ss01 li{text-indent:0; height:28px; width:130px; display:block; text-align:left;
background: url(../i/top/detail01.gif) no-repeat; background-position:10px 4px; padding:3px 0 3px 25px;}
#service .ss01 li a{display:block;width:130px;height:auto; text-decoration:none;}
/*
left option-------------------------------*/

#option .ss01 li{text-indent:0;text-align:left;}
#option li{background: url(../i/top/detail01.gif) no-repeat; background-position:5px 4px; padding:3px 0 3px 20px;}

/*left corpo*/
#bussiness li{display:block;width:135px;text-indent:-9999px;margin:0 auto; text-align:center;}
#bussiness li a{display:block;width:135px;height:35px; text-decoration:none;}
li#c01{background: url(../i/top/cokouiki_btn.gif) no-repeat top center;}
li#c02{background: url(../i/top/cohikari_btn.gif) no-repeat top center;}
li#c03{background: url(../i/top/coadsl_btn.gif) no-repeat top center;}
li#c04{background: url(../i/top/dialup_btn.jpg) no-repeat top center;}
li#c05{background: url(../i/top/entry_btn.jpg) no-repeat top center;}
#bussiness .cc01 li{text-indent:0; height:20px; width:130px; display:block; text-align:left;
background: url(../i/top/detail01.gif) no-repeat; background-position:10px 4px; padding:3px 0 3px 25px;}
#bussiness .cc01 li a{display:block;width:130px;height:20px; text-decoration:none;}
/*
left info-------------------------------*/

#info{text-align:left;}
#info li{background: url(../i/top/detail01.gif) no-repeat; background-position:10px 3px; padding:3px 0 3px 28px;}

/*
left kbb-------------------------------*/


#kbb dt,#kansaibb dt{margin:10px 0;}
#kbb dd,#kansaibb dd{ line-height:180%;}
/*
left security-------------------------------*/

#security p{text-align:left; width:145px; margin-left:5px; line-height:150%;}


/* 
left topics---------------------------------------------- */
#service,#campaign,#contact,#bussiness,#info,#isp,#recruit,#kansaibb,#kbb,#security,#option{ background-color:#eee; margin-bottom:5px;}
#banner,#newcustmer,#nowcustmer{margin-bottom:5px;}


/*
main topbanner-------------------------------*/
#topbanner {margin-bottom:10px; text-align:center; float:right;}
#topbanner p{ line-height:180%;}
#topbanner h2{background: url(../i/top/maintitle.gif) no-repeat top left; text-indent:-9999px;}
#textright{ text-align:right; width:400px;}
#Newbanner {margin:0 0 10px;}
/*
main event-------------------------------*/
/*event_bg.jpgをeventの背景に設定していたが、高さしていがあり、余白が生じた為、
ボーダーに変更し、h3にヘッド部分のみ背景を入､・討い泙后｣-------------------------------*/
#event{width:160px;float:right;border:solid 2px #CCCCCC;}
#event h3{background: url(../i/top/event_bg1.jpg) no-repeat;text-indent:-9999px; height:29px;}
#event #eventinfo{padding-top:8px;}
#event #eventinfo .thismonth{margin-top:7px;}
#event #eventinfo p{text-align:center;padding-bottom:6px;}
#event #eventinfo .day{text-align:center;padding-bottom:8px;color:#FF6600;}
/*
main senwa-------------------------------*/
#senwa { margin:0; padding:0; width:470px; height:100px;background-color:#F7FAFF; border:1px solid #E8F2FF;}
#senwa h3{background: url(../i/top/senwasum.jpg) no-repeat 5px 5px; text-indent:-9999px;width:200px; height:80px;float:left;}
#senwa iframe{display:block; width:250px;float:right; height:110px; margin:5px; padding:0;background-color:#F7FAFF;}

/*
main topics trouble maintenance-------------------------------*/

#topics,#campaign,#trouble,#maintenance {background-color:#F7F4F0; border:1px solid #EBE2D8;  margin:0; padding:0;}
/*トピックス情報見出し*/
#topics .listinfo{background-color:#F7F4F0;height:35px;}
#topics .listinfo p{ float:left;width:100px; height:30px;background-color:#F7F4F0; }
#topics .listinfo p a{background:url(../i/top/topicsmore_btn.gif) no-repeat; text-indent:-9999px; display:block; width:100px;height:30px;margin-left:100px;background-color:#F7F4F0;}
#topics .listinfo h2{background-image:url(../i/top/topicstitle.gif);background-repeat:no-repeat;width:450px;text-indent:-9999px;float:left;height:35px;}
/*障害情報見出し*/
#trouble .listinfo{background-color:#F7F4F0;height:35px;}
#trouble .listinfo p{ float:left;width:100px; height:30px;background-color:#F7F4F0; }
#trouble .listinfo p a{background:url(../i/top/troblemore_btn.gif) no-repeat; text-indent:-9999px; display:block; width:100px;height:30px;margin-left:100px;background-color:#F7F4F0;}
#trouble .listinfo h2{background-image:url(../i/top/troubletitle.gif);background-repeat:no-repeat;width:450px;text-indent:-9999px;float:left;height:35px;}
/*メンテナンス情報見出し*/
#maintenance .listinfo{background-color:#F7F4F0;height:35px;}
#maintenance .listinfo p{ float:left;width:100px; height:30px;background-color:#F7F4F0; }
#maintenance .listinfo p a{background:url(../i/top/mentemore_btn.gif) no-repeat; text-indent:-9999px; display:block; width:100px;height:30px;margin-left:100px;background-color:#F7F4F0;}
#maintenance .listinfo h2{background-image:url(../i/top/maintenancetitle.gif);background-repeat:no-repeat;width:450px;text-indent:-9999px;float:left;height:35px;}
/*キャンペーン情報見出し*/
#campaign{clear:both;}
#campaign h2{background: url(../i/top/campaigntitle.gif) no-repeat top left; text-indent:-9999px; height:35px;}
#topics ul,#trouble ul,#maintenance ul{background-color:#fff; border:1px solid #EBE2D8; margin:0 10px 10px 10px;}
#campaign ul{background-color:#fff; border:1px solid #EBE2D8; margin:0 10px 10px 10px;}
#topics li,#campaign li,#trouble li,#maintenance li{padding:5px 10px 5px 10px;}
#topics li span,#campaign li span,#trouble li span,#maintenance li span{ margin-left:5px;}
.othertopics { text-align:center;padding:5px;}
.othertopics li{background:url(../i/top/detail01.gif) no-repeat 0 5px ; display:inline;}
#syougailink li{background:url(../i/top/syougai_btn.jpg) ; width:80px;height:20px;}


/*campaign*/

#campaign ul{background-color:#fff; border:1px solid #EBE2D8; margin:0 10px 10px 10px;}
#campaign .campaignarrow li{text-align:left;background: url(../i/top/detail01.gif) no-repeat; background-position:20px 14px; padding:10px 0px 5px 34px;line-height:140%;}

/*
main recommend-------------------------------*/

#recommend h2{background: url(../i/top/rectitle.gif) no-repeat top left; text-indent:-9999px; height:35px; background-color:#F7F4F0;}
#recommend h3{ color:#3399CC; font-size:14px; float:left;}
#recommend .left {float:left; width:48%; padding:5px;}
#recommend .right {float:right; width:48%; padding:5px;}
#recommend p{line-height:150%;}
#recommend p.more{ float:right;}
#recommend p.more a{background:url(../i/top/more.gif) no-repeat left top;width:50px;height:20px;text-align:left;display: block; margin-right:5px;}
#recommend p.more a span{position: absolute;left: -9999px;}

/*
main clover-------------------------------*/
#clover h2{background: url(../i/top/clovertitle.gif) no-repeat top left; text-indent:-9999px; height:45px; width:480px;}
#clover h3{color:#3399CC; font-size:14px;padding:5px; border:1px solid #eee; background-color:#efefef;}
#clover h3 em{color:#3399CC; font-size:14px; font-style: normal; border-left:3px solid #FF6666; padding-left:5px; text-align:center;}
#clover p{line-height:180%;}
#clover p a { display:block;text-align:right; width:130px; height:50px; float:right;}
#function{width:350px;}
#clover .leftmain{float:left; width:300px; line-height:150%;}
#clover .rightmain{float:right; width:150px; padding:0; margin:0;}
#clover .left{float:left; width:90px; padding:10px; line-height:150%;}
#clover .right{float:right; width:220px; padding:10px; line-height:150%;}
#clover iframe{ width:650px; padding:0; margin:5px 0 5px 0; height:80px;border-bottom:dashed 1px #ccc;display:block;}



/*
right faq-------------------------------*/

#faq{text-align:center; background-color:#eee; width:145px; margin-bottom:5px;}
#faq ul{ background-color:#FFFFFF; border:1px solid #eee; width:145px; margin-left:4px;}
#faq li{ text-align:left;background: url(../i/top/detail01.gif) no-repeat; background-position:10px 5px;}
#faq li a{display:block;padding:5px 0 5px 28px;}
p#f01{background: url(../i/top/faq_btn.jpg) no-repeat top left; width:145px; height:44px;margin:10px 4px 0 4px; text-indent:-9999px;}
p#f01 a{display:block; height:44px; text-decoration:none;}

/*
right card optiworld-------------------------------*/

#card p#optiworld p{margin:0; padding:0;}
#optiworld p.more a{background:url(../i/top/more.gif) no-repeat left top;width:50px;height:20px;text-align:left;display: block; margin:0;padding:0;}
#optiworld p.detail{ background:url(../i/top/detail01.gif) no-repeat;}
#optiworld p.detail a{ display:block;text-indent:20px; line-height:100%;}
#optiworld p.more a span{position: absolute;left: -9999px;}
#card p.more,#optiworld p.more{margin:0; padding:0; float:right;}
#card p.more a{background:url(../i/top/more.gif) no-repeat left top;width:50px;height:20px;text-align:left;display: block; margin:0; padding:0;}
#card p.more a span{position: absolute;left: -9999px;}

/*
right member-------------------------------*/
#member{ background-color:#eee; margin-bottom:5px;}
#member li{display:block;width:146px;height:25px;text-indent:-9999px;margin:0 auto;}
#member li a{display:block;width:146px;height:20px; text-decoration:none;}
li#m01{background: url(../i/top/member01.gif) no-repeat top left;}
li#m02{background: url(../i/top/member02.gif) no-repeat top left;}
li#m03{background: url(../i/top/member03.gif) no-repeat top left;}
li#m04{background: url(../i/top/member04.gif) no-repeat top left;}
li#m05{background: url(../i/top/member05.gif) no-repeat top left;}
li#m06{background: url(../i/top/member06.gif) no-repeat top left;}
li#m07{background: url(../i/top/member07.gif) no-repeat top left;}
li#m08{background: url(../i/top/change.jpg) no-repeat top left;height:44px;margin:10px auto 0 auto;}

/*
right banner-------------------------------*/
#banner {text-align:center; width:155px;}
#banner dt{margin:10px 0; width:140px;}
#banner dd{margin: 0 auto; text-align:center; display:inline; width:140px;}
/* footer
---------------------------------------------------- */

#footer{padding-top:20px;width: auto;text-align:center;}
#footer p{padding-bottom:30px;text-align:center;}
#footer ul{width:600px; text-align:center; margin:0 auto; padding:0;}
#footer li{display:inline;font-size:12px;}