@charset "shift_jis";

/**
 * DESKTOP STYLE
 * @version	0.0.1 2013-08-29
 * @author
 * @description

1.CONTENTS
**/

/* 1.CONTENTS
-------------------------------------------------*/
/*-------------------------------------------------
text
-------------------------------------------------*/
.caution2 {color:#1945C8;}

/*-------------------------------------------------
absoluteを使用する際の流用パーツ
-------------------------------------------------*/
.img_position_base {
	position: relative;
}
/* デバイス対応 */
.img_position_base_756 {
	width: 756px;
	margin: auto;
	position: relative;
}


/*-------------------------------------------------
index
-------------------------------------------------*/
.box-sub:after {display:block; visibility:hidden; clear:both; height:0; content:".";}
/*\*/ .box-sub {*height:1%;} /**/
/*\*//*/ .box-sub {overflow:hidden;} /**/
.box-subleft {margin:0 15px 0 0; padding:7px 0; width:300px; float:left;}
.box-subright {padding-left:315px;}
.boxmr {margin-bottom:20px; border:1px #d4d4d4 solid;}
.boxmr .box-cltmr,
.boxmr .box-crtmr,
.boxmr .box-clbmr,
.boxmr .box-crbmr {background-image:url(/common2012/images/main/bg_box4.gif);}
.boxmr .box-cltmr,
.boxmr .box-crtmr,
.boxmr .box-clbmr,
.boxmr .box-crbmr {display:block; width:4px; height:4px; font-size:1px; line-height:1px; position:relative; z-index:1;}
.boxmr .box-cltmr {background-position:0 0; float:left; margin:-1px 0 0 -1px;}
.boxmr .box-crtmr {background-position:-4px 0; float:right; margin:-1px -1px 0 0;}
.boxmr .box-clbmr {background-position:-8px 0; float:left; margin:-3px 0 0 -1px;}
.boxmr .box-crbmr {background-position:-12px 0; float:right; margin:-3px -1px 0 0;}
.boxmr .boxmr-title {background:#ededed; padding:5px 12px;}
.boxmr .boxmr-title p {margin-bottom:0 !important; font-size:108%; line-height:1.5; display:block;}
.boxmr .boxmr-title a {background:url(/common2012/images/main/bg_arrow01.gif) left 0.6em no-repeat; padding:0 0 0 8px; display:inline-block;}
.boxmr .boxmr-area {padding:5px 12px;}
.boxmr .boxmr-area p {display:block;}

table.price td table {border:none !important;}
table.price td table td {padding:0 !important; border:none !important;}
table.price span.price-block {margin-bottom:1em; display:block;}

/*-------------------------------------------------
guide
-------------------------------------------------*/
#tab {background:url(/mobile/entry-d/guide/images/bg_tab01.gif) left bottom repeat-x; margin:0 auto 20px; padding-bottom:3px; width:100%;}
#tab table {width:100%; border:none;}
#tab table .tab-arw td {padding:0 0 15px !important; text-align:center;}
#tab table td.tab-act {background:#004e83; padding-top:5px; width:32%; color:#fff; text-align:center;}
#tab table td.tab-act-l {background:#004e83 url(/mobile/entry-d/guide/images/bg_tab02-a1.gif) left top no-repeat; width:4px;}
#tab table td.tab-act-r {background:#004e83 url(/mobile/entry-d/guide/images/bg_tab02-a2.gif) right top no-repeat; width:4px;}
#tab table td.tab-oth {background:#e6f1fc; padding-top:5px; width:32%; color:#fff; text-align:center;}
#tab table td.tab-oth-l {background:#e6f1fc url(/mobile/entry-d/guide/images/bg_tab02-b1.gif) left top no-repeat; width:4px;}
#tab table td.tab-oth-r {background:#e6f1fc url(/mobile/entry-d/guide/images/bg_tab02-b2.gif) right top no-repeat; width:4px;}
.merit {margin:0 auto; padding:10px 1em;}
.merit table {margin:0 auto; width:100%; border:none;}
.merit table td.total {width:221px; text-align:right; vertical-align:top;}
.merit table th.recommend {background:#2e57a5; height:24px;}
.merit table th span {padding:5px 10px; display:block;}
.merit table td.recommend-t {background:#e3ecfc; line-height:1.3;}
.merit table td span {padding:10px; display:block;}
.comparison .comparison-d {zoom:1;}
.comparison .comparison-t {background:url(/mobile/entry-d/guide/images/bg_total_120724.gif) 45% center no-repeat; zoom:1;}
.comparison .comparison-d:after,
.comparison .comparison-t:after {content:""; display:block; height:0; clear:both; visibility:hidden;}
.comparison .price-l {width:40%; float:left;}
.comparison .price-r {width:50%; float:right;}
.comparison .comparison-t .price-l,
.comparison .comparison-t .price-r {padding-top:7px; border-top:2px #333 solid;}
.comparison-d p.price-ti {padding-bottom:0.25em !important; font-size:120%; font-weight:bold;}
.comparison table {width:100%;}
#cost .cost-txt {font-size:140%;}
#cost .cost-txt .caution {font-size:160%;}
#link-btn {margin:0 auto; width:658px; height:52px; position:relative;}
#link-btn.btn-thd {margin:10px 0 35px;}
#link-btn li {position:absolute; top:0;}
#link-btn .link-btn-l {left:0;}
#link-btn .link-btn-r {right:0;}
.part-btn {margin:0 auto; width:528px; height:63px; position:relative;}
.part-btn div {position:absolute; bottom:0;}
.part-btn .part-btn01 {left:0;}
.part-btn .part-btn02 {right:0;}

/*-------------------------------------------------
device
-------------------------------------------------*/
.device {min-height:200px; height:auto !important; /height:200px; position:relative;}
.device .device-item {width:168px; position:absolute; top:0; left:0;}
.device .device-list {padding-left:180px; min-height:200px; height:auto !important; /height:200px;}
.device .device-list .device-kind {vertical-align:top;}

/*-------------------------------------------------
howto
-------------------------------------------------*/
.stepbox_set {background:#fff url(/mobile/entry-d/howto/images/howto_head.gif) no-repeat left top; margin:0 auto; padding:5px 0; width:603px;}
.stepbox {background:#fff url(/mobile/entry-d/howto/images/howto_bg.gif) no-repeat left bottom;}
.stepbox:after {display:block; visibility:hidden; clear:both; height:0; content:".";}
/*\*/ .stepbox {*height:1%;} /**/
/*\*//*/ .stepbox {overflow:hidden;} /**/
.stepbox .stepmenu {padding:15px 0px 15px 8px; width:215px; float:left;}
.stepbox .stepdtl {padding:11px 11px 15px; width:358px; float:right;}
.stepbar {margin:15px 0; height:24px;}

/* モバイル ONE ご利用の流れ ご利用申し込み画像 */
.howto_simorder_01 {background:url(/mobile/one/images/howto_simorder_01_141002.gif) no-repeat 361px bottom #fff; width:700px; margin:auto;}
.howto_prepaid_simorder_01 {background:url(/mobile/one/prepaid/images/howto_prepaid_simorder_01.gif) no-repeat 361px bottom #fff; width:700px; margin:auto;}

/*-------------------------------------------------
タブメニュー
-------------------------------------------------*/
ul.tabmenu {
	border-bottom: 1px #d4d4d4 solid;
}
.tabmenu li.first {margin-left:10px;}
.tabmenu li {
	width: 250px;
	margin: 0 2px;
	padding: 15px;
	background: url(/mobile/one/images/tabmenu.gif) no-repeat top left #3571C3;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	font-size: 116%;
	font-weight: bold;
	line-height: 1.4;
	color: #eaf1f9;
	text-align: center;
	vertical-align: bottom;
	letter-spacing: 0.1em;
}
.tabmenu li span.small {font-size: 80%; font-weight: normal;}
.tabmenu li a {color: #eaf1f9;}
.tabmenu li a:hover, .tabmenu li a:visited {color: #FFFFFF;}
.tabmenu li.now {
	width: 300px;
	padding: 20px 15px;
	background: url(/mobile/one/images/tabmenu_now.gif) no-repeat top left #FFFFFF;
/*	font-size: 176.92%;*/
	font-size: 135%;
	color: #333333;
}

/*-------------------------------------------------
タブ切替メニュー
-------------------------------------------------*/
ul.tabs {
	border-bottom: 1px solid #D4D4D4;
	}
ul.tabs li:first-child {
	margin-left: 10px;
	border-left:1px solid #ccc;
	}
ul.tabs li {
	display: inline-block;
	*display: inline;  
    *zoom: 1;
	border-right:1px solid #ccc;
	border-top:1px solid #ccc;
	background-color:#949494;
	color:#fff;
	font-weight: bold;
	vertical-align: bottom;
	margin: 0 2px;
	
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	}
ul.tabs li.active {
	background-color:#3571C3;
	}
ul.tabs li a {
	display:block;
	padding:10px 15px;
	color:#fff;
	letter-spacing:-1px;
	outline:none;
	text-decoration:none;
	letter-spacing: 0.1em;
	}
ul.tabs li.active a {
	padding:20px 25px;
	font-size: 110%;	
	font-weight: bold;
	color:#fff;
	text-decoration: none !important;
	}

/*-------------------------------------------------
mobile one タブ切替メニュー 20140620 id="step5" 
-------------------------------------------------*/
#step5 ul.tabs {
	border-bottom: 1px solid #D4D4D4;
	}
#step5 ul.tabs li:first-child {
	margin-left: 10px;
	border-left:1px solid #ccc;
	line-height: 40px;
	}

#step5 ul.tabs li {
	display: inline-block;
	*display: inline;  
    *zoom: 1;
	border-right:1px solid #ccc;
	border-top:1px solid #ccc;
	background-color:#949494;
	color:#fff;
	font-weight: bold;
	vertical-align: bottom;
	margin: 0 2px;
	height: 60px;
	
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	}
#step5 ul.tabs li.active {
	background-color:#3571C3;
	height: 70px;
	}
#step5 ul.tabs li a {
	display:block;
	color:#fff;
	letter-spacing:-1px;
	outline:none;
	text-decoration:none;
	letter-spacing: 0.1em;
	}
#step5 ul.tabs li.active a {
	font-size: 110%;	
	font-weight: bold;
	color:#fff;
	text-decoration: none !important;
	padding:10px 15px;
	}

#step5 div.tabs_content{
	padding:12px;
	border: 1px solid #d4d4d4;
	border-top: none;
	}

#step5 div.tabs_content div.box1{
	margin-bottom: 0;
	}

#step5 div.tabs_content div.floatblock2{
	text-align: center;
	}

#step5 div.tabs_content div.floatblock2 div img{
	margin: 10px auto;
	}

#step5 div.tabs_content div.floatblock2 div p{
	padding: 10px 25px 0;
	text-align: left;
	margin-bottom: 5px;
	}

/*-------------------------------------------------
mobile one TOP  sim package
-------------------------------------------------*/

#simpackage div div a{
	text-decoration: none;
	}

