@charset "shift_jis";/* エスケープ */

/* narrow.css:サイドメニュー付のページが読み込むCSSです。 */

/* ========== 目次 ==========
   1:サイドメニュー
   2:メインコンテンツ
   3:見出し
   4:汎用クラス
   5:共通レイアウト
   6:個別ページ設定
   ======================= */



/* ==========================
   1:サイドメニュー
   ======================= */

/* 共通
--------------------------*/
/* サイドメニュー全体 ----- */
div#content_wrapper #sidemenu {
float:left;
width:185px;
background:url(../img/sidemenu/bg_top.gif) left top no-repeat;
font-size:118%;/* 14px相当 */
}
div#content_wrapper #sidemenu div.sidemenu_wrap1 {
margin:0 4px;
padding-bottom:10px;
background:#FFFFFF url(../img/sidemenu/bg_btm.gif) center bottom no-repeat;
}
div#content_wrapper #sidemenu div.sidemenu_wrap2 {
border-left:#EFEFEF solid 1px;
border-right:#EFEFEF solid 1px;
}

/* タイトル部分 ----- */
div#content_wrapper #sidemenu p {
margin:5px 5px 0 5px;
}

/* メニュー1階層目 ----- */
div#content_wrapper #sidemenu ul {
margin:0 5px;
}
div#content_wrapper #sidemenu ul li {
background:url(../img/sidemenu/arrow1.gif) 5px 15px no-repeat;
padding:10px 0px 10px 15px;
border-top:#CCCCCC solid 1px;
height:100%;/* 【IE対策】リスト入れ子3階層目表示時、不要な背景画像やボーダーが表示されてしまうのを防ぐ */
}
div#content_wrapper #sidemenu ul li#sidemenu_first {
border-top:none;
}
div#content_wrapper #sidemenu ul li.selected {/* 選択中メニュー */
background-color:#FFFFCC;/* 選択中メニューの背景色 */
}
div#content_wrapper #sidemenu ul li.selected div {/* 選択中メニューの子メニューに、色がつかないようにする */
background-color:#ffffff;
margin-left:-15px;
padding-left:15px;
}

/* メニュー2階層目 ----- */
div#content_wrapper #sidemenu ul ul {
margin:0;
margin-top:10px;
margin-bottom:-10px;/* 親liの下余白相殺 */
}
div#content_wrapper #sidemenu ul ul li {
background:url(../img/sidemenu/arrow2.gif) 5px 12px no-repeat;
padding:7px 0 7px 15px;
border-top:#CCCCCC dashed 1px;
font-size:87.5%;
}

/* メニュー3階層目 ----- */
div#content_wrapper #sidemenu ul ul ul {
margin-bottom:-7px;/* 親liの下余白相殺 */
}
div#content_wrapper #sidemenu ul ul ul li {
background:url(../img/sidemenu/arrow2.gif) 5px 12px no-repeat;
padding:7px 0 7px 15px;
border-top:#CCCCCC dashed 1px;
font-size:100%;
}

/* 非アクティブメニューの子メニューを非表示 ----- */
div#content_wrapper #sidemenu ul li.notselected div {
display:none;
}
/* アクティブメニューの親メニューを表示 ----- */
div#content_wrapper #sidemenu ul li.parent {
background-color:#ffffff;
}
/* -----
親のliに　.parent　というクラスを指定することとしましたが、
実際には、.notselectedや.none 以外のクラスであれば何でも大丈夫です。
背景色は指定しなくてもデフォルトで白になっていますが、一応設定しておきます。
----- */


/* その他サービスのサイドメニュー
--------------------------*/
div#content_wrapper #sidemenu ul li.title {
background:none;
padding-left:5px;
font-weight:bold;
}
div#content_wrapper #sidemenu ul li.title.first {
border-top:none;
}



/* ==========================
   2:メインコンテンツ
   ======================= */
div#content_wrapper #main {
float:right;
width:760px;/*2014.6 Modify*/
}
div#content_wrapper #main .first {
margin-top:0;
}



/* ==========================
   3:見出し
   ======================= */
