@charset "UTF-8";

/*
==============================================================
    Cecile Common layout CSS
    Version: 21th Oct. 2014
============================================================ */

#wrap p{
	margin: 0;
	padding: 0;
}

#wrap ul,
#wrap li{
	margin: 0;
	padding: 0;
}


body.pop #wrap{
	text-align: left;
	width: 714px;
	margin: 0 auto;
	padding: 20px 0;
}

body.pop #wrap h1.title{
	width: 671px;
	margin:  0;
	text-align: left;
	font-size: 133%;
	padding: 8px 10px 5px 33px;
	min-height: 20px;
	background: url(/component/img/common/h1_bg.gif) left top no-repeat;
	border-bottom: solid 2px #54412c;
	position: relative;
}

body.pop #wrap #main{
	margin: 32px 0 0 0;
	line-height: 1.4;
}

body.pop #wrap .btn{
	margin: 35px 0;
	text-align: center;
}


/* ========================================
	共通レコメンドエリア設定
======================================== */
#rec_bnr_common_top a{
	display: inline-block;
	margin: 0 0 26px 0;
}

/* ========================================
	アドセンスエリア
======================================== */

.show-ads{
	margin: 0 0 25px 0;
	clear: both;
}


/* ========================================
	historylist：最近チェックした商品　上余白のみ指定（内容はbase.cssに記述）
======================================== */
#wrap #historylist{
	margin: 0 0 15px 0;
}

/* ========================================
	users-guide：ご利用ガイド
======================================== */
#users-guide{
	text-align: left;
	clear: both;
	width: 958px;
	margin: 0 0 15px 0;
}

#users-guide .title{
	padding: 0 0 8px 0;
	background: #7d6954 url(/component/img/common/main/title_brw_w958_bg_box_ft.gif) left bottom no-repeat;
	width: 958px;
	position: relative;
}

#users-guide .title h2{
	margin: 0;
	padding: 8px 0 3px 15px;
	background: #7d6954 url(/component/img/common/main/title_brw_w958_bg.gif) left top no-repeat;
	color: #fff;
	font-size: 116%;
}

#users-guide .box{
	padding: 12px 0 6px;
	background: url(/component/img/common/main/main_box_w958_bg.gif) left bottom no-repeat;
}


/* ========================================
	system-msg：メッセージ表示
======================================== */
#wrap .system-msg{
	background: url(/component/img/common/main/note_bg.gif);
	margin: 32px 0 0;
	padding: 2px;
	text-align: left;
}

#wrap .system-msg p{
	font-weight: bold;
	line-height: 1.4;
	font-size: 116%;
	color: #6c4723;
	border: solid 1px #dbdacb;
	margin: 0;
	padding: 8px 0 8px 10px;
}

/* ========================================
	attention：エラー表示
======================================== */
#wrap .attention{
	background: url(/component/img/common/attention_bg.gif);
	margin: 32px 0 0 0;
	padding: 2px;
	text-align: left;
}

#wrap .attention dl{
	border: solid 1px #ffbdbd;
	padding: 10px 0 8px 10px;
	margin: 0;
}

#wrap .attention dl dt{
	font-weight: bold;
	color: #f00;
	font-size: 133%;
	margin: 0 0 2px 0;
}

#wrap .attention dl dt span{
	padding: 0 0 0 21px;
	background: url(/component/img/common/icon_attention_l.png) left center no-repeat;
}

#wrap .attention dl dd{
	font-weight: bold;
	color: #f00;
	font-size: 116%;
	line-height: 1.5;
	padding: 0 0 0 21px;
	margin: 0;
}

#wrap .attention dl dd ul{
	margin: 0;
	padding: 0;
}

#wrap .attention dl dd ul li{
	margin: 0 0 0 0;
	font-weight: normal;
}

#wrap .attention p{
	line-height: 1.4;
	font-size: 116%;
	border: solid 1px #ffbdbd;
	margin: 0;
	padding: 8px 0 8px 10px;
}

#wrap .attention p a{
	display: inline-block;
	font-weight: bold;
	background: url(/component/img/common/icon_attention_l.png) 0 0.15em no-repeat;
	padding: 0 0 1px 21px;
	color: #f00;
}

#wrap .attention p span{
	display: block;
	font-weight: bold;
	background: url(/component/img/common/icon_attention_l.png) 0 0.15em no-repeat;
	padding: 0 0 0 21px;
	color: #f00;
}

#wrap p.error{
	margin: 0;
	padding: 4px 10px 3px 10px;
	background: url(/component/img/common/attention_bg.gif);
}

#wrap p.error span{
	display: inline-block;
	background: url(/component/img/common/icon_attention_s.png) 0 0.3em no-repeat;
	padding: 0 0 0 17px;
	color: #f00;
	font-weight: bold;
	margin: 0 0 2px 0;
	font-size: 100%;
	line-height: 1.5;
}

