@charset "utf-8"

/* *****************************************************
 *	useful/html use css_index
 *  1.basic
 *  2.共通部分common
 *  3.topページ
 *  4.各カテゴリー汎用クラス
 *  5.旧ステップアップガイド
 * *****************************************************/

/* *****************************************************
 *  1.basic
 * *****************************************************/

/* ■（2カラムレイアウト）
---------------------------------- */

/* メインカラム */

#useful #maincolumn { 
    width  : 640px;
    margin : 16px 0 0 0;
	}

#usefula #maincolumn { 
    width  : 640px;
	margin : 16px 20px 0 0 ;
	}

#usefulb #maincolumn { 
    width  : 640px;
	margin : 16px 20px 0 0 ;
	}

#usefulc #maincolumn { 
    width  : 640px;
	margin : 16px 20px 0 0 ;
	}

*html #useful #maincolumn { 
    width  : 640px;
    margin : 5px 5px 0 0;
	}

*html #usefula #maincolumn { 
    width  : 640px;
    margin : 16px 5px 0 0;
	}

*html #usefulb #maincolumn { 
    width  : 640px;
    margin : 16px 5px 0 0;
	}

*html #usefulc #maincolumn { 
    width  : 640px;
    margin : 16px 5px 0 0;
	}





/* *****************************************************
 *  2.共通部分common
 * *****************************************************/

/* サイドメニュー */
#sideMenu_useful {
	text-align :left;
	width      :190px;
	background : #FFF url(../useful/imgs/common/useful_img05.jpg) repeat-y;
	font-size  :80%;
	text-align:justify;
}

#sideMenu_useful a { color:#0097CC; text-decoration:none;}
#sideMenu_useful a:link { color:#0097CC;}
#sideMenu_useful a:hover { text-decoration:underline;}


#sideMenu_useful h5 {
    text-indent:-9999px;
    }

/* 各カテゴリー毎設定 */
#useful #sideMenu_useful h5 a {
    display        : block;
    text-decoration: none; 
	background     : url(../useful/imgs/common/useful_img01a.jpg) no-repeat;	
	height         : 60px;
	width          : 190px;
    }

#usefula #sideMenu_useful h5 a {
    display        : block;
    text-decoration: none; 
	background     : url(../useful/imgs/common/useful_img02a.jpg) no-repeat;	
	height         : 60px;
	width          : 190px;
    }

#usefulb #sideMenu_useful h5 a {
    display        : block;
    text-decoration: none; 
	background     : url(../useful/imgs/common/useful_img03a.jpg) no-repeat;	
	height         : 60px;
	width          : 190px;
    }

#usefulc #sideMenu_useful h5 a {
    display        : block;
    text-decoration: none; 
	background     : url(../useful/imgs/common/useful_img04a.jpg) no-repeat;	
	height         : 60px;
	width          : 190px;
    }

#sideMenu_useful ul {
    list-style :none;
	line-height:130%;
	}

#sideMenu_useful ul li.title {
    padding     : 4px 10px 5px 5px;
	background  : url(../useful/imgs/common/useful_img09.gif) repeat-y left;
	margin      : 1px 5px 2px 2px;
	font-weight : bold;
	}

.squea {
	background  : url(../useful/imgs/common/useful_img08.gif) no-repeat left center;
	padding-left: 8px;
    }

#sideMenu_useful ul li.title a { color:#FFFFFF;}


#sideMenu_useful ul li {
    padding    : 4px 10px 5px 10px;
	background : url(../useful/imgs/common/useful_img10.gif) repeat-y left;
	margin     : 2px 5px 2px 1px;
	}

#sideMenu_useful ul li.bottom {
    height     : 2px;
	padding    : 0;
	margin     : 0 8px 0 2px;
	background : url(../useful/imgs/common/useful_img11.gif) repeat-x center;
	}

/* ↑サイドメニュー */


/* タブナビゲーション */
#gnavi {
	width           : 545px;
	height          : 36px;
	margin-top      : 11px;
	margin-left     : 1px;
	} 