#simpackage div div a p{
	margin-bottom: 0;
	padding: 10px;
	font-weight: bold;
	color: #cc0000;
	}

#simpackage div div.floatblock3-left a p{
	background: #dbeef4;
	}




	
/*-------------------------------------------------
btn
-------------------------------------------------*/
ul.floatbnr {width: 795px;}
ul.floatbnr li { float: left;}
ul.floatbnr li a img { margin-right: 8px;}

/*-------------------------------------------------
shopname & logo
-------------------------------------------------*/
ul.floatlogo {width: 756px;}
ul.floatlogo li {
	float: left;
	width: 240px;
	border: 1px solid #999;
	padding: 10px 0;
	margin: 0 10px 10px 0;
	text-align: center;
	}
ul.floatlogo li a {
	display: block;
	}
/*ul.floatlogo li a.link {
	background-position: left center;
	display: inline-block;
	}*/
ul.floatlogo li a img {
	/*margin: 0 0 10px;
	vertical-align: middle;*/
	}

/*-------------------------------------------------
simpackage
-------------------------------------------------*/
div#simpackage {
	width: 756px;
	margin: 0 auto;
}
div.simpkentry p {
	text-align: center;
	padding-bottom: 40px;
	background: url(/mobile/one/images/arrow.gif) no-repeat center bottom;
}
div.simpkentry div.floatblock2-left {background: url(/mobile/one/images/dotline.gif) repeat-y right 0;}
div.simpkentry div.entry-center { margin: 0;}



