@charset "utf-8";
/* CSS Document */
/*　このファイルは、サイト全体で使うレイアウトや書式を指定しています。　*/
/*　このファイルを変更すると、レイアウトが崩れる場合があります。ご注意下さい。　*/

/* ■■■■■■■■■■■■■　基本　■■■■■■■■■■■■■ */

/*　すべてのマージンと余白をなしにする　*/

*{
margin:0;
padding:0;
}

/*--------------------　body　--------------------*/

/*　サイト全体の背景、文字の色とサイズ　*/

body{
background-image: url(../img-fix/bg.jpg);
background-repeat: repeat-x;
height:100%;
padding: 0px;
margin:0px auto;
font-size: 13px;
color: #333333;
}

/* サイト全体のリンク色 */

body a:link {
color:#006AEC;
text-decoration:underline;
}

body a:visited {
color:#006AEC;
text-decoration: underline;
}

/* ■■■■■■■■■■■■■　外枠　■■■■■■■■■■■■■ */

/*　外枠の幅と背景色、ボーダー色　*/

div#outline{
background-color: #FFFFFF;
text-align: left;
width: 758px;
border: 1px solid #666666;
margin-right: auto;
margin-left: auto;
height: 100%;
min-height: 100%;
}

/*　外枠よりもbodyのほうが大きい（削除不可）　*/

body > #outline {
height: auto;
}

/*　記事（左側）と右メニューの外周に余白を作る　*/

#contents {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
}


/* ■■■■■■■■■■■■■　ヘッダー　■■■■■■■■■■■■■ */


/* ヘッダー：サイトタイトル */

h1 {
font-size: 11px;
font-weight: normal;
color: #666666;
padding: 10px;
}

/*　ヘッダー：サイトマップなどの位置　*/

#head-right {
float: right;
padding-top: 35px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

/* ■■■■■■■■■■■■■　上部メニュー　■■■■■■■■■■■■■ */

/*　メニューをリストで表示　*/

ul.menu { list-style:none; }

/*　各メニューを左寄せ、リストのマークをつけない、マージンなし　*/

ul.menu li {
list-style:none;
float:left;
margin: 0px;
}

/*　各メニューの文字を画面上に表示させない　*/

.menu a {
text-indent:-500px;
overflow:hidden;
display:block;
}

/*--------------------　HOMEメニュー　--------------------*/

/*　通常　*/

a.home {
width:81px;
height:50px;
background-image:url(../img-menu/home_roll.gif);
}

/*　カーソルを合わせた時に、背景画像をずらす　*/

a:hover.home { background-position:0px -50px; }

/*--------------------　はじめよう！在宅ワーク　--------------------*/

/*　ディレクトリ/soho/内のときは、ロールオーバーしない。　*/

.soho_on {
width:194px;
height:25px;
background-image:url(../img-menu/soho_on.gif);
}

/*　通常　*/

a.soho {
width:194px;
height:25px;
background-image:url(../img-menu/soho_roll.gif);
}

/*　カーソルを合わせた時に、背景画像をずらす　*/

a:hover.soho { background-position:0px -25px; }

/*--------------------　在宅ワークの準備　--------------------*/

/*　ディレクトリ/ready/内のときは、ロールオーバーしない。　*/

a.ready_on {
width:136px;
height:25px;
background-image:url(../img-menu/ready_on.gif);
}

/*　通常　*/

.ready {
width:136px;
height:25px;
background-image:url(../img-menu/ready_roll.gif);
}

/*　カーソルを合わせた時に、背景画像をずらす　*/

a:hover.ready { background-position:0px -25px; }

/*--------------------　在宅ワークを探そう　--------------------*/

/*　ディレクトリ/search/内のときは、ロールオーバーしない。　*/

.search_on {
width:186px;
height:25px;
background-image:url(../img-menu/search_on.gif);
}

/*　通常　*/

a.search {
width:186px;
height:25px;
background-image:url(../img-menu/search_roll.gif);
}

/*　カーソルを合わせた時に、背景画像をずらす　*/

a:hover.search { background-position:0px -25px; }

/*--------------------　実践！在宅ワーク　--------------------*/

/*　ディレクトリ/work/内のときは、ロールオーバーしない。　*/

.work_on {
width:161px;
height:25px;
background-image:url(../img-menu/work_on.gif);
}

/*　通常　*/

a.work {
width:161px;
height:25px;
background-image:url(../img-menu/work_roll.gif);
}

/*　カーソルを合わせた時に、背景画像をずらす　*/

a:hover.work { background-position:0px -25px; }

/*--------------------　こんな時どうしたらいいの？　--------------------*/

/*　ディレクトリ/faq/内のときは、ロールオーバーしない。　*/