#gnavi ul {
	width           : 545px;
	height          : 36px;
	text-indent     : -9999px;
	position        : relative;
	background      : url(../useful/imgs/common/useful_img07.jpg) 0 0;
	list-style      : none;
	}

/* カテゴリー毎の表示 */
#usefula #gnavi { margin-top: 0; } 
#usefulb #gnavi { margin-top: 0; }
#usefulc #gnavi { margin-top: 0; }

#gnavi ul.begin {background: url(../useful/imgs/common/useful_img07.jpg) 0 -36px;}
#gnavi ul.exp   {background: url(../useful/imgs/common/useful_img07.jpg) 0 -72px;}
#gnavi ul.work  {background: url(../useful/imgs/common/useful_img07.jpg) 0 -108px;}


#gnavi ul li  { float: left;}/*for IE6*/

#gnavi ul li a {
    display          : block;
	text-decoration  : none;/*for netscape*/
	position         : absolute;
	top              : 0;
	height           : 36px;
	}

#gnavi ul li.one a {
	left             : 0;
	width            : 183px;	
	}

#gnavi ul li.two a {
	left             : 183px;
	width            : 178px;
	}

#gnavi ul li.three a {
	left             : 361px;
	width            : 178px;
	z-index          : 2;
	}

#gnavi ul li.one a:hover   { background : url(../useful/imgs/common/useful_img07.jpg) 0 -36px;}
#gnavi ul li.two a:hover   { background : url(../useful/imgs/common/useful_img07.jpg) -183px -72px;}
#gnavi ul li.three a:hover { background : url(../useful/imgs/common/useful_img07.jpg) -361px -108px;}

/* ↑タブナビゲーション */

/* コンテンツ2カラム */
#pagecolumn {
    width            : 650px;
	height           : auto;
	margin-top       : 15px;
	font-size        : 100%;
	line-height      : 130%;
	text-align       : justify;
	}

#pagecolumn a         { color:#0097CC;}
#pagecolumn a:link    { color:#0097CC;}
#pagecolumn a:hover   { color:#0099CC; text-decoration:none;}

#pagecolumn img { vertical-align:bottom;}

#pagecolumn:after{
    content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
  　}

/* ページカラムヘッダー（カテゴリー毎） */

#useful #pagecolumn  {background : url(../useful/imgs/common/usefultop_img02.jpg) repeat-y top;}	
#usefula #pagecolumn {background : url(../useful/imgs/common/useful_img12.jpg) repeat-y top;}
#usefulb #pagecolumn {background : url(../useful/imgs/common/useful_img13.jpg) repeat-y top;}
#usefulc #pagecolumn {background : url(../useful/imgs/common/useful_img14.jpg) repeat-y top;}

/* ↑コンテンツ2カラム */

/* ページカラムフッター */
#pagecolumnfooter {

	}

#pagecolumnfooter ol {
    margin          : 40px 0 0 20px;
	width           : 610px;
	list-style      : none;
	color           : #0097CC;
	padding         : 10px 0 15px 0;
	background      : url(../useful/imgs/common/usefultop_img07.gif) repeat-x top;
	text-align      : center;
	font-size       : 80%;
	}

#pagecolumnfooter ol li {
    margin      : 20px 17px 20px 0;
	display     : inline;
	}
/* ↑ ページカラムフッター */

/* *****************************************************
 *  3.topページカテゴリー
 * *****************************************************/

#useful #pagecolumn h2 { margin-top:10px;}
#useful #pagecolumn h3 { margin :5px 0 0 15px;}

#useful #pagecolumn dl {
    background      : url(../useful/imgs/common/usefultop_img07.gif) repeat-x bottom;
	width           : 94%;
	margin          : 0 10px 0 10px;
	padding         : 7px 0 5px 0;
	font-size       : 80%
	}

#useful #pagecolumn dl dt {
	margin           : 0 0 7px 2px;
    }