/*-------------------------------------------------
list
-------------------------------------------------*/
#TB_ajaxContent p.course01{
	color: #e10000;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.3em;
}

#TB_ajaxContent p.course02{
	color: #008406;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.3em;
}

#TB_ajaxContent p.course03{
	color: #0060ef;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.3em;
}

div.spec ul{
	list-style: none;
	display: block;
}
div.spec ul li{
	padding-right: 15px;
	float: left;
}
div.spec{
	overflow : hidden; 
}

div.ex{
	border: dotted 1px #666;
	padding: 8px;
	overflow: hidden;
	margin: 10px 0 20px;
}
ul.datavolume{
    display: block;
    min-width: 160px;
    text-align: left;
}
ul.datavolume li {
    min-height: 24px;
    text-align: left;
}
ul.datavolume li.leftside{
	width: 255px;
	float: left;	
}
ul.datavolume li.rightside{
	width: 310px;
	float: left;	
}
ul.datavolume li.clear{
	clear: left;
	display: block;
	width: auto;
}
ul.datavolume li.douga {
    background: url("/mobile/one/guide/chart/images/icon_douga.gif") no-repeat scroll -4px -4px transparent;
    padding: 0 0 0 25px;
}
ul.datavolume li.website {
    background: url("/mobile/one/guide/chart/images/icon_website.gif") no-repeat scroll -4px -4px transparent;
    padding: 0 0 0 25px;
}
ul.datavolume li.mail {
    background: url("/mobile/one/guide/chart/images/icon_mail.gif") no-repeat scroll -4px -5px transparent;
    padding: 0 0 0 25px;
}
ul.datavolume li.tell{
    background: url("/mobile/one/guide/chart/images/icon_tell.gif") no-repeat scroll -4px -5px transparent;
	padding: 0 0 0 25px;
}
ul.datavolume li.chat{
    background: url("/mobile/one/guide/chart/images/icon_chat.gif") no-repeat scroll -4px -5px transparent;
	padding: 0 0 0 25px;
}

