@charset "UTF-8";

/* メイン スタイルシートの読み込み　+　Mac 版 IE5.x スタイル適応除外
------------------------------------------------------------ */
/*¥*/
@import "/css/common.css";
@import "/css/mod/contents.css";
@import "/css/mod/list.css";
/**/


/* ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
　title : サービス　インデックス
　URL : /service/index.html
　wright :  今田
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */

div#contents div#indexWrap {
}

div#contents div#indexWrap p {
margin-left:0;
color:#222;
}


/* 見出し
--------------------------------------------------------------------*/
div#contents div#indexWrap h2 {
padding:0;
margin:0 0 12px 0;
clear:both;
background:none;
}

div#contents div#indexWrap h2.if {
width:561px;
margin:0;
padding:0 0 0 25px;
background:url(/service/images/bg_h2_if.gif) no-repeat left top;
/* font-family:Hiragino Mincho Pro,"ヒラギノ明朝 Pro W6","ＭＳ Ｐ明朝",serif; */
color:#336;
border:none;
}

div#contents div#indexWrap h2.recommend{/* こんな場合にオススメ！ */
background:url(/images/common/bg_recommend_h2.gif) no-repeat left top;
color:#000;
width:526px;
height:34px;
/* margin-bottom:12px; */
margin-bottom:20px;
padding:12px 10px 0px 50px;
font-size:17px;
/* line-height:22px; */
border:none;
}




/* --------------------------------------------------------------------
　　基本サービス
----------------------------------------------------------------------- */

/* 横２列タイプ ------------------------------------------- */
div#contents div#indexWrap div.typeRow2 {
display:inline-block;
padding:0 0 12px 0;
margin:0 0 1em 0;
background:url(/service/images/bg_r2.gif) no-repeat center bottom;
width:100%;
}

div#contents div#indexWrap div.typeRow2:after{/*float clear */
content: ".";
display: block;
clear: both;
height: 0px;
font-size: 0px;
line-height: 0px;
visibility: hidden;
}


/* 左側 */
div#contents div#indexWrap div.typeRow2 div.lBox {
width:283px;
float:left;
}

/* 右側 */
div#contents div#indexWrap div.typeRow2 div.rBox {
width:283px;
float:right;
}

/* 左右共通 */
div#contents div#indexWrap div.typeRow1 h3,
div#contents div#indexWrap div.typeRow2 div h3 {
padding:0;
margin:0 0 7px 0;
}

div#contents div#indexWrap div.typeRow1 h3 a,
div#contents div#indexWrap div.typeRow2 div h3 a {
padding:0;
margin:0;
border:none;
}

div#contents div#indexWrap div.typeRow1 p,
div#contents div#indexWrap div.typeRow2 div p {
display:inline-block;
padding:0 15px;
margin:0;
color:#444;
}

div#contents div#indexWrap div.typeRow1 p:after,
div#contents div#indexWrap div.typeRow2 div p:after{/* float clear */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


div#contents div#indexWrap div.typeRow2 div p img {
margin:0 0 0.5em 1em;
border:0;
float:right;
vertical-align:top;}



/* 横１列タイプ ------------------------------------------- */
div#contents div#indexWrap div.typeRow1 {
width:586px;
padding:0 0 12px 0;
margin:0 0 1em 0;
background:url(/service/images/bg_r1.gif) no-repeat center bottom;}

div#contents div#indexWrap div.typeRow1 p img.cutImg {
margin:0 1.5em 0.5em 0;
float:left;}

div#contents div#indexWrap div.typeRow1 p a img {
margin:0 0 0 5px;}


.adviceEx {
display:inline-block;
}
/* --------------------------------------------------------------------
　　オプション
----------------------------------------------------------------------- */
div#contents div#indexWrap ul#option {
width:100%;
padding:1em 0 3em 0;
margin:0;
list-style:none;}

div#contents div#indexWrap ul#option:after{/*float clear */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
html *div#contents div#indexWrap ul#option {display:inline-block;}

div#contents div#indexWrap ul#option li {/* 3列用 */
width:170px;
padding:0 0 0 20px;
margin:0 0 1em 0;
float:left;
display:block;
background:url(/images/common/bullet_link_inside.gif) no-repeat left top;}

div#contents div#indexWrap ul#option li.row2 {/* 2列用 */
width:270px;}








/* --------------------------------------------------------------------
　　お申し込みにあたって
----------------------------------------------------------------------- */
div#applyBox {
width:540px;
padding:1em 21px 0 21px;
margin:0 auto 1em 0;
border:2px #777 solid;}
div#applyBox:after{/* float clear */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
html *div#applyBox {display:inline-block;}

div#applyBox h3 {
width:auto;
padding:0 0 0.5em 0;
margin:0 0 0.8em 0;
font-size:120%;
border-bottom:1px #aaa solid;
background:none;}


div#applyBox a.btnServerApply {
width:248px;
height:51px;
padding:0;
margin:0 0 1em 0;
text-indent:-999em;
display:block;
float:right;
background:url(/service/images/btn_server_apply.gif) no-repeat center top;}
div#applyBox a.btnServerApply:hover {
background-position:center bottom !important;}

div#applyBox ul {
width:230px;
padding:0.2em 0 0.5em 0;
margin:0;
list-style:none;
display:block;
float:left;}

div#applyBox ul li{
width:auto;
padding:0 0 0 20px;
margin:0 0 0.5em 0;
display:block;
background:url(/images/common/bullet_link_inside.gif) no-repeat left top;}







/* --------------------------------------------------------------------
　　yamada add 2008.04.01
----------------------------------------------------------------------- */