#wrap ul.error{
	margin: 0;
	padding: 4px 10px 3px 10px;
	background: url(/component/img/common/attention_bg.gif);
}

#wrap ul.error li{
	padding: 0;
	margin: 0 0 3px 0;
}

#wrap ul.error li span{
	background: url(/component/img/common/icon_attention_s.png) 0 0.15em no-repeat;
	padding: 0 0 0 17px;
	color: #f00;
	font-weight: bold;
	margin: 0 0 2px 0;
	font-size: 100%;
	line-height: 1.5;
}

/* ========================================
	campaign-box：プレゼント＆キャンペーン
======================================== */
#campaign-box{
	margin: 32px 0 2px 0;
	padding: 0 0 7px 0;
	width: 230px;
	background: url(/component/img/common/side/side_box_bg.gif) left bottom no-repeat;
}

#campaign-box h2{
	margin: 0;
}

#campaign-box ul{
	margin: 3px 5px 0;
	padding: 0;
	width: 218px;
	border: solid 1px #f1ece6;
	background: #fff;
	position: relative;
	overflow: hidden;
}

#campaign-box ul li{
	position: relative;
	margin: -1px 0 10px 0;
	padding: 11px 10px 0 100px;
	width: 108px;
	min-height: 80px;
	background: url(/component/img/common/side/border_h_dotted.gif) 2px 0 repeat-x;
	font-size: 11px;
	line-height: 1.3;
}

#campaign-box ul li a img{
	display: block;
	position: absolute;
	left: 10px;
	top: 10px;
}

/* ========================================
	mark-list：取得マーク表示
======================================== */
#wrap #mark-list{
	margin: 32px 0 0 0;
	padding: 0;
	width: 230px;
}

#wrap #mark-list:after{
	width: 0;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}

*:first-child+html #wrap #mark-list{
	display: inline-block;
}

#wrap #mark-list li{
	margin: 0;
	padding: 0;
	float: left;
}

*:first-child+html #wrap #mark-list li{
	zoom: 1;
	vertical-align: top;
	display: inline;
	float: none;
}

#wrap #mark-list li.jadma{
	padding: 19px 0 0 17px;
}

#wrap #mark-list li.ost{
	clear: both;
	padding: 12px 0 0 5px;
}

#wrap #mark-list li.privacy{
	padding: 0 0 0 10px;
}

/* ========================================
	mark-table：プライバシーマーク＆セキュアシール
======================================== */
#wrap .mark-table{
	width: 802px;
	margin: 32px 78px 24px 78px;
}

#wrap .mark-table td{
	vertical-align: top;
}

#wrap .mark-table td p{
	margin: 6px 0 0 0;
	text-align: left;
	font-size: 83%;
	line-height: 1.4;
}

#wrap .mark-table td p.link{
	font-size: 100%;
	font-weight: bold;
}

#wrap .mark-table td p.link a{
	padding: 0 0 0 9px;
	background: url(/component/img/common/icon_arrow_l.gif) 0 0.35em no-repeat;
}

#wrap .mark-table td table .mark{
	padding: 0 10px;
}

#wrap .mark-table td.privacy{
	width: 440px;
	padding: 0 30px 0 10px;
}

#wrap .mark-table td.ssl-mark{
	padding: 0 0 0 11px;
	background: url(/component/img/common/main/main_border_dotted_v.gif) left top repeat-y;
}

body#member-agrement{
	text-align: left;
}

body#privacy{
	text-align: left;
}

/* ========================================
	easy-guide：簡単ご利用ガイド 2014/3/12
======================================== */
#wrap #easy-guide{
	clear: both;
	padding: 37px 0 0;
}
#wrap #easy-guide #easy-guide-wrap{
	width: 950px;
	margin: 0 4px 25px 4px;
	text-align: left;
	color: #777;
	background: url(/component/img/common/main/guide_wrap_bg.gif) left top repeat-y;
}

#wrap #easy-guide .guide-box-wrap{
	width: 950px;
	padding: 0 0 6px;
	background: url(/component/img/common/main/guide_wrap_bg_ft.gif) left bottom no-repeat;
}

#wrap #easy-guide .guide-box{
	padding: 6px 0;
	width: 950px;
	background: url(/component/img/common/main/guide_wrap_bg_hd.gif) left top no-repeat;
}

#wrap #easy-guide h2{
	width: 881px;
	margin: 0 15px;
	font-size: 16px;
	color: #462f19;
	background: url(/component/img/common/main/guide_title_border.gif) left bottom repeat-x;
	position: relative;
	padding: 6px 5px 12px 32px;
}