div#content_wrapper #main h1 {
background:url(../img/pagetitle_bg.gif) left top no-repeat;
height:39px;/* 画像の高さ49px-padding10px */
padding:10px 10px 0 20px;
margin-bottom:10px;
font-size:118%;/* 14px相当 */
}

div#content_wrapper #main h2 {
background:url(../img/head2_bg_top.gif) left top no-repeat;
margin-top:30px;
margin-bottom:10px;
font-size:118%;/* 14px相当 */
zoom: 1; /* 【IE対策】印刷非表示バグ解決 */
}
div#content_wrapper #main h2.first {
margin-top:0;
}
div#content_wrapper #main h2 span {
display:block;
background: url(../img/head2_bg_btm.gif) left bottom no-repeat;
padding:8px 10px 8px 20px;
zoom: 1; /* 【IE対策】印刷非表示バグ解決 */
}
div#content_wrapper #main h2 span span {
display:inline;
background:none;
padding:0;
}

div#content_wrapper #main h3 {
border-bottom:#50C935 solid 1px;
margin-top:10px;
margin-bottom:5px;
}
div#content_wrapper #main h4 {
margin-top:10px;
margin-bottom:5px;
}

/* 上の設定を反映させたくない場合 .default　を指定してください。
-------------------------------- */
div#content_wrapper #main h3.default {
border-bottom:none;
margin-top:0;
margin-bottom:0;
}
div#content_wrapper #main h4.default {
margin-top:0;
margin-bottom:0;
}



/* ==========================
   4:汎用クラス
   ======================= */

/*-------------------------
 * ボタン風テキストリンク
--------------------------*/

/* 通常
-----------------*/
/* HTMLにて、aタグにクラスbtn_bgを指定することで、ボタン風のテキストリンクになります。 */
/* 複数行には対応していません。 */
a.btn_bg {
background:url(../img/btn_bg_l.gif) left top no-repeat;
display:inline-block;
padding-left:25px;
line-height:30px;
}
a.btn_bg span {
background:url(../img/btn_bg_r.gif) right top no-repeat;
display:inline-block;
height:30px;
padding-right:20px;
}
a.btn_bg:link,
a.btn_bg:visited,
a.btn_bg:hover,
a.btn_bg:active {
color:#FFFFFF;
font-weight:bold;
}

/* 次の手順・前の手順
-----------------*/
/* HTMLにて、クラスbtn_bgを指定したdivタグの中に、ulを作り、各liにクラスnext、backを指定します。 */
/* HTMLにて、ulにはクラスclearfixを指定します。 */
/* 複数行には対応していません。 */
div.btn_bg ul li a {
display:inline-block;
line-height:30px;
}
div.btn_bg ul li a span {
display:inline-block;
height:30px;
}
div.btn_bg ul li a:link,
div.btn_bg ul li a:visited,
div.btn_bg ul li a:hover,
div.btn_bg ul li a:active {
color:#FFFFFF;
font-weight:bold;
}
/* 次の手順 -----------------*/
div.btn_bg ul li.next {
float:right;
}
div.btn_bg ul li.next a {
background:url(../img/btn_bg_l_next.gif) left top no-repeat;
padding-left:30px;
}
div.btn_bg ul li.next a span {
background:url(../img/btn_bg_r.gif) right top no-repeat;
padding-right:20px;
}
/* 前の手順 -----------------*/
div.btn_bg ul li.back {
float:left;
}
div.btn_bg ul li.back a {
background:url(../img/btn_bg_back_l.gif) left top no-repeat;
padding-left:20px;
}
div.btn_bg ul li.back a span {
background:url(../img/btn_bg_back_r.gif) right top no-repeat;
padding-right:30px;
}


/* 緑斜線背景画像のリンク（コア「サービス内容／価格」ページ）
-----------------*/
a.btn_bg2 {
background:url(../img/oblique.gif);
display:inline-block;
padding:5px 10px;
border:#CCCCCC solid 1px;
margin: 3px 0;
_margin-bottom:-5px;/* 【IE対策】 */
}