#useful #pagecolumn dl dd   {
	margin           : -2.0em 0 0 48px;
	padding-left     : 27px;
	}

#box01 {
	height           : auto;
	width            : 618px;
	border-right     : 1px solid #66CC00;
	border-left      : 1px solid #66CC00;
	margin           : 0 0 0 15px;
	text-align       : left;
	padding-top      : 6px;
    }

#box02 {
	height           : auto;
	width            : 618px;
	border-right     : 1px solid #fe831c;
	border-left      : 1px solid #fe831c;
	margin           : 0 0 0 15px;
	text-align       : left;
	padding-top      : 6px;
    }

#box03 {
	height           : auto;
	width            : 618px;
	border-right     : 1px solid #0181c2;
	border-left      : 1px solid #0181c2;
	margin           : 0 0 0 15px;
	text-align       : left;
	padding-top      : 6px;
    }

#bottom01 { 
    background       : url(../useful/imgs/common/usefultop_img04a.jpg) no-repeat left top;
	width            : 620px;
	height           : 6px;
	margin           : 0 auto;
	}

#bottom02 { 
    background       : url(../useful/imgs/common/usefultop_img05a.jpg) no-repeat left top;
	width            : 620px;
	height           : 6px;
	margin           : 0 auto;
	}
	
#bottom03 { 
    background       : url(../useful/imgs/common/usefultop_img06a.jpg) no-repeat left top;
	width            : 620px;
	height           : 6px;
	margin           : 0 auto;
	}
	
*html #box01,#box02,#box03,#bottom01,#bottom02,#bottom03 {
    width            : 620px;
	margin           : 0  0  0  15px ;
	}

*html #bottom01,#bottom02,#bottom03 {
    width            : 620px;

	}


/* *****************************************************
 *  4.各カテゴリー汎用クラス
 * *****************************************************/