.faq_on {
width:194px;
height:25px;
background-image:url(../img-menu/faq_on.gif);
}

/*　通常　*/

a.faq {
width:194px;
height:25px;
background-image:url(../img-menu/faq_roll.gif);
}

/*　カーソルを合わせた時に、背景画像をずらす　*/

a:hover.faq { background-position:0px -25px; }

/*--------------------　スキルアップ　--------------------*/

/*　ディレクトリ/skill/内のときは、ロールオーバーしない。　*/

a.skill_on {
width:136px;
height:25px;
background-image:url(../img-menu/skill_on.gif);
}

/*　通常　*/

a.skill {
width:136px;
height:25px;
background-image:url(../img-menu/skill_roll.gif);
}

/*　カーソルを合わせた時に、背景画像をずらす　*/

a:hover.skill { background-position:0px -25px; }

/*--------------------　おすすめSOHOアイテム　--------------------*/

/*　ディレクトリ/shopping/内のときは、ロールオーバーしない。　*/

a.shopping_on {
width:186px;
height:25px;
background-image:url(../img-menu/shopping_on.gif);
}

/*　通常　*/

a.shopping {
width:186px;
height:25px;
background-image:url(../img-menu/shopping_roll.gif);
}

/*　カーソルを合わせた時に、背景画像をずらす　*/

a:hover.shopping { background-position:0px -25px; }

/* ■■■■■■■■■■■■■　左側の内容　■■■■■■■■■■■■■ */

/*　右メニューの左側の内容の幅　*/

#left-contents {
float: left;
width: 583px;
margin-bottom: 20px;
}

/* ■■■■■■■■■■■■■　右メニュー　■■■■■■■■■■■■■ */


/*　右メニュー：レイアウト　*/

.right-advertising {
float: right;
width: 125px;
font-size: 10px;
padding-bottom: 20px;
}

/*　右メニュー：特典の文字サイズ　*/

.right-advertising h4{
padding: 5px;
font-size: 10px;
}

/*　右メニュー：特典内容の画像の下に余白を作る　*/

.right-advertising h5{
padding-bottom: 5px;
}

/*　右メニュー：説明文　*/

.right-advertising p{
padding: 5px;
}


/* ■■■■■■■■■■■■■　ページタイトル　■■■■■■■■■■■■■*/

#h2-page_tl {
font-size: 18px;
font-weight: bold;
background-image: url(../img-fix/page-h2_bg.jpg);
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 15px;
color: #FFFFFF;
}

/* ■■■■■■■■■■■■■　青枠内（HOMEのカテゴリーリンク、関連記事）■■■■■■■■■■■■■ */

/*　青色の枠で囲む　*/

.block-blue {
border: 1px solid #5CABDA;
margin-top: 10px;
}

/* 見出し */

.block-blue h3 {
font-size: 13px;
font-weight: bold;
color: #0061A0;
background-image: url(../img-fix/block-blue_h3-bg.gif);
margin: 0px;
padding-left: 22px;
padding-top: 3px;
padding-bottom: 3px;
}

.block-blue h3 a:link {
color: #0061A0;
}

.block-blue h3 a:visited {
color: #0061A0;
}


/* ■■■■■■■■■■■■■　緑枠内（右メニューとおすすめSOHOアイテム）■■■■■■■■■■■■■ */

/*　緑色の枠で囲む　*/

.block-green {
border: 1px solid #95CC02;
margin-bottom: 10px;
}

/* 見出し３ */

.block-green h3 {
background-image: url(../img-fix/block-green_h3-bg.gif);
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 7px;
font-size: 13px;
color: #FFFFFF;
}


/* ■■■■■■■■■■■■■　これがオススメ！（SOHOアイテム）　■■■■■■■■■■■■■ */

/*----------　商品：３分割レイアウト　----------*/

/*　左から１つめ　*/

.shop-3_1 {
width: 45%;
float: left;
padding: 10px;
}

/*　左から２つめ　*/

.shop-3_2 {
width: 45%;
float: right;
padding: 10px;
}

/*　左から３つめ　*/

.shop-3_3 {
float: right;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
width: 229px;
}

/*----------　商品画像　----------*/

.shop-img {
width: 100px;
float: left;
text-align: right;
padding-bottom: 20px;
}

/*----------　商品値段　----------*/

.price {
font-weight: bold;
color: #D5026E;
margin-top: 5px;
margin-bottom: 5px;
}

/*----------　商品説明の書式　----------*/

.shop-com {
float: right;
line-height: 130%;
padding-left: 5px;
}

/*----------　商品名　----------*/

.shop-com h4 {
font-size: 14px;
font-weight: bold;
}

/*----------　「詳細はこちら」の文字　----------*/

.shop-advice {
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
}