/* ==========================
   5:共通レイアウト
   ======================= */

/* +++++++++++++++++++++++++++++++
   メニューページ（メニュー横2段）
+++++++++++++++++++++++++++++++ */
div#content_wrapper #main .section_wrap {
background: url(../img/menu_bg/main_btm.gif) left bottom repeat-x;/* 枠の下側の画像 */
padding-bottom:10px;/* 枠の下端から内容までの距離 */
}
div#content_wrapper #main .section_wrap .section {
background: url(../img/menu_bg/main_top.gif) left top no-repeat;/* 枠の上側の画像 */
width:376px;
}
div#content_wrapper #main .section_wrap .section h2 {
background:url(../img/head_a.gif) left top no-repeat;
border-bottom:#CCCCCC dashed 1px;
margin-top:13px;/* 枠線の上端からタイトル文字までの距離 */
margin-left:10px;/* 点線の長さ調節（左右枠線からの距離） */
margin-right:10px;/* 点線の長さ調節（左右枠線からの距離） */
margin-bottom:5px;/* 点線から説明文までの距離 */
padding-bottom:8px;/* テキストから点線までの距離。少なすぎると、点線が緑のバーに重なってしまう。 */
padding-left:13px;/* 点線の左端はそのままで、テキストの左端の位置調節 */
}
div#content_wrapper #main .section_wrap .section h2.mini {
border:none;
margin-top:20px;
}
div#content_wrapper #main .control {/* 横に並ぶsectionがひとつだけの場合 */
width:378px;
}

/* +++++++++++++++++++++++++++++++
   各種フロー　ページ
+++++++++++++++++++++++++++++++ */
/* --------------------------------
   各種フロー　共通
-------------------------------- */
/* 次の手順への矢印画像 -----------------*/
div#content_wrapper #main ol.flow li.flow {
background:url(../img/arrow_flow_g.gif) 20% bottom no-repeat;/* 緑色下向き矢印 */
margin-bottom:3px;/* 緑下矢印から次のliまでの間隔 */
padding-bottom:26px;/* 緑下矢印を表示させるエリア（高さ）確保＋自身のliから緑下矢印までの間隔 */
}
div#content_wrapper #main ol.flow li.last {/* 最後の手順（矢印なし） */
background:none;
margin-bottom:0;
padding-bottom:0;
}
/* 枠と背景グラデーション画像 -----------------*/
div#content_wrapper #main ol.flow li.flow .flow {/* 枠 divやpなどにクラス指定 */
background:url(../img/bg_gradation_flow.gif) repeat-x;
border:#CCCCCC solid 1px;
padding:10px;
}
/* 手順のタイトル -----------------*/
div#content_wrapper #main ol.flow .title {
margin:0 0 10px 0;
padding:0 0 10px 28px;
text-indent:-28px;
border-bottom: #CCCCCC solid 1px;
font-size:118%;/*14px相当*/
font-weight:bold;
}
/* 手順の番号画像 -----------------*/
div#content_wrapper #main ol.flow img.num,
div#content_wrapper #main h2 img.num {
vertical-align: baseline;/* baseline以外にすると、英数字と日本語の水平位置がずれてしまう。 */
margin-right:5px;
margin-bottom:-10px;/* 番号画像とタイトルテキストの位置調整 */
}

/* --------------------------------
			【各サービス共通】利用開始までの流れ フロー
-------------------------------- */
/* お申し込みの流れ、PCセットアップ手順の流れ　共通-----------------*/
div#content_wrapper #main ol.flow#start_apply,
div#content_wrapper #main ol.flow#start_setup {/* 全体サイズ */
margin:20px 25px 0 25px;
}
div#content_wrapper #main ol.flow#start_apply li.flow p.flow,
div#content_wrapper #main ol.flow#start_setup li.flow p.flow {/* テキスト */
font-size:118%;/* 14px相当 */
font-weight:bold;
padding-left:38px;
text-indent:-28px;
}
/* PCセットアップ手順の流れのみ-----------------*/
div#content_wrapper #main ol.flow#start_setup li.flow {
background:url(../img/arrow_flow_b.gif) 20% bottom no-repeat;/* 青色下向き矢印 */
}

