@charset "UTF-8";

@import url(base2.css);
@import url(textsettings.css);


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


textsetting.css
各ブラウザでのフォントサイズの違いをなくすcss

base.css
bodyの余白や、h1h2...の余白、clearfixなど、

【common.css】
上記cssのimportや、レイアウト（大枠）を記載したcss




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


/*  フォントサイズ早見表
	以下のようにサイズを指定することで各ブラウザでのフォントサイズを揃えることが出来ます。
	左記のパーセントで指定してください。

	77% = 10px	|	122% = 16px	|	167% = 22px	
	85% = 11px	|	129% = 17px	|	174% = 23px 
	92% = 12px	|	136% = 18px	|	182% = 24px 
	100% = 13px	|	144% = 19px	|	189% = 25px 
	107% = 14px	|	152% = 20px	|	197% = 26px 
	114% = 15px	|	159% = 21px	| 	

*/

/* ------------------------------------------------------------ */
/* リンク色 */
/* ------------------------------------------------------------ */

a:link{
	color:#0546C9;
	text-decoration:underline;
}
a:visited{
	color:#0546C9;
	text-decoration:underline;
}
a:hover{
	color:#0546C9;
	text-decoration:none;
}
a:active{
	color:#0546C9;
	text-decoration:none;
}

#main-area a:hover img,
#submenu-area a:hover img,
#main-area_login a:hover img{
	filter		: alpha(opacity=70);
	opacity		: 0.7;
	-moz-opacity	: 0.7;
}


/* ------------------------------------------------------------ */
/* 基本、レイアウト指定 */
/* ------------------------------------------------------------ */

body{
	font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#container_sub{
	background:url(../img/common/bg.jpg) repeat-x top left #FFF;
}
#container_sub_order{
	background:url(../img/common/bg_order.jpg) repeat-x top left #FFF;
}

#container_in{
	width:904px;
	margin:0 auto;
}
/* ------------------------------------------------------------ */
/* ヘッダー */
/* ------------------------------------------------------------ */
#header-area{
	width:904px;
	height:auto;
	margin:0 auto;
	padding:18px 0 3px 0;
	clear:both;
}

#identity{
	height:39px;
	width:338px;
	float:left;
}

#sub-identity{
	width:auto;
	height:auto;
	float:right;
	padding:12px 0 0 0;
}

#coment{
	float:left;
	padding:10px 0 0 10px;
	line-height:1.4;
	font-size:77%;
}

/* SoftBank SELECTIONヘッダー */
#sshead{
	background-color:#000;
	height:45px;
}
#sshead .hr_logo{
	float:left;
	padding:16px;
}
#sshead .ss_logo{
	float:right;
	padding:11px 15px;
}


/* ------------------------------------------------------------ */
/* グローバルメニュー */
/* ------------------------------------------------------------ */

#globalmenu{
	width:904px;
	margin:0;
	padding:18px 0 0 3px;
	clear:both;
}

#globalmenu ul li{
	float:left;
}

/* ------------------------------------------------------------ */
/* コンテンツ大枠 */
/* ------------------------------------------------------------ */

#contents-area{
	width:893px;
	height:auto;
	background:url(../img/common/bg_contents.jpg) no-repeat top left #FFFFFF;
	margin:8px 0 0 0;
	padding:10px 11px 0px 0px;
	_padding:10px 2px 0px 0;
	clear:both;

}

#contents{
	width:900px;
	margin:0 0 40px 2px;
	background:url(../img/common/bg_main-sub.gif) repeat-y top left;
}

#contents-area .sitepath{
	font-size:77%;
	padding:5px;
	margin:0;
}

#contents-area .sitepath a:link,
#contents-area .sitepath a:visited{
	color:#333;
}
#contents-area .sitepath a:hover,
#contents-area .sitepath a:active{
	color:#666;
}



/* ------------------------------------------------------------ */
/* サイドメニュー */
/* ------------------------------------------------------------ */
#submenu-area{
	width:220px;
	float:right;
	padding:0 10px 0 0;
}


.submenu-top{
	width:220px;
}

.submenu{
	width:220px;
	padding:0 0 100px 0;
	background:#E7E7E7;
}

.submenu-contents{
	width:200px;
	margin:0 auto;
	padding:5px 0 0 0;
	background:#FFFFFF;
}

ul.order1{
	padding:0 0 0 10px;
}

ul.order1 li{
	font-size:0px;
	padding:0 0 10px 0;
}


.tt-order2{
	width:200px;
	padding:5px 0 10px 0;
}

ul.order2{
	padding:0 0 10px 10px;
}