#wrap #easy-guide h2 img{
	position: absolute;
	width: 14px;
	left: 5px;
	top: -9px;
}

#wrap #easy-guide .box1-wrap{
	width: 926px;
	margin: 11px 13px 0 11px;
	padding: 5px 0 0;
	background: url(/component/img/common/main/guide_box1_bg_hd.png) left top no-repeat;
}

#wrap #easy-guide .box1-wrap .box1-box{
	width: 926px;
	padding: 0 0 5px;
	background: url(/component/img/common/main/guide_box1_bg_ft.png) left bottom no-repeat;
}

#wrap #easy-guide .box1-wrap .box1-content{
	width: 926px;
	background: url(/component/img/common/main/guide_box1_bg.png) left bottom repeat-y;
}

#wrap #easy-guide .box1-wrap .box1-content:after{
	width: 0;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}

#wrap #easy-guide .box1-wrap .g01,
#wrap #easy-guide .box1-wrap .g02,
#wrap #easy-guide .box1-wrap .g03,
#wrap #easy-guide .box1-wrap .g04{
	width: 202px;
	float: left;
	margin: 0 0 0 10px;
	padding: 4px 10px 18px;
}

#wrap #easy-guide .box1-wrap .g01{
	margin: 0 0 0 4px;
}

#wrap #easy-guide .box1-wrap .g01 h3,
#wrap #easy-guide .box1-wrap .g02 h3,
#wrap #easy-guide .box1-wrap .g03 h3,
#wrap #easy-guide .box1-wrap .g04 h3{
	padding: 0 0 4px 0;
	border-bottom: solid 1px #ddd;
}

#wrap #easy-guide .box1-wrap p{
	margin: 8px 0 0;
	line-height: 1.5;
}

#wrap #easy-guide .box1-wrap p.link a{
	background: url(/component/img/common/icon_arrow_l.gif) 0 0.5em no-repeat;
	display: inline-block;
	padding: 0 0 0 9px;
}

#wrap #easy-guide .box2-wrap{
	width: 926px;
	margin: 2px 13px 0 11px;
	padding: 5px 0 0;
	background: url(/component/img/common/main/guide_box2_bg_hd.png) left top no-repeat;
}

#wrap #easy-guide .box2-wrap .box2-box{
	width: 926px;
	padding: 0 0 5px;
	background: url(/component/img/common/main/guide_box2_bg_ft.png) left bottom no-repeat;
}

#wrap #easy-guide .box2-wrap .box2-content{
	padding: 14px 14px 17px 21px;
	width: 891px;
	background: url(/component/img/common/main/guide_box2_bg.png) left bottom repeat-y;
}

#wrap #easy-guide .box2-wrap .box2-content:after{
	width: 0;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}

#wrap #easy-guide .box2-wrap .img{
	width: 149px;
	float: left;
}

#wrap #easy-guide .box2-wrap .detail{
	width: 728px;
	float: right;
}

#wrap #easy-guide .box2-wrap h3{
	padding: 0 0 10px 0;
	border-bottom: solid 1px #ddd;
}

#wrap #easy-guide .box2-wrap p{
	margin: 8px 0 0;
	line-height: 1.5;
}

/* ========================================
	14/10/21 セシール公式SNSアカウント
======================================== */
#side .sns-account{
	margin: 22px 0 0 0;
	width: 230px;
	padding: 0 0 7px 0;
	background: #fff url(/component/img/common/side/side_box_bg.gif) left bottom no-repeat;
}

#side .sns-account .title{
	background: #7d6954 url(/component/img/common/side/title_brw_w230_bg_box_ft.gif) left bottom no-repeat;
	padding: 0 0 4px 0;
	margin: 0 0 3px 0;
}

#side .sns-account .title h2{
	padding: 7px 5px 0 14px;
	background: #7d6954 url(/component/img/common/side/title_brw_w230_bg.gif) left top no-repeat;
	color: #fff;
	font-size: 116%;
	min-height: 21px;
}

#side .sns-account .box{
	padding: 10px 0 10px 10px;
	margin: 0 5px;
	border: solid 1px #f1ece6;
	background: #fff;
}

#side .sns-account .box:after{
	width: 0;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}

#side .sns-account .box ul{
	width: 85px;
	float: left;
	margin: 0;
	padding: 0;
}

#side .sns-account .box ul:after{
	width: 0;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	clear: both;
	visibility: hidden;
}

#side .sns-account .box li{
	padding: 0;
	margin: 0 0 0 5px !important;
	float: left;
}

#side .sns-account .box li:first-child{
	margin: 0 !important;
}
#side .sns-account .box p{
	width: 108px;
	float: left;
	margin: 6px 0 0 10px;
	line-height: 1.25;
}