/* coler */
.blue { color : #0097CC;}
.red  { color : #FF3300;}
.gray { color : #666;}

.margint15        { margin-top: 15px;}
.margint20        { margin-top: 20px;}
.marginb20        { margin-bottom: 20px;}
.margint15l10     { margin: 15px 0 0 10px;}
.margint15l50     { margin: 15px 0 0 50px;}
.margint15l5     { margin: 15px 0 0 5px;}
.margint15b20     { margin: 15px 0 20px 0;}
.marginl70        { margin: 10px 0 0 140px;}
.marginl50        { margin: 10px 0 0 50px;}
.marginl5        { margin-left: 5px;}
.paddingt30       { padding-top: 30px;}
.paddingt15       { padding-top: 15px;}

/* Q＆Aボックス */
#pagecolumn .qa {
    width           : 610px;
	height          : auto;
	background      : url(../useful/imgs/common/useful_img21.gif)  repeat-x bottom;
	padding-bottom  : 15px;
	margin          : 10px 0 0 15px;
	}
	
#pagecolumn .qa p,h2 {
    text-align      : center;
	margin          : 0;
	padding         : 0;
	}

/* ↑Q＆Aボックス */


/* 詳細説明 */
.info {
    width           : 620px;
	height          : auto;
	/*background      : url(../useful/imgs/common/useful_img21.gif)  repeat-x bottom;*/
	padding-bottom  : 30px;
	margin          : 30px 0 0 15px;
	}

.info2 {
    width           : 620px;
	height          : auto;
	background      : url(../useful/imgs/common/useful_img21.gif)  repeat-x bottom;
	padding-bottom  : 30px;
	margin          : 30px 0 0 15px;
	}

.honbun {
    width           : 570px;
	height          : auto;
	margin          : 20px 0 0 20px;
	font-size       : 110%;
	}

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

.honbun h4 { margin : 30px 0 0 0 }
.honbun h4.forth { margin : 15px 0 0 0 }

.honbun h5 {
	margin          : 20px 0 0 7px;
	padding-bottom  : 2px;
	border-bottom   : 1px solid #0097CC;
	color           : #0097CC;
	clear           : both;	
	}

.honbun h5.green {
	margin          : 20px 0 0 7px;
	padding-bottom  : 2px;
	border-bottom   : 1px solid #338800;
	color           : #338800;
	clear           : both;	
	}

.honbun h6 {
	margin          : 20px 0 0 7px;
	padding-bottom  : 2px;
	background      : url(../useful/imgs/common/usefultop_img07.gif)  repeat-x bottom;
	color           : #666;
	clear           : both;	
	}

.resize { font-size:90%;}

/* 詳細説明リンクボックス */
.linkbox {
    width           : 580px;
	border          : 1px solid #B10A44;
	margin          : 20px 0 0 0;
	}

.linkbox h5 {
	margin          : 7px ;
	color           : #B10A44;
	border:none;
	}

/* 詳細商品発送の流れ */
.flow {
    width           : 580px;
	height          : auto;
	margin          : 20px 0 0 20px;
	font-size       : 110%;
	position        : relative;
	}

.flow h5 {
	margin          : 0 0 0 7px;
	padding-bottom  : 2px;
	border-bottom   : 1px solid #0097CC;
	color           : #0097CC;
	clear           : both;	
	}
.flow .icon {
    position:absolute;
	top :3px;
	left:500px;}

.flow .left {
    float           : left;
	margin          : 0 20px 5px 0;	
	}



/* 詳細説明リスト表示1 */
.left {
    float           : left;
	margin          : 0 20px 20px 0;	
	}

.right {
    float           : right;
	margin          : 0 0 20px 20px;	
	}

.honbun ol {
    font-size       : 80%;
	list-style      : none;
	margin          : 0 5px 0 13px;
	}

.honbun ol li {
    font-weight	    : bold;
    color           : #0097CC;
    margin-top      : 15px;
	}

.honbun ol li ul li {
    font-weight     : normal;
	color           : #333;
	list-style      : none;
	margin-top      : 0;
	}

/* 詳細説明リスト表示2 */
.honbun ol.tokuchou { margin : 15px 0 0 0;}

.honbun ol.tokuchou li { margin : 10px 0 0 6px;}

.honbun h5.tokuchou { margin-top:40px;}

/* 詳細説明リスト表示3 */
.honbun ul {
    font-size       : 80%;
	list-style      : none;
	font-weight:bold;
	margin          : 15px 5px 12px 20px;
	}


/* 先輩店長の声 */
#voice {
	background      : url(../useful/imgs/common/useful_img23.jpg) repeat-y top;
	height          : auto;
	width           : 590px;
	margin          : 30px 0 0 30px;
	line-height     : 115%;
    }

#voice p {
	margin          : 8px 20px 0 20px ;
    }
	
#voice .left {
    float           : left;
	margin          : 0 20px 10px 0;	
	}

#voice .sumary {
    clear           : both;
	margin          : 0 5px 15px 26px;
	background      : url(../useful/imgs/common/usefultop_img07.gif) repeat-x top;
	padding-top     : 1px;
	width           : 540px;
	}

#voice .sumary p {margin: 8px 0 0 0 ;}


/* 先輩店長の声leftstyle */
#voice .summary {
    clear           : both;
	margin          : 15px 5px 15px 21px;
	padding-top     : 1px;
	width           : 540px;
	}

#voice .summary h5 {
	margin: 10px  0 0 0 ;
	padding-bottom:3px;
	color:#0097CC;
    background      : url(../useful/imgs/common/usefultop_img07.gif) repeat-x bottom;}

#voice .summary p {margin: 8px 0 0 0 ;}

/* 参考資料 */
.sankou {
    width           : 580px;
	background      : #F3F3F3;
	height          : auto;
	margin          : 30px 0 0 35px;
	padding-bottom  : 30px;
	text-align:left;
	}

.sankou h5  {
    margin          : 10px 33px  0 42px ;
	color           : #0097CC;
	}

.sankou p { padding : 0 33px ;}

.sankou .linetop {
    padding-top     : 10px;
	background      : url(../useful/imgs/common/usefultop_img07.gif) repeat-x top;
	}