p.point{
	background-color: #eee;
	padding-left: 10px;
	border-left: 5px #999 solid;
}

/*-------------------------------------------------
guest/chart/
-------------------------------------------------*/
#course_box {
	width: 920px;
	margin: 0 auto;}
.course_ttl { margin: 0;}

.cbox_inner {
	border-right: 3px solid #1A2133;
	border-left: 3px solid #1A2133;
	border-bottom: 3px solid #1A2133;
	}
#course_box .cbox_inner .imagefloat {
	padding-right: 10px;
	margin-top: -40px;
	}



/* For modern browsers */
.cf:before,.cf:after { content:""; display:table; }
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

/*-------------------------------------------------
/device_page/
-------------------------------------------------*/
#device_box {
	width: 920px;
	margin: 0 auto;
	padding: 0;
	}
	
#device_box .device01{
	width: 460px;
	margin: 0;
	display: block;
	}

#device_box .device02{
	width: 460px;
	margin: 0;
	display: block;
	}

#device_box .device01_btm{
	width: 433px;
	border-width: 0 1px 2px 2px;
	border-color: #b2b2b2;
	border-style: solid;
	margin: 0;
	padding: 12px;
	}

#device_box .device02_btm{
	width: 433px;
	border-width: 0 2px 2px 1px;
	border-color: #b2b2b2;
	border-style: solid;
	margin: 0;
	padding: 12px;
	}
	
