@charset "shift_jis";
/*

information{
	ファイル名 : /common/css/top.css;
	概要 : このCSSはトップページに対するファイルです。。;
	サイト名 : mopera U | ドコモの定額データプラン対応のインターネット接続プロバイダ;
	URL : http://www.mopera.net/;
	コピーライト : (c) NTT DOCOMO, INC. All rights reserved.
}

 */


/* コンテンツ
--------------------------------------------------------------------------

	1. トップフラッシュ
	2. 左カラム
	   - メインバナー（静止画）
	   - クリア要素
	   - よく使われるメニュー
	   - お知らせ：故障情報：メンテナンス
	   - プラン料金等BTN
	   - 安心してご利用頂くために
	3. 右カラム
	   - ログイン
	   - mopera
	   - M1000
	   - バナー
	4. フッター
	5. インフォメーションiframe


-------------------------------------------------------------------------*/




/*	1. トップフラッシュ
-----------------------------------------------	*/
h2#topflash{
	margin:0 auto;
	height:254px;
	border-bottom:1px solid #FFFFFF;
	background-color:#F6F6F6;
	padding:0px;
	min-width:900px;
	width:expression(document.body.clientWidth < 900? "900px" : "auto");
}

h2#banner_top{
	margin:0 auto;
	height:230px;
	border-bottom:1px solid #FFFFFF;
	background-color:#F6F6F6;
	background-image:url(../images/bg_second_main.gif);
	padding:0px;
	min-width:900px;
	width:expression(document.body.clientWidth < 900? "900px" : "auto");
}

/*	2. 左右カラム
-----------------------------------------------	*/
#container .topleft{
	float:left;
	width:663px;
	display:inline;
	text-align:left;
	margin-top:15px;
}
#container .topleft iframe{
	width:663px;
	height:850px;/************************* トップページ iframe 高さ指定 ****************************/
}

/* メインバナー（静止画） */
h2#banner_main{
	margin:0 auto;
	height:254px;
	padding:0px;
	width:663px;
}
.sab_banner ul {
	background-color: #e0e0e0;
	clear: both;
	display: inline;
	float: left;
	margin-bottom: 15px;
	padding: 0 3px 5px 8px;
}
.sab_banner ul li {
	display: inline;
	float: left;
	padding: 5px 6px 0 0;
}
.sab_banner ul li
.sab_banner a:hover img{
	opacity:0.5;
}


/*	3. 右カラム
-----------------------------------------------	*/

#container .topright{
	float:right;
	width:222px;
	text-align:left;
	display	:inline;
	margin-top:15px;
}

/* ログイン */
#container .topright #login{
	padding:0px 2px 2px 2px;
	border-top:2px solid #F3EDD9;
	background-color:#F3EFE6;
	margin-bottom:15px;
}
#container .topright #login:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#container .topright #login {display: inline-block;}
/* Hides from IE-mac \*/
* html #container .topright #login {height: 1%;}
#container .topright #login {display: block;}
/* End hide from IE-mac */ 

#container .topright #login .usercont{
	padding:8px 10px 10px 11px;
	background:url(../images/bg_user.gif) no-repeat left bottom;
}

#container .topright #login li{
	background:url(../images/arrow_normal_brown.gif) no-repeat 0 2px;
	padding-left:15px;
	margin:0px 0px 5px 0px;
}
#container .topright #login ul.userlink{
	margin:4px 5px 2px 5px;
	clear:both;
}
#container .topright #login ul.userlink li{
	float:left;
	display:inline;
	background:url(../images/arrow_normal_brown.gif) no-repeat 0 2px;
	padding-left:15px;
	font-size:1.2em;
	margin-right:11px;
}

#container .topright #login h4{ /* ログインユーザ名通常時 */
	margin:0px 0px 5px 0px;
	padding:0px 0px 10px 0px;
	background:url(../images/bg_login_user_01.gif) no-repeat left bottom;
	font-weight:bold;
	font-size:1em;
	line-height:120%;
	border:none;
}
#container .topright #login h4.ssl{ /* ログイン時（ssl使用者向け）2008.10.03 変更 */
	padding:0px 0px 7px 0px;
	/* background:url(../images/bg_login_user_02.gif) no-repeat left bottom; */
	/* padding:0px 50px 10px 0px; */
}	

#container .topright #login h4.ssl ul { /* 2008.10.03 追記 */
	background:url(../images/ic_ssl.gif) no-repeat left 1px;
	line-height: 160%;
	font-size:0.9em;
}

#container .topright #login h4.ssl ul li { /* 2008.10.03 追記 */
	margin: 8px 0 0 45px;
}

#container .topright #login h4.nonessl{ /* ログイン時（非ssl使用者向け）2008.10.03 変更 */
	padding:0px 0px 7px 0px;
	/* background:url(../images/bg_login_user_03.gif) no-repeat left bottom; */
	/* padding:0px 50px 10px 0px; */
}