.sankou .linebottom {
    padding-bottom  : 3px;
	background      : url(../useful/imgs/common/usefultop_img07.gif) repeat-x bottom;
	}

.sankou h5.mat  {
	color           : #B10A44;
	border-bottom   : 2px solid #B10A44;
	}

.annotation {
    color           : #FF3300;
	font-weight     : normal;
	}
	
.sankou ol {
    margin          : 10px 33px  0 62px ;
	font-size       : 80%;
	}

.sankou ol li {
    background      : url(../useful/imgs/common/usefultop_img07.gif) repeat-x bottom;
	margin-top      : 15px;
	}

/* 詳細説明チェックボックス */

.checkbox {
    width           : 562px;
	border          : 1px solid #FF9900;
	margin          : 10px 0 0 7px;
	padding         : 5px 0 10px 0;
	clear           : both;
	}

.checkbox h5 {
	margin          : 5px 10px 10px 10px;
	color           : #FF9900;
	padding-bottom  : 5px;
	border          : none;
	background      : url(../useful/imgs/common/usefultop_img07.gif) repeat-x bottom;
	}

.checkbox h6 {
	margin          : 5px 10px 0 13px;
	color           : #666;
	background:none;
	}

.checkbox p {
	margin          : 0;
	padding : 0px 8px 0px 5px;
	background:none;
	}

/* link集 */
.info3 {
    width           : 580px;
	height          : auto;
	margin          : 0 0 0 35px;
	}
	
.sankou h5.mat2  {
	color           : #B10A44;
	border-bottom   : 2px solid #B10A44;
	padding-top:10px;
	}

/*margin*/
.margin-t1l20 {margin : 0 0 0 25px;}
.margin-l30   {margin-left:30px;}
.margin-l10 {margin : 0 0 0 15px;}
.margin-title {margin : 10px 0 0 29px;}

/*command*/
.left          { float: left;}
.right         { float: right;}
.clear         { clear: both;}

/*coler*/
.blue          { color: #3399CC;}
.red           { color: #ff3300;}
.green         { color: #6BC606;}
.orange        { color: #ff6600;}


/* *****************************************************
 *  5.旧ステップアップガイド
 * *****************************************************/
#localnavi2 {
    height              : auto;
	width               : 580px;
	margin              : 30px 0 0 30px;
	padding             : 4px;
	background          : url(../useful/imgs/contents/column_img09.gif);
	}

*html #localnavi2 { width : 576px;}

#localnavi2 #navibox {
    height              : auto;
	width               : 100%;
	background          : #FFFFFF;
	}

#localnavi2 a {color  : #0099FF;}
#localnavi2 a:hover {
    color               : #0066FF;
	text-decoration     : none;
	}
#localnavi2 #navibox h4 { padding: 8px 0 0 8px;
	      font-size:80%;
	      font-weight:normal;
}

#localnavi2 #navibox ul {
	margin              : 5px 10px 5px 25px;
	line-height         : 130%;
	font-size           : 80%;
	color               : #0099FF; 
	}

#localnavi2 #navibox ul li { margin-top:7px;}


#column {
	height              : auto;
	width               : 650px;
	position            : relative;
    }

#column img  { vertical-align:bottom;}

#column .box {margin : 0px 35px 0 25px;}

#column p {
    font-size           : 85%;
	text-align          : justify;
	margin              : 10px 0px 5px 10px;
	}

#column h2.subtitle {
    font-size           : 100%;
	margin              : 25px 0 0 40px;
	}

#column h4 {
    font-size           : 100%;
	margin              : 10px 0px 5px 10px;
	}

.red-big         { 
    color               : #ff3300;
	font-size           : 115%;
	}
.big {font-size : 115%;}

#column h3.flag03 {
	background          : url(../useful/imgs/contents/column_img06.gif) no-repeat;
	height              : 26px;
	width               : 225px;
	margin              : 0 0 0 15px;
	padding             : 4px 0 0 23px;
	color               : #FFFFFF;
	font-size           : 100%;
    }