/* --------------------------------
   【セキュア】セットアップ手順 フロー
-------------------------------- */
div#content_wrapper #main ol.flow#rezept_flow {/* 全体サイズ */
margin-top:20px;
margin-left:25px;
width:510px;/* 幅を指定しておかないと、IEで詳細ボタンの位置がずれる */
}
div#content_wrapper #main ol.flow#rezept_flow li.flow div.flow {/* 枠 */
position:relative;/*詳細ボタンを絶対配置にするための基準とする*/
}
div#content_wrapper #main ol.flow#rezept_flow .title {/* タイトル */
margin:0;
padding-bottom:0;
padding-right:70px;
border:none;
}
div#content_wrapper #main ol.flow#rezept_flow .detail {/* 詳細ボタン */
position:absolute;
right:10px;
top:8px;
margin:0;
}
div#content_wrapper #main ol.flow#rezept_flow li.flow div.flow p {/* 説明 */
margin:0 10px;
}

/* --------------------------------
   【セキュア】セットアップ手順 詳細ページ フロー
-------------------------------- */
div#content_wrapper #main ol.flow.setup_detail {/* 全体サイズ */
margin-top:2em;
}
div#content_wrapper #main ol.flow.setup_detail li.flow div.flow {
padding-left:40px;
_padding-top:0;/* 【IE対策】 */
}
div#content_wrapper #main ol.flow.setup_detail p {
margin-bottom:.5em;
}
div#content_wrapper #main ol.flow.setup_detail p.num {
margin-bottom:.3em;
_margin-bottom:0;/* 【IE対策】 */
}
div#content_wrapper #main ol.flow.setup_detail img.num {
margin-left:-30px;
margin-bottom:-28px;
}

/* --------------------------------
		【コア】申込手順　詳細ボタンつきフロー
-------------------------------- */
div#content_wrapper #main ol.flow#apply {/* 全体サイズ */
margin-top:20px;
margin-left:25px;
width:510px;/* 【IE対策】幅を指定しておかないと、IEで詳細ボタンの位置がずれる */
}
div#content_wrapper #main ol.flow#apply li.flow div.flow {/* 枠 */
position:relative;/* 詳細ボタンを絶対配置にするための基準とする */
}
div#content_wrapper #main ol.flow#apply .title {/* タイトル */
padding-right:70px;
}
div#content_wrapper #main ol.flow#apply .detail {/* 詳細ボタン */
position:absolute;
right:10px;
top:8px;
}
div#content_wrapper #main ol.flow#apply li.flow div.flow p {/* 説明 */
margin:0 10px;
}
/* 事業主選択-----------------*/
div#content_wrapper #main ol.flow#apply li.flow div.flow ul {
margin-left:20px;
}
div#content_wrapper #main ol.flow#apply li.flow div.flow ul li {
display:block;
width:180px;
float:left;
margin-right:10px;
margin-top:10px;
background:url(../../ca/procedure/apply/images/workertype_bg.gif) left top repeat-x;
border:#50C935 solid 1px;
padding:5px 10px;
}


/* +++++++++++++++++++++++++++++++
   よくあるご質問ページ
			（サービスに関するよくあるご質問、利用方法に関するよくあるご質問）
+++++++++++++++++++++++++++++++ */
/* --------------------------------
   【コア】【セキュア】質問ページ
-------------------------------- */
ul.q li {
background:url(../img/q.gif) left top no-repeat;
font-weight:bold;
min-height:19px;
padding-bottom:0.5em;
padding-left:25px;
}
ul.q li a {
display:block;
padding-left:2em;
text-indent:-2em;
}
ul.q li span.q {
color:#18B534;
}