#container .topright #login h4.nonessl ul{ /* 2008.10.03 追記 */
	background:url(../images/ic_nonessl.gif) no-repeat left 1px;
	line-height: 160%;
	font-size:0.9em;
}

#container .topright #login h4.nonessl ul li{ /* 2008.10.03 追記 */
	margin: 8px 0 0 45px;
}

#container .topright #login h4 img{ 
	display:none;
}
#container .topright #login dl{ /* ID・PASS入力項目 */
	margin:0px 0px 10px 0px;
}
#container .topright #login dd{ 
	margin:3px 0px 5px 0px;
}
#container .topright #login dd input{ 
	width:192px;
	height:20px;
}
#container .topright #login .btn{ 
	margin-bottom:5px;
}
#container .topright #login .error{ 
	margin:0px 10px 5px 10px;
	background:url(../images/bg_login_error.gif) no-repeat 0 top;
	color:#990000;
	font-weight:bold;
	font-size:1.1em;
	padding-top:3px;
	padding-left:40px;
}

/* mopera */
#container .topright #topmopera{
	padding:2px;
	background-color:#C4D7B2;
	clear:both;
	margin-bottom:15px;
}
#container .topright #topmopera ul{
	background:url(../images/bg_mopera.gif) no-repeat left bottom;
	padding:1px 1px 2px 3px;
	_padding:1px 1px 2px 2px;
	
}
#container .topright #topmopera ul li{
	float:left;
	display:inline;
	font-size:1.2em;
	padding:0px;
	display:block;
}
#container .topright #topmopera ul li a{
	background:url(../images/arrow_normal_green.gif) no-repeat 10px 6px;
	width:80px;
	padding:4px 0px 5px 26px;
	_width:107px;/*IE6 hack*/
	margin-right:1px;
	display:block;
	
}
#container .topright #topmopera ul li a:hover{
	background-color:#F3F3F3;
}

/* M1000 */
#container .topright #topM1000{
	padding:2px;
	background-color:#CDCDCD;
	clear:both;
}
#container .topright #topM1000 .floatList{
	background:url(../images/bg_m1000.gif) no-repeat left bottom;
	padding:1px 1px 2px 3px;
	_padding:1px 1px 2px 2px;
	
}
#container .topright #topM1000 .floatList2{
	background:url(../images/bg_m1000_2.gif) no-repeat left bottom;
	padding:1px 1px 2px 3px;
	_padding:1px 1px 2px 2px;
	
	}

#container .topright #topM1000 .floatList2 li a.popup{
	background: url(../images/arrow_other.gif) no-repeat scroll 8pt 2pt;
	}
html #container .topright #topM1000 .floatList2 li a{
	width:187px;
	_width:215px;/*IE6 hack*/
	}
#container .topright #topM1000 .floatList2 li a:hover{
	background-color:#F3F3F3;
}

#container .topright #topM1000 .floatBox .floatList li{
	float:left;
}
#container .topright #topM1000 ul li{
	float:left;
	display:inline;
	font-size:1.2em;
	padding:0px;
	display:block;
}
#container .topright #topM1000 ul.floatList li a{
	width:80px;
	_width:107px;/*IE6 hack*/
}
#container .topright #topM1000 ul li a{
	background:url(../images/arrow_normal_gray.gif) no-repeat 10px 6px;
	padding:4px 0px 5px 26px;
	margin-right:1px;
	display:block;
}
#container .topright #topM1000 ul li a.other{
	background:url(../images/arrow_other.gif) no-repeat 10px 7px;
}
#container .topright #topM1000 ul li a:hover{
	background-color:#F3F3F3;
}

/*-- トップバナー --*/
#container .topright #topbanner{
	text-align:center;
	margin-top:10px;
	width:223px;
}
/*#container .topright #topbanner li{
	background:url(../images/bg_top_banner.gif) no-repeat left bottom;
}*/
#container .topright #topbanner ul{
	background:url(../images/bg_top_banner.gif) no-repeat left bottom;
	padding-bottom: 6px;
}
#container .topright #topbanner ul li a.other{
	background:url(../images/arrow_other.gif) no-repeat top left;
	padding-right: 0px;
	padding-left: 15px;
}

#container .topright #topbanner li img{
	margin:7px 0px 4px;
}