#device_box .imagefloat{
	width: 90%;
	margin: 0 auto;
	vertical-align: middle;
	}
	
#device_box .link{
	height: 121px;
	vertical-align: middle;
	}
	
/*-------------------------------------------------
/course_page/
-------------------------------------------------*/
#course_chart{
	width: 756px;
	margin: 0 auto 15px;
}

#course_chart dl dt,#course_chart dl dd{
	display: inline;
}

.category-l{
	float: left;
	width: 30px;
}
.category-r{
	width: 726px;
	float: left;
}

/*-------------------------------------------------
/tanmatasu-test_page/
-------------------------------------------------*/
#tanmatsu-test div.q1,#tanmatsu-test div.q2{
	width: 756px;
}

#tanmatsu-test div.q3{
	width: 494px;
}
#tanmatsu-test ul li{
	display: inline;
}

/*-------------------------------------------------
/toglle css/
-------------------------------------------------*/
.toggle h3 {
	border: none;
	}
.toggle h3 a {
	display: block;
	background: url("/mobile/one/images/toggleIconSprite.gif") 0px 3px no-repeat;
	padding-left: 22px;
	}
.toggle h3.open a { background-position: 0px -32px;}

/*-------------------------------------------------
/one/apply_new/
-------------------------------------------------*/
.twoCol {}
.twoCol .colL {
	float: left;
	width: 456px;
	}
.twoCol .colR {
	float: right;
	width: 290px;
	}
dl.stepBox {}
dl.stepBox dt {
	clear: both;
	float: left;
	width: 136px;
	padding: 2px;
	margin: 0 5px 5px 0;
	color: #FFF;
	background-color: #0F4174;
	}
	dl.stepBox dt span {
		display: block;
		padding-left: 5px;
		border: 1px solid #FFF;
		}
dl.stepBox dd {
	padding: 3px;
	margin-bottom: 5px;
	}
div.entryBox {
	border: 1px solid #999;
	padding: 10px;
	}
	div.entryBox a {
		display: block;
		width: 247px;
		margin: auto;
		}

/*
<div class="twoCol cf">
<dl class="colL stepBox cf">
<dt><span>STEP1 コース選択</span></dt><dd「おすすめコース診断」でコースを確認。></dd>
<dt><span>STEP2 お申し込み</span></dt><dd>下の「お申し込み」からSIMカードを購入。</dd>
<dt><span>STEP3 情報登録</span></dt><dd>右の「ご利用登録」から情報を登録。</dd>
<dt><span>STEP4 設定</span></dt><dd>「接続設定」を参考に設定。利用開始！</dd>
</dl>
<div class="colR">
<h4><strong>迷惑メール、詐欺メールを届けません！</strong></h4>
<a href="/mobile/one/apply_member/"><img src="/mobile/one/images/btn/btn_one_entry_02.gif" alt="OCN会員の方はこちら" width="247" height="63" class="fade"></a>
<p>ご利用はSIMカード購入後、カードに記載されている情報の登録が必要です。</p>
</div>
</div>
*/


/*-------------------------------------------------
procedure
-------------------------------------------------*/
div.procedure_navi .navi_l{
	float:left;
	width: 547px;
	border: 1px solid #ccc;
	background: #eee;
	padding: 7px;	
}

div.procedure_navi .navi_l ul li{
	float: left;
	width: 185px;
	height: 163px;
}

div.procedure_navi .navi_l ul li.last{
	width: 177px;
	height: 163px;
}

div.procedure_navi .navi_r{
	width: 177px;
	float: right;
	vertical-align: bottom;
	padding-bottom: 7px;
	padding-top: 44px;
}

h2#changecourse{
	clear: both;
	}

div.procedure_navi:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility: hidden;  
}  
  
div.procedure_navi { display: inline-table; }  
  
/* Hides from IE-mac \*/  
* html div.procedure_navi { height: 1%; }  
div.procedure_navi { display: block; }  
/* End hide from IE-mac */