ul.order2 li{
	display:block;
	line-height:1.5;
	padding:0 0 0 15px;
	background:url(../img/common/point_circle.gif) no-repeat 0 6px;
	width:150px;
	vertical-align:bottom;
}
ul.order2 li.sub{
	display:block;
	line-height:1.5;
	padding:0 0 0 15px;
	background:url(../img/common/point_circle_sub.gif) no-repeat 0 6px;
}
ul.order2 li ul li{
	display:block;
	line-height:1.5;
	padding:0 0 0 15px;
	background:url(../img/common/point_circle.gif) no-repeat 0 6px;
}

.ssl-btn{
	width:180px;
	padding:0 0 10px 10px;
}
/* ------------------------------------------------------------ */
/* メイン */
/* ------------------------------------------------------------ */
#main-area{
	width:657px;
	float:left;
	background-color:#FFF;
	
}

.section{
	width:615px;
	margin:0 0 20px 0;
	padding:0 10px 10px 25px;
	clear:both;
}

.section-contents{
	width:610px;
	margin:0;
	padding:0 0 10px 0;
	margin:0 0 20px 0;
	clear:both;
	border-bottom:#CCC dotted 1px;
}

.section-contents-b{
	width:593px;
	margin:0 0 20px 0;
	border:1px solid #0546C9;
	padding:10px;
	clear:both;
}

.section-contents-bin{
	width:593px;
	margin:0;
	padding:0 0 20px 0;
	clear:both;
}

.pagetop {
	width:900px;
}

#contents-area .pagetop a{
	display		: block;
	width:860px;
	margin		: 20px 0 5px 0;
	padding		: 5px 20px;
	text-align	: right;
	font-size	: 77%;
	background	: url(../img/common/point_pagetop.gif) center right no-repeat;
	background-color: #E7E7E7;
	color:#333333;
	text-decoration:underline;
}

#contents-area .pagetop a:hover{
	background	: url(../img/common/point_pagetop.gif) center right no-repeat;
	background-color: #E7E7E7;
	color:#333333;
	text-decoration:none;
}

#main-area .pagetitle{
	margin:0 0 10px 0;
	padding:0 0 0 7px;
}

h1{
	height:40px;
	background:url(../img/common/h1.jpg) no-repeat;
	font-size:136%;
	font-weight:bold;
	padding:15px 0 10px 18px;
	margin:0;
	color:#FFFFFF;
}

h2{
	background:url(../img/common/h2.jpg) no-repeat;
	font-size:107%;
	font-weight:bold;
	padding:2px 0 10px 18px;
	margin:0 0 10px 0;
}

h3{
	border-left:5px #333 solid;
	font-size:100%;
	font-weight:bold;
	padding:1px 0 1px 7px;
	margin:0 0 10px 0;
}

h4{
	font-size:100%;
	font-weight:bold;
	margin:0 0 5px 0;
}

#main-area span.link{
	background:url(../img/common/point_ctrigona.gif) no-repeat 0 2px;
	padding:0 0 0 15px;

}

#main-area span.new{
	background:#CC0000;
	padding:3px;
	margin:0 5px 0 0;
	color:#FFFFFF;

}

#main-area span.seal{
	color:#CC3300;
}

#main-area strong{
	color:0546C9;
}

ul.anchor{
	width:600px;
	margin:0 auto;
}

ul.anchor li{
	float:left;
	text-align:center;
	padding:0 5px;
}

/*-----------   ツールチップ(機能一覧)   ------------*/
.tooltip{
	position:relative;
}

a.tooltip:hover {
	background:#ffffff;
	text-decoration:none;
} /*BG color is a must for IE6*/

a.tooltip span {
	display:none;
	padding:5px;
	width:230px;
}

a.tooltip:hover span{
	display:inline;
	position:absolute;
	background:#FFFFCC;
	border:1px solid #cccccc;
	color:#333;
	font-size:92%;
	font-weight:normal;
	left:240px;
	top:0px;
} 

/*-----------   ツールチップ(お申し込み)   ------------*/
a.tooltip-o:hover {
	background:#ffffff;
	text-decoration:none;
} /*BG color is a must for IE6*/

a.tooltip-o span {
	display:none;
	padding:2px 3px;
	margin:10px 0 0 10px;
	width:230px;
}

a.tooltip-o:hover span{
	background:#FFFFCC;
	border:1px solid #cccccc;
	color:#6c6c6c;
	font-size:92%;
	font-weight:normal;
} 



/*-----------   list-style   ------------*/
.section ul.ls-disc{
	margin:0;
	padding:0 0 0 15px;
}

.section ul.ls-disc li{
	list-style:disc;
}

.section ul.ls-no-disc{
	margin:0;
	padding:0 0 0 15px;
}

.section ul.ls-no-disc li{
	list-style:none;
	list-style-type:disc;
}

.section li ul.ls-no-disc2{
	margin:0;
	padding:0 0 0 15px;
}

.section li ul.ls-no-disc2 li{
	list-style:none;
	list-style-type:disc;
}

.section ul.ls-no-dec{
	margin:0;
	padding:0 0 0 15px;
}