#column h3.flag04 {
	background          : url(../useful/imgs/contents/column_img06.gif) no-repeat;
	height              : 26px;
	width               : 225px;
	margin              : 20px 0 0 15px;
	padding             : 4px 0 0 23px;
	color               : #FFFFFF;
	font-size           : 100%;
    }

* html#column h3.flag03 {
	height              : 30px;
	width               : 248px;
    }
	
* html#column h3.flag04 {
	height              : 30px;
	width               : 248px;
    }

.columnbox-a {
	border              : 2px solid #6BC606;
	width               : 580px;
	padding             : 0 8px 8px 0;
	background:#FFFFFF;
    }

.columnbox-b {
	border              : 2px solid #3399CC;
	width               : 580px;
	padding             : 0 8px 8px 0;
	background:#FFFFFF;
    }

.columnbox-c {
	border              : 2px solid #ff3300;
	width               : 580px;
	padding             : 0 8px 8px 0;
	background:#FFFFFF;
    }

/* *****************************************************
 *  5-1
 * *****************************************************/

#tagfooter {
	height              : 30px;
	width               : 650px;
	margin              : 0;
	background          : url(../useful/imgs/contents/column_img08.jpg) no-repeat;
	position:relative;
    }


/* *****************************************************
 *  5-2
 * *****************************************************/

#column .box ol {
    font-size           : 85%;
	text-align          : justify;
	margin              : 10px 0px 5px 28px;
	line-height         : 160%;
	}

#column .box ol li { margin-top: 8px; font-weight:bold; }

#column h4.consul {margin  : 25px 0px 5px 20px; }

#column h3.flag05 {
	background          : url(../useful/imgs/contents/column_img06a.gif) no-repeat;
	height              : 26px;
	width               : 308px;
	margin              : 20px 0 0 15px;
	padding             : 4px 0 0 23px;
	color               : #FFFFFF;
	font-size           : 100%;
    }
#column h3.flag06 {
	background          : url(../useful/imgs/contents/column_img06b.gif) no-repeat;
	height              : 26px;
	width               : 308px;
	margin              : 20px 0 0 15px;
	padding             : 4px 0 0 23px;
	color               : #FFFFFF;
	font-size           : 100%;
    }

.requestBox{
	margin:10px 20px 0px 20px;
	text-align:right;
}

/*20080606ネットショップの開業・運営お役立ち情報*/

#useful #contents{
	background:#FFF url(../useful/imgs/common/useful_img01.jpg) repeat-x left top;
	width:870px;
}

#usefula #contents{
	background:#FFF url(../useful/imgs/common/useful_img02.jpg) repeat-x left top;
	width:870px;
}

#usefulb #contents{
	background:#FFF url(../useful/imgs/common/useful_img03.jpg) repeat-x left top;
	width:870px;
}
#usefulc #contents{
	background:#FFF url(../useful/imgs/common/useful_img04.jpg) repeat-x left top;
	width:870px;
}

/* ページ下部、関連リンク */
.relatedLinks {
	border: solid 1px #CCCCCC;
	padding:0px 0px 0px 15px;
	margin:20px 0px 15px 0px;
	height:auto;
	/* background:url(../img/sps_op_h3bg.jpg) repeat-x left bottom ; */
background-color:#FFFFEE;
	}

	
.relatedLinks a{
	color:#003366;
}

.relatedLinks a:hover{
	color:#003366;
}

.relatedLinks ul {
	margin:5px 0px 10px 10px;
	font-size:86%;
	list-style: none;
}

.relatedLinks ul li{
	padding:3px 0px 3px 15px;
	margin:0px 3px 0px 5px;
	background:url(../img/iconNavi_blank01.gif) left no-repeat;
	list-style: none;
}


.relatedLinks p{
	margin:0px;
	font-size:90%;
	padding:0px 0px;
}
.relatedLinks h2{
	text-align:left;
}
/* ↑ページ下部、関連リンク */