/* --------------------------------
   【コア】回答ページ
-------------------------------- */
dl.q dt {
background:url(../img/q.gif) left top no-repeat;
min-height:19px;
padding-bottom:5px;
padding-left:50px;
text-indent:-25px;
border-bottom:#CCCCCC dashed 1px;
font-weight:bold;
margin-bottom:5px;
margin-top:20px;
}
dl.q dt span.q {
color:#18B534;
}
dl.q dd {
background:url(../img/a.gif) left top no-repeat;
padding-left:25px;
padding-bottom:1em;
}

/* --------------------------------
   【セキュア】回答ページ
-------------------------------- */
/*  質問部分
-------------------------------- */
div#content_wrapper #main #secure_answer .areaA {
background:url(../img/q.gif) left top no-repeat;
padding-left:25px;
padding-bottom:1em;
border-bottom:#CCCCCC dashed 1px;
}
div#content_wrapper #main #secure_answer h2 {
background:none;
margin:0;
margin-bottom:1em;
height:100%;/*【IE対策】.areaAの背景画像が表示されないのを防ぐ */
}
div#content_wrapper #main #secure_answer h2 span {
background:none;
display:inline;
padding:0;
color:#18B534;
}
/*  回答部分
-------------------------------- */
div#content_wrapper #main #secure_answer .areaB {
background:url(../img/a.gif) left top no-repeat;
padding-left:25px;
margin-top:1.5em;
}
div#content_wrapper #main #secure_answer .areaB h3 {
font-weight:normal;
}


/* +++++++++++++++++++++++++++++++
   各サービス　お知らせページ
			（各サービストップページ下のではなく、お知らせフォルダ内ページ）
+++++++++++++++++++++++++++++++ */

/* お知らせ　年度メニュー
-------------------------------- */
/* common.cssにて設定 */

/* お知らせ1件ごとの囲み
-------------------------------- */
div#content_wrapper div#main div.news div.contents {
margin-top:20px;
border:#CCCCCC solid 1px;
padding:10px;
}
/* タイトル -------------------------------- */
div#content_wrapper div#main div.news h2 {/* タイトルの下に内容が続く場合 */
background:none;/* リセット */
margin:0;/* リセット */
padding:0;/* リセット */
font-size:100%;/* 12px相当 */
border-bottom:#cccccc dashed 1px;
margin-bottom:12px;
padding-bottom:5px;
padding-left:10em;/* 日付部分を避けて折り返す */
text-indent:-10em;/* 日付部分を避けて折り返す */
}
div#content_wrapper div#main div.news h2.title {/* タイトルのみの場合 */
border-bottom:none;
margin-bottom:0;
padding-bottom:0;
}
div#content_wrapper div#main div.news h2 span {/* div#content_wrapper div#main h2 span の設定リセット*/
display:inline;
background:none;
padding:0;
}



/* ==========================
   6:個別ページ設定
   ======================= */

/* +++++++++++++++++++++++++++++++++++++++++++++
   ≪会社情報≫会社概要、沿革、取得認定
+++++++++++++++++++++++++++++++++++++++++++++ */
table.dfn th {
white-space:nowrap;
}


/* +++++++++++++++++++++++++++++++++++++++++++++
   ≪サービス情報≫用語集
+++++++++++++++++++++++++++++++++++++++++++++ */
div#content_wrapper dl.glossary dt {
border-bottom:#50C935 solid 1px;
font-weight:bold;
margin-top:1.5em;
margin-bottom:5px;
}


/* +++++++++++++++++++++++++++++++
   【コア】利用可能なシステム
+++++++++++++++++++++++++++++++ */
/* --------------------------------
   利用可能なシステム　テーブルレイアウト
-------------------------------- */
.ca_usable th {
width:25%;
}
div#content_wrapper #main h3.noSystem {
border:none;
margin:0;
padding:0;
color:#808080;
margin-top:.2em;
}