.section ul.ls-no-dec li{
	list-style:none;
	list-style-type:decimal;
}

.section li ul.ls-no-dec2{
	margin:0;
	padding:0 0 0 15px;
}

.section li ul.ls-no-dec2 li{
	list-style:none;
	list-style-type:decimal;
}

.section li ul.ls-no-circle2{
	margin:0;
	padding:0 0 0 15px;
}

.section li ul.ls-no-circle2 li{
	list-style:none;
	list-style-type:circle;
}

.section ul.ls-qa{
	margin:0;
	padding:0;
}

.section ul.ls-qa li.q{
	padding:0 0 10px 25px;
	background:url(../img/help/help_q.jpg) no-repeat;
}

.section ul.ls-qa li.a{
	padding:0 0 10px 25px;
	background:url(../img/help/help_a.jpg) no-repeat;
}

/* ご利用開始までの流れ */

p.mailtitle{
	background:url(../img/flow/icon_mail.gif) #EEE 7px 13px no-repeat;
	border:1px solid #CCC;
	padding:10px 10px 10px 27px;
}
p.doclist{
	background-color:#EEE;
	border:1px solid #CCC;
	padding:10px 10px 10px 27px;
	width:400px;
}

/* ------------------------------------------------------------ */
/* フッター */
/* ------------------------------------------------------------ */

#footer-area{
	padding:10px 0 0 0;
	width:900px;
}

.footer-menu{
	background:url(../img/common/bg_footermenu.jpg) repeat-x bottom left #0546C9;
	_height:45px;
	min-height:45px;
	padding:5px 0 0 0;
	text-align:center;
	color:#FFFFFF;
	font-size:85%;
}

#footer-area .footer-menu span{
	padding:0 5px;
}

#footer-area .footer-menu a:link ,
#footer-area .footer-menu a:visited{
	color:#FFFFFF;
	text-decoration:underline;
}

#footer-area .footer-menu a:hover ,
#footer-area .footer-menu a:active{
	color:#FFFFFF;
	text-decoration:none;
}

#footer-area .copyright{
	background:url(../img/common/bg_copyright.jpg) no-repeat;
	height:45px;
	padding:10px 0 0 0;
	text-align:center;
	font-family: 'Verdana',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-size:77%;
	margin:0;
}


/* ------------------------------------------------------------ */
/* テーブル */
/* ------------------------------------------------------------ */

.section table{
	border-collapse: collapse;
	margin:0 0 10px 0;
}

.section table th,
.section table td{
	padding:7px 10px;
	border:1px solid #DDD;
}

.section table th{
	text-align:left;
	vertical-align:middle;
	background:url(../img/common/bg_th.jpg) #EFEFEF left bottom repeat-x;
}

.section table th.t-center{
	text-align:center;
	background:#0546C9;
	color:#FFFFFF;
}

.section table td.c-center{
	text-align:center;
}


table.inqury{
	border-collapse: collapse;
}

table.inqury td{
	vertical-align:middle;
}

/* 機能一覧 */

.section table.function_table{
	text-align:center;
	margin:0 0 15px 0
}
.section table th.function_kind{
	background:#777;
	padding:3px 10px;
	color:#FFF;
}
.section table th.function_light{
	background:#80A2E8;
	color:#FFF;
	text-align:center;
}
.section table th.function_standard{
	background:#437AEA;
	color:#FFF;
	text-align:center;
}
.section table th.function_premium{
	background:#0546C9;
	color:#FFF;
	text-align:center;
}
.section table.function_table td strong{
	font-size:122%;
	margin:0 2px 0 0;
}

table.order_form{
	margin:0;
	border-bottom:none;
}
table.order_form th,
table.order_form td{
	border-bottom:none;
}
span.charge{
	background-color:#F60;
	color:#FFF;
	padding:0 3px;
	margin:0 0 0 5px;
}


/* ------------------------------------------------------------ */
/* デザインパーツ */
/* ------------------------------------------------------------ */

/*.section h3{
	margin:0 0 0 0;
	font-size:122%;
	color:#000;
}*/

img{
	display:block;
}

.dotto_top{
	border-top:1px dotted #CCC;
}
.dotto_bottom{
	border-bottom:1px dotted #CCC;
}

img.left {
	float: left;
	margin: 0 12px 5px 0;
}
img.left_function{
	float: left;
	margin: 0 3px 0 0;
}

img.left2 {
	float: left;
	margin: 0 12px 40px 0;
}

img.right {
	float: right;
	margin: 5px 0 0px 12px;
}

img.right2 {
	float: right;
	margin: 0px 0 5px 12px;
}
span.red{
	color:#C00;
	font-weight:bold;
}
span.ex{
	color:#777;
	font-size:77%;
}
.section table th.center{
	text-align:center;
}

img.registered{
	float:left;
	margin:0 5px 0 0;
}