div#optionMenu {
width:540px;
padding:1em 21px 0 21px;
margin:0 auto 1em 0;
border:1px #ccc solid;
}

div#optionMenu:after{/* float clear */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

html *div#optionMenu {display:inline-block;}

div#optionMenu h3 {
width:auto;
padding:0 0 0.5em 20px;
margin:0 0 0.8em 0;
font-size:110%;
border-bottom:2px #ccc solid;
background:url(/images/common/bullet_link_inside.gif) no-repeat left top;
}

div#contents div#indexWrap div#optionMenu ul li.option {
width:auto;
padding:0 0 0.5em 20px;
margin:0 0 0.8em -20px;
font-size:110%;
font-weight:bold;
border-bottom:1px #aaa solid;
background:url(/images/common/bullet_link_inside.gif) no-repeat left top;
float:none;
}

div#contents div#indexWrap div#optionMenu ul li {/* 3列用 */
width:150px;
padding:0 0 0 20px;
margin:0 0 0.5em 0;
float:left;
display:block;
background:url(/images/common/bullet_link_inside_2nd.gif) no-repeat left top;
}

div#contents div#indexWrap div#optionMenu ul li.last {
padding:0 0 1em 20px;
}

div#contents div#indexWrap div#optionMenu ul {
height:1%;
}





/* --------------------------------------------------------------------
　　その他
----------------------------------------------------------------------- */
div#contents div#indexWrap div.adviceEx{
width:auto;
margin:0 0 3em 0;
padding:15px 15px 2px 15px;
border:1px solid #acc;
background:url(/images/common/bg_advice_ex.gif);}

#contents div.adviceEx h4 {
width:auto;
color:#505560;
padding:0 0 0 20px;
margin:0 0 10px 0;
font-size:100%;
background:url(/images/common/bg_main_contents_h4.gif) 0 1px no-repeat;}








div#contents div#indexWrap ul.btnLink{
margin:0;
padding:0;
list-style:none;

}

div#contents div#indexWrap ul.btnLink li{
background:none;
margin:0;
padding:0;
float:left;
}

div#contents div#indexWrap ul.btnLink:after {/* float clear */
content: ".";
display: block;
clear: both;
height: 0px;
font-size: 0px;
line-height: 0px;
visibility: hidden;
}

/* div#contents div#indexWrap ul.btnLink li img{
margin:0;
padding:0;
} */





/* -------------------------------------------------------------------*/

#contents div.lBox{float:left;}
#contents div.rBox {float:right;}


/*背景用　ハック*/
#contents div.column1r:after,
#contents div.column2r01:after,
#contents div.column2r02:after,
#contents div.column2r03:after,
#contents div.column3r01:after{/* float clear */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

html*#contents div.column1r,
html*#contents div.column2r01,
html*#contents div.column2r02,
html*#contents div.column2r03,
html*#contents div.column3r01 {/* hack for mac */
height:1%;}


/* ２段　インデントなし
-----------------------------------------------------------*/
#contents div.column2r01 {
width:586px;
padding:0;
margin:0 0 1em 0;
/* background:url(/images/common/2r_column01_bg.gif) no-repeat left bottom; */
}

/* add 08_0225
-----------------------------------------------------------*/
/* #contents div.column2r01Left {
background:url(/images/common/2r_column01_left_bg.gif) no-repeat left bottom;} */

#contents div.column2r01 div.lBox,
#contents div.column2r01 div.rBox {
/* width:280px; */
width:250px;
height:200px;
margin:0;
/* padding:7px 0 0 0; */
padding:11px 15px 0 15px;
/* background:url(/images/common/2r_column01_head.gif) no-repeat left top; */
background:url(/images/common/bg_link_column2.gif) repeat left top;
border:2px solid #a5d5e4;
}

#contents div.column2r01 div.lBox ul,
#contents div.column2r01 div.rBox ul {
margin:20px 0 0 0;
padding:0;
}

#contents div.column2r01 div.lBox h3,
#contents div.column2r01 div.rBox h3 {
margin:0;
padding:0;
background:none;
border:none;
}

#contents div.column2r01 div.lBox h3 a,
#contents div.column2r01 div.rBox h3 a {
margin:0;
padding:1px 0 0 30px;
color:#fff;
text-decoration:none;
}





/* ２段　インデントなし
-----------------------------------------------------------*/
#contents div.column2r02 {
width:586px;
padding:0;
margin:0 0 1em 0;
background:url(/service/images/cut_index_arrow.gif) no-repeat 50% 50%;
}

/* add 08_0225
-----------------------------------------------------------*/
/* #contents div.column2r01Left {
background:url(/images/common/2r_column01_left_bg.gif) no-repeat left bottom;} */

#contents div.column2r02 div.lBox{
width:234px;
height:240px;
margin:0;
padding:50px 15px 10px 15px;
background:url(/service/images/cut_index_before.jpg) no-repeat left top;
}

#contents div.column2r02 div.rBox {
width:234px;
height:240px;
margin:0;
padding:50px 15px 10px 15px;
color:#000;
background:url(/service/images/cut_index_after.jpg) no-repeat left top;
}

#contents div.column2r02 div.lBox ul,
#contents div.column2r02 div.rBox ul {
margin:0;
padding:0;
}

#contents div.column2r02 div.lBox h3,
#contents div.column2r02 div.rBox h3 {
margin:0 0 3px 0;
padding:0;
background:none;
color:#369;
font-size: 12px;
border:none;
}

#contents div.column2r02 div.lBox ul.end{
margin:0 0 6.4em 0;
}

#contents div.column2r02 div.rBox ul.end {
margin:0 0 12em 0;
}