/* +++++++++++++++++++++++++++++++
   【コア】訪問設定サービス
+++++++++++++++++++++++++++++++ */
/* --------------------------------
   日本地図
-------------------------------- */
div#content_wrapper .arealist {
margin:10px 50px;
border:#CCCCCC solid 1px;
padding:5px;
}
div#content_wrapper .arealist table {
border:none;
border-collapse: separate;
border-spacing: 1px;
}
div#content_wrapper .arealist td {
border:none;
padding:2px;
text-align: center;
vertical-align:middle;
}
div#content_wrapper .arealist .hokkaido { background-color: #99FF66;}
div#content_wrapper .arealist .tohoku { background-color: #99FF66;}
div#content_wrapper .arealist .kanto { background-color: #99FFCC;}
div#content_wrapper .arealist .koshinetsu { background-color: #CCFF00;}
div#content_wrapper .arealist .hokuriku { background-color: #CCFF66;}
div#content_wrapper .arealist .tokai { background-color: #CCFFCC;}
div#content_wrapper .arealist .kinki { background-color: #CCFFFF;}
div#content_wrapper .arealist .chugoku { background-color: #FFCC33;}
div#content_wrapper .arealist .shikoku { background-color: #FFCC99;}
div#content_wrapper .arealist .kyushu { background-color: #FFCCFF;}
div#content_wrapper .arealist .okinawa { background-color: #FFCCFF;}


/* +++++++++++++++++++++++++++++++
   【コア】納期／受取方法
+++++++++++++++++++++++++++++++ */
/* --------------------------------
   カレンダー
-------------------------------- */
div#content_wrapper div#main #calendar table {
  margin-right: 20px;
  float: left;
		width:200px;
}
div#content_wrapper div#main #calendar tbody {
  background-color: #CCFFFF;
}
div#content_wrapper div#main #calendar thead th,
div#content_wrapper div#main #calendar tbody td {
  padding: 5px;
		text-align:center;
}
div#content_wrapper div#main #calendar .issue {
  text-decoration: underline;
  background-color: #99CCFF;
}
div#content_wrapper div#main #calendar .closure {
	color: #FF0000;
}
div#content_wrapper div#main #calendar .blank {
  background-color: #D9D9D9;
}
div#content_wrapper div#main #calendar #notes {
width:auto;
}


/* +++++++++++++++++++++++++++++++
   【証明書】サービス価格／内容ページ
+++++++++++++++++++++++++++++++ */

/* ご利用目的に応じた2種類の証明書
--------------------------*/
div#content_wrapper div#main div#stdca_cc th.th2 {
background-color:#f4f4f4;
color:#333333;
white-space:nowrap;
}
/* 2種類の格納タイプ
--------------------------*/
div#content_wrapper div#main div#stdca_cc h5 {
background-color:#F4F4F4;
border:#CCCCCC solid 1px;
padding:5px 7px;
font-weight:normal;
}
div#content_wrapper div#main div#stdca_cc p.browser {
border-color:#CCCCCC;
border-width:0 1px;
border-style:solid;
padding:5px 7px;
margin-bottom:0;
}
/* 媒体格納タイプ
--------------------------*/
div#content_wrapper div#main div#stdca_cc div#mediaType {
border-color:#CCCCCC;
border-width:0 1px 1px 1px;
border-style:solid;
padding:5px 7px;
}
div#content_wrapper div#main div#stdca_cc div#mediaType ul.default {
margin-left:10px;
width:530px;
}
div#content_wrapper div#main div#stdca_cc div#mediaType ul.default li {
font-weight:bold;
border: #E4E4E4 solid 1px;
list-style-position:inside;
padding-left:10px;
padding-bottom:5px;
padding-top:5px;
margin-bottom:5px;
}
div#content_wrapper div#main div#stdca_cc div#mediaType ul.default li ul li {
border:none;
margin:0;
padding:0;
}
div#content_wrapper div#main div#stdca_cc div#mediaType dl {
margin-left:15px;
width:490px;
}
div#content_wrapper div#main div#stdca_cc div#mediaType dt {
font-weight:bold;
clear:both;
}
div#content_wrapper div#main div#stdca_cc div#mediaType dd.text {
float:left;
width:320px;
}div#content_wrapper div#main div#stdca_cc div#mediaType dd.photo {
float:right;
width:150px;
text-align:center;
}
div#content_wrapper div#main div#stdca_cc div#mediaType dd.photo img {
display:block;
margin:0 auto;
}