/*	3. フッター
-----------------------------------------------	*/
#footertop{
	text-align:left;
	margin:0 auto;
	padding:10px 0px 10px 0px;
	width:900px;
	clear:both;
	background:url(../images/dott_gray.gif) repeat-x left top;
}
#footertop ul{
	display:block;	
}
#footertop ul li{
	display:inline;
	background:url(../images/line_gray.gif) repeat-y right top;
	padding-right:6px;
	margin-right:3px;
	font-size:1.1em;
	letter-spacing:-0.1em;
}
#footertop ul li a.other{
	margin-right:0px;
}
*html #footertop ul li{
	padding-right:5px;
	margin-right:6px;
}
#footertop ul li.bgnone{
	background:none;
	padding-right:0px;
	margin-right:0px;
}
#footertop ul li a.other{
	_background:url(../images/arrow_other.gif) no-repeat left 10px;
	background:url(../images/arrow_other.gif) no-repeat left 1px;
	padding-left:15px;
	padding-right:0px;
	margin-left:5px;
	}
#footertop ul li a.popup{
	_background:url(../images/arrow_other.gif) no-repeat left 10px;
	background:url(../images/arrow_other.gif) no-repeat left 1px;
	padding-left:15px;
	margin-left:5px;
}
#footertop ul li a.normal{
	background:url(../images/arrow_normal.gif) no-repeat 0 1px;
	padding-left:15px;
	font-size:1em;
}
#footertop address{
	display:block;
	margin-top:4px;
	margin-left:7px;
}


	
/*	5. インフォメーションiframe
-----------------------------------------------	*/

body#information{
	text-align: left;
	line-height: 1.5em;
	border-top:none;
	padding-top:0px;
	width:663px;
	display:block;
	width:expression(document.body.clientWidth < 663? "663px" : "auto");
}
/* クリア要素  */
body#information .news{
	clear: both;
}

/* よく使われるメニュー  */
body#information .usually{
	border-top:3px solid #E0E0E0;
	border-bottom:3px solid #E0E0E0;
	padding:10px;
	margin:0px 0px 15px 0px;
	background:url(../images/bg_top_usually.gif) repeat-y 0 0;
	width:643px;
	_width:663px;/* IE6 Hack */
	float:left;
	display:inline;
}
body#information .usually h3{
	float:left;
	display:inline;
	width:150px !important;
	border-top:none !important;
	border-right:3px solid #E0E0E0;
	padding:0px 15px 0px 5px !important;
	margin:0px;
}
body#information .usually ul{
	float:left;
	display:inline;
	padding-top:5px;
	margin-left:15px;
}
body#information .usually ul li{
	float:left;
	display:inline;
	font-size:1.2em;
	padding:1px 0px 0px 15px;
	margin-right:15px;
}

/* お知らせ：故障情報：メンテナンス 要素 */
body#information h3{
	float:left;
	display:inline;
	border-top:3px solid #D9D9D9;
	padding:10px 0px 10px 5px;
	width:92px;
	margin:0px;
}
body#information ul.topics{
	float:left;
	border-top:1px solid #D9D9D9;
	padding:7px 0px 10px 0px;
	width:565px;
	background:url(../images/dott_gray.gif) repeat-y left top;
	margin:0px 0px 10px 0px;
}
body#information ul.topics li{
	font-size:1.2em;
	clear:both;
	margin:0px 0px 0px 10px;
	padding:3px 0px 0px 0px;
	_margin-bottom:-3px;/* IE6 HUK */
}
body#information ul.topics li img{
	vertical-align:top;
	margin:0px 0px 0px 3px;
}
body#information ul.topics li strong{
	float:left;
	width:8em;
	display:inline;
	margin-right:5px;
}
body#information ul.topics li .imgu{
	float:left;
	display:inline;
	margin-top:1px;
	width:28px;
}
body#information ul.topics li span{
	width:398px;
	float:left;
	display:inline;
	margin-left:3px;
	background:url(../images/arrow_other.gif) no-repeat 0 1px;
	padding-left:15px;
}
body#information ul.topics li span img{
	vertical-align:top;
	margin-top:1px;
	margin-left:5px;
	text-decoration:none;
	float:none;
}
body#information ul.topics li.right{
	text-align:right;
	padding-top:10px;
	padding-right:10px;
}
body#information ul.topics li a.otherLeft{
	display:inline;
	background:url(../images/arrow_other.gif) no-repeat top left;
	margin-left:3px;
	padding-left:15px;
}

/* プラン料金等BTN */
body#information ul.topBTN{
	padding:0px 3px 5px 5px;
	background:url(../images/bg_gray_checker.gif);
	margin:10px 0px 15px 0px;
	clear:both;
	display:inline;
	float:left;
}
body#information ul.topBTN li{
	display:inline;
	float:left;
	padding:5px 2px 0px 0px;
}

/* 安心してご利用頂くために */
body#information h3.use{
	width:180px;
	margin:0px;
}
body#information ul.topuse{
	float:left;
	border-top:1px solid #D9D9D9;
	padding:15px 0px 10px 10px;
	width:463px;
	_width:473px;
	background:url(../images/dott_gray.gif) repeat-y left top;
	margin:0px;
}
body#information ul.topuse li{
	float:left;
	display:inline;
	margin-right:6px;
}