@charset "utf-8";

/* -------------------------------------------------
	共通エリア CSS「common」
---------------------------------------------------- */
html {
	font-size: 100%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

body {
	margin: 0;
	padding: 0;
	color: #666666;
	font-size: 13px;
	line-height: 1.5;
	background: #C52B55;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

/* 写真 */
img.picture {
    border: 1px solid #ccc;
}

/* ==============================================
 ユーティリティ
=============================================== */
/* フロート回り込み解除
----------------------------------------------- */
.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    line-height: 0px;
    visibility: hidden;
    content: ".";
}
.clearfix {
    display: block; /* for IE8 */
}
.clear {
    clear: both;
}
p{
	word-break: break-all;
}

/* margin+padding
----------------------------------------------- */
.MT0	{margin-top: 0px !important;}
.MT5	{margin-top: 5px !important;}
.MT10	{margin-top: 10px !important;}
.MT15	{margin-top: 15px !important;}
.MT20	{margin-top: 20px !important;}
.MT25	{margin-top: 25px !important;}
.MT30	{margin-top: 30px !important;}
.MT35	{margin-top: 35px !important;}
.MT40	{margin-top: 40px !important;}
.MT45	{margin-top: 45px !important;}
.MT50	{margin-top: 50px !important;}

.MR0	{margin-right: 0px !important;}
.MR5	{margin-right: 5px !important;}
.MR10	{margin-right: 10px !important;}
.MR15	{margin-right: 15px !important;}
.MR20	{margin-right: 20px !important;}
.MR25	{margin-right: 25px !important;}
.MR30	{margin-right: 30px !important;}
.MR35	{margin-right: 35px !important;}
.MR40	{margin-right: 40px !important;}
.MR45	{margin-right: 45px !important;}
.MR50	{margin-right: 50px !important;}

.MB0	{margin-bottom: 0px !important;}
.MB5	{margin-bottom: 5px !important;}
.MB10	{margin-bottom: 10px !important;}
.MB15	{margin-bottom: 15px !important;}
.MB20	{margin-bottom: 20px !important;}
.MB25	{margin-bottom: 25px !important;}
.MB30	{margin-bottom: 30px !important;}
.MB35	{margin-bottom: 35px !important;}
.MB40	{margin-bottom: 40px !important;}
.MB45	{margin-bottom: 45px !important;}
.MB50	{margin-bottom: 50px !important;}

.ML0	{margin-left: 0px !important;}
.ML5	{margin-left: 5px !important;}
.ML10	{margin-left: 10px !important;}
.ML15	{margin-left: 15px !important;}
.ML20	{margin-left: 20px !important;}
.ML25	{margin-left: 25px !important;}
.ML30	{margin-left: 30px !important;}
.ML35	{margin-left: 35px !important;}
.ML40	{margin-left: 40px !important;}
.ML45	{margin-left: 45px !important;}
.ML50	{margin-left: 50px !important;}



.PT0	{padding-top: 0px !important;}
.PT5	{padding-top: 5px !important;}
.PT10	{padding-top: 10px !important;}
.PT15	{padding-top: 15px !important;}
.PT20	{padding-top: 20px !important;}
.PT25	{padding-top: 25px !important;}
.PT30	{padding-top: 30px !important;}
.PT35	{padding-top: 35px !important;}
.PT40	{padding-top: 40px !important;}
.PT45	{padding-top: 45px !important;}
.PT50	{padding-top: 50px !important;}

.PR0	{padding-right: 0px !important;}
.PR5	{padding-right: 5px !important;}
.PR10	{padding-right: 10px !important;}
.PR15	{padding-right: 15px !important;}
.PR20	{padding-right: 20px !important;}
.PR25	{padding-right: 25px !important;}
.PR30	{padding-right: 30px !important;}
.PR35	{padding-right: 35px !important;}
.PR40	{padding-right: 40px !important;}
.PR45	{padding-right: 45px !important;}
.PR50	{padding-right: 50px !important;}

.PB0	{padding-bottom: 0px !important;}
.PB5	{padding-bottom: 5px !important;}
.PB10	{padding-bottom: 10px !important;}
.PB15	{padding-bottom: 15px !important;}
.PB20	{padding-bottom: 20px !important;}
.PB25	{padding-bottom: 25px !important;}
.PB30	{padding-bottom: 30px !important;}
.PB35	{padding-bottom: 35px !important;}
.PB40	{padding-bottom: 40px !important;}
.PB45	{padding-bottom: 45px !important;}
.PB50	{padding-bottom: 50px !important;}

.PL0	{padding-left: 0px !important;}
.PL5	{padding-left: 5px !important;}
.PL10	{padding-left: 10px !important;}
.PL15	{padding-left: 15px !important;}
.PL20	{padding-left: 20px !important;}
.PL25	{padding-left: 25px !important;}
.PL30	{padding-left: 30px !important;}
.PL35	{padding-left: 35px !important;}
.PL40	{padding-left: 40px !important;}
.PL45	{padding-left: 45px !important;}
.PL50	{padding-left: 50px !important;}

/* リンク指定
----------------------------------------------- */
a:link,
a:visited {
	color: #AB0431;
	text-decoration: none;
}
a:focus { outline: thin dotted;}
a:link:hover,
a[href]:hover {
	color: #C01442;
	outline: 0;
	text-decoration: underline;
}
input,
input:hover { outline: 0;}

/* フォント
----------------------------------------------- */
h1,
h2,
h3,
h4,
h5 {
    font-size: 100%;
    line-height: 150%;
}
.sale_price {
    color: #BF1442;
}
.normal_price {
    font-size: 90%;
}
.point {
    color: #BF1442;
    font-weight: bold;
}
.user_name {
    font-weight: bold;
}
.recommend_level {
    color: #ecbd00;
}

.attention {
    color: #BF1442;
}
.attentionSt {
    color: #BF1442;
    font-weight: bold;
}
.st {
    font-weight: bold;
}
.mini {
    font-size: 90%;
    padding-top: 5px;
}
.mini span{
	display: block;
}

/* 行揃え
----------------------------------------------- */
.alignC {
    text-align: center;
}
.alignR {
    text-align: right;
}
.alignL {
    text-align: left;
}
.pricetd em {
    font-weight: bold;
}

/* フォーム
----------------------------------------------- */
select {
    border: 1px solid #ddd;
}
input[type='text'],
input[type='password'] {
    border: 1px solid #ddd;
    padding: 2px;
}



.colOR{
	color:#AB0431;
}
.fBold,
.fBold th,
.fBold td{
	font-weight: bold !important;
}



#wrapper {
	background: #ffffff url(../img/common/bg.png) repeat-x 0 0;
}
.ie7 #wrapper{
	min-width:1000px;
}
.ie8 #wrapper{
	min-width:1000px;
}
.ie9 #wrapper{
	min-width:1000px;
}
#container{
	padding: 0 20px;
}
#main_column{
	overflow: hidden;
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	border: 1px solid #bd234d;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: rgba(254, 178, 88, 0.35) 0px 0px 8px;
	-moz-box-shadow: rgba(254, 178, 88, 0.35) 0px 0px 8px;
	box-shadow: rgba(254, 178, 88, 0.35) 0px 0px 8px;
	background: #ffffff;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#ffffff));
	background: -webkit-linear-gradient(#ffffff, #ffffff);
	background: -moz-linear-gradient(#ffffff, #ffffff);
	background: -ms-linear-gradient(#ffffff, #ffffff);
	background: -o-linear-gradient(#ffffff, #ffffff);
	background: linear-gradient(#ffffff, #ffffff);
	-pie-background: linear-gradient(#ffffff, #ffffff);
	behavior: url(/PIE.htc);
}



/* header
---------------------------- */
#header{
	padding: 0 20px;
}
#header .logo{
	overflow: hidden;
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	padding: 25px 0;
}
#header .logo ul{
	overflow: hidden;
}
#header .logo ul li{
	width: 50%;
	float: left;
	line-height: 100%;
}
#header .logo ul li a{
	display: block;
}
#header .logo ul li a img{
	width: 100%;
	max-width: 258px;
	max-height: 66px;
}
#header .logo ul li.SBLogo{
	max-width: 340px;
	float: right;
	text-align: right;
	font-size: 28px;
	color: #bd234d;
	padding-top: 22px;
}



.ie8 #header .logo ul li a img {
	width: auto !important;
}
.ie7 .pageBack,
.ie8 .pageBack,
.ie9 .pageBack{
	display: none !important;
}



/* title
---------------------------- */
#undercolumn .Mtit{
	text-align: left;
	-webkit-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	border-bottom: 1px solid #bd234d;
	behavior: url(/PIE.htc);
}
#undercolumn .title{
	position: relative;
	display: block;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px #C79D6C;
	background: #bd234d;
}
/*
#undercolumn .title:before{
	position: absolute;
	bottom: 0;
	left: 0;
}
#undercolumn .title:after{
	position: absolute;
	bottom: 0;
	left: 0;
}
*/
#undercolumn .Mtit .bkImg{
	padding-left: 65px;
	background: #bd234d url(../img/icon/tit_ico_cart.png) no-repeat 20px center;
	margin-bottom: 1px;
	border-bottom: none;
}
p.information{
	padding: 20px;
	margin-top: 1px;
	border-top: 1px solid #bd234d;
}
#undercolumn_shopping form,
#undercolumn_customer form{
	padding: 0 20px 20px;
}
.column_step2 form{
	margin-top: 1px;
	border-top: 1px solid #bd234d;
}
.companyCtBox{
	padding: 20px;
}

/* ご利用案内
---------------------------- */
#undercolumn_guide .guideCt{
	padding: 20px;
}
#undercolumn_guide .guideCt .guideCtBox{
	padding: 20px;
	margin-top: 15px;
	border: 1px dashed #bd234d;
}
#undercolumn_guide .guideCt h3{
	font-size: 15px;
	padding-bottom: 10px;
}
.guideCt .guideCtBox p{

}
.guideCt .guideCtBox p a.privacyMark{
	float: right;
}
.guideCt .guideCtBox p img{
	margin-top: 10px !important;
	margin-bottom: 0 !important;
}
.guideCt .guideCtBox p span{
	display: block;
	padding-left: 17px;
}
.guideCt .guideCtBox p span.guiSbTit{
	font-size: 13px;
	font-weight: bold;
	padding-left: 18px;
	text-indent: -18px;
}
.guideCt .guideCtBox p span.guiSbTit:before{
	content: "○ ";
}
.guideCt .guideCtBox ul{

}
.guideCt .guideCtBox lu li{

}

/*
#titArea{
	overflow: hidden;
	-webkit-border-radius: 11px 11px 0 0;
	-moz-border-radius: 11px 11px 0 0;
	border-radius: 11px 11px 0 0;
}
#undercolumn .Mtit{
	float: left;
	width: 50%;
	height: 48px;
	text-align: center;
	-webkit-border-radius: 11px 0 0 0;
	-moz-border-radius: 11px 0 0 0;
	border-radius: 11px 0 0 0;
	border-bottom: 1px dashed #bd234d;
	background: #ffffff;
}
#undercolumn .Mtit .title{
	display: inline-block;
	padding: 12px 10px 12px 44px;
	margin-left: 15px;
	font-size: 16px;
	font-weight: bold;
	color: #AB0431;
	text-shadow: 1px 1px 1px #FF6967;
	background: url(../img/icon/tit_ico_cart.png) no-repeat left center;
}
#undercolumn .Btit{
	float: right;
	width: 50%;
	height: 48px;
	-webkit-border-radius: 0 11px 0 0;
	-moz-border-radius: 0 11px 0 0;
	border-radius: 0 11px 0 0;
	text-align: center;
	border-bottom: 1px solid #bd234d;
	background: #fef9ed url(../img/common/line01.jpg) repeat-y top left;
}
#undercolumn .Btit a{
	position: relative;
	display: inline-block;
	padding: 12px 10px 12px 44px;
	font-size: 16px;
	font-weight: bold;
	color: #AB0431;
	text-shadow: 1px 1px 1px #FF6967;
}
#undercolumn .Btit a:before{
	position: absolute;
	left: 0;
	bottom: 0;
	color: #ffffff;
	content: "> ";
	font-size: 12px;
	font-weight: bold;
	background: url(../img/icon/tit_ico_cart.png) no-repeat left center;
}
*/



.form_area{
	padding: 0 20px 20px;
}
.flow_area{
	margin: 0 0 1px;
	padding: 20px;
	text-align: center;
	-webkit-border-radius: 11px 11px 0 0;
	-moz-border-radius: 11px 11px 0 0;
	border-radius: 11px 11px 0 0;
	border-bottom: 1px solid #bd234d;
	background: #FEF9ED;
	behavior: url(/PIE.htc);
}
.flow_area img{
/*	width: 100%; */
	max-width: 640px;
	max-height: 72px;
}
.column_step5 #complete_area{
	margin-top: 1px;
	padding: 20px;
	border-top: 1px solid #bd234d;
}
.column_step5 {
	padding-bottom: 20px;
}
.shop_information{
	padding-top: 20px;
}



/* btn_area
---------------------------- */
.btnBingle ul{
	text-align: center;
}
.btnBingle li{
	float: none !important;
	width: 100% !important;
}
.btnBingle li input{

}
.btn_area ul{
	max-width: 410px;
	margin: 0 auto;
	overflow: hidden;
}
.btn_area_cart ul{
	padding-left: 18px;
	padding-right: 18px;
}
.btn_area li{
	display: inline-block;
	width: 48%;
	float: left;
	max-height: 55px;
	margin: 0 1%;
	text-align: center;
}
.btn_area ul li a,
.btn_area ul li input{
	display: inline-block;
	cursor: pointer;
	width: 100%;
	max-width: 190px;
}
.btnBingle{
	padding-top:20px;
}
.btnBingle ul li a,
.btnBingle ul li input{
	width: 52% !important;
}
.btn_area ul li a img{
	width: 100%;
	max-width: 190px;
}



/* pagetop
---------------------------- */
.pagetop{
	display: none;
	position: fixed;
	right: -25px;
	bottom: 45px;
	z-index: 100;
}

.pagetop a{
	display: inline-block;
	padding: 6px 35px 6px 10px;
	font-size: 12px;
	color: #ffffff;
	font-weight: bold;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 2px solid #ffffff;
	background: url(../img/common/bg_black.png);
	behavior: url(/PIE.htc);
}
.pagetop a:hover{
	color: #AB0431;
	border: 2px solid #bd234d;
	text-decoration: none;
	background: url(../img/common/bg_white10.png);
}



/* footer
---------------------------- */
#footer_wrap{
	position: relative;
	min-height: 220px;
	padding: 0 20px;
	margin-bottom: 30px;
	background: url(../img/common/bg_footer.png) repeat-x center bottom;
}
#footer {
	max-width: 960px;
	min-height: 220px;
	margin: 0 auto;
}
#footer .subtex{
	padding-top: 15px;
	color: #AB0431;
	font-weight: bold;
	letter-spacing: -0.06em;
}
#footer .fooLinks{
	width: 100%;
	position: absolute;
	bottom: -32px;
	left: 0;
	border-top: 1px solid #AB0431;
	border-bottom: 1px solid #AB0431;
	background: url(../img/common/f_bg.png);
}
.fooLinks ul{
	overflow: hidden;
	max-width: 960px;
	margin: 0 auto;
	border-right: 1px solid #AB0431;
}
.fooLinks ul li.kidzPhoto{
	float: left;
	display: block;
	padding: 7px 15px 5px 0;
	/*
	color: #F79DBB;
	*/
	color:#ffffff;
	font-weight: bold;
	font-size: 12px;
	border-right:none;
	border-left:none;
}
.fooLinks ul li{
	float: right;
	position: relative;
	border-left: 1px solid #AB0431;
}
.fooLinks ul li a{
	display: block;
	padding: 7px 15px 5px 15px;
	color: #fff;
	font-size: 12px;
}
.fooLinks ul li a{
	display: block;
	padding: 7px 15px 5px 15px;
	color: #fff;
	font-size: 12px;
}
.fooLinks ul li a:hover{
	color: #fff;
}
/*
.fooLinks ul li:before{
	position: absolute;
	left: 0;
	bottom: 0;
	color: #ffffff;
	content: "> ";
	font-size: 12px;
	font-weight: bold;
}
*/
#undercolumn_cart .price{
	font-weight: bold;
}



.selectGoo select{
	min-width: 67px;
	width: 100%;
	max-width: 100px;
}
.selectBtn {
	display: block;
	padding-top: 5px;
}
.selectBtn a{
	display: inline-block;
	font-size: 11px;
	color: #ffffff;
	letter-spacing: -0.05em;
	min-width: 65px;
	width: 100%;
	max-width: 100px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #AB0431;
	margin: 1px;
}
.selectBtn a:hover,
.tbCart ul li.td08 a:hover{
	color:#ffffff !important;
	background: #bd234d;
}
.tbCart ul li.td07 input{
	padding: 4px 10px;
	width: 100%;
	max-width: 129px;
	min-width: 90px;
	border: 1px solid #ddd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #efebe1;
	outline: none;
	cursor: pointer;
	/*
	background: -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	*/
}
.tbCart ul li.td08 a{
	display: block;
	padding: 5px 0;
	color: #ffffff;
	text-align: center;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #AB0431;
}
#quantity_level li{
    border: none;
    float: none;
    width: 25px;
    padding: 4px;
}
#quantity_level li a{

}
.userSelect{
	display: inline-block;
}
.trItems .td01 span:first-child{
	margin-bottom: 5px;
}
.custDelivname{
	margin-top: 30px;
}

.column_step3 .trItems{
	overflow: hidden;
}
.tbCart .td02 span{
	max-width: 100px;
	display: block;
	float: right;
	text-align: right;
	word-wrap: break-word;
}
.consClick{
	position: relative;
	overflow: hidden;
	margin: 20px auto 0;
	max-width: 380px;
	text-align: center;
}
.consClick div.attention{
	text-align: center;
	padding: 10px;
	margin-bottom: 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #BF1442;
}
.consClick span.attention{
	display: block;
	padding-left: 30px;
	padding-bottom: 10px;
}
.consClick input{
	margin: 0 10px 0 -30px;
	padding: 5px;
	min-width: 26px;
	max-width: 26px;
	height: 26px;
	width: 26px;
}
.consClick label{
	line-height: 26px;
	margin-top: -26px;
	display: block;
}
.userDataBtn ul{
	margin-top: 20px;
}
.column_step3 .tbCart ul li.td01 a{
	display: block;
	float: none !important;
}

#DesOp{

}
#DesOp .talArea{
line-height:28px;
}

.h4Box {
	text-align:left;
	margin:20px 0;
}

#DesOp h4{
	position: relative;
	behavior: url(/PIE.htc);
	display: inline-block;
	padding: 5px;
	font-size: 13px;
	line-height: 18px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	border: 3px double #fff;
	text-shadow: 1px 1px 1px #C79D6C;
	background: #bd234d;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width:180px;
	text-align:left;
	opacity:.6;
	transition:.25s;
}


#DesOp h4 span{

}
#DesOp h4:after{
	position: relative;
	display: block;
	float: right;
	color: #ffffff;
	content: "▼";
}

#DesOp h4:hover,
#DesOp h4.opanClose{
opacity:1;
}

#DesOp h4.opanClose:after{
	content: "×" !important;
	font-size: 18px;
}


#DesOp div[class^='opBtn']{
	display: none;
}
#DesOp div div{
	position: relative;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	behavior: url(/PIE.htc);
}

#DesOp div div.opTokyo{
	border: 3px double #feb258;
	background: #FFF6EC;
}

#DesOp div div.opKoshien{
	border: 3px double #bd234d;
	background: #FFE9EF;
	margin-top: 20px;
}

#DesOp div div.opTokyo ul{
	background: #feb258;
}

#DesOp div div.opKoshien ul{
	background: #bd234d;
}

#DesOp div h3{
	margin-bottom: 0;
	padding: 15px 15px 0;
}

.opTokyo h3{
	color: #ef8200;
}

.opKoshien h3{
	color: #bd234d;
}

#DesOp div.opanOpen{
	display: block;
	clear: both;
	margin-bottom: 20px;
	max-height:400px;
	overflow:scroll;
}

#DesOp div p {
	text-indent: -12px;
	padding: 15px 15px 15px 30px;
	margin: 0 !important;
	font-size: 12px;
	overflow:hidden;
}

#DesOp div[class^='opBtn'] .opTokyo p{
	color: #ef8200;
	border-bottom: 3px double #feb258;
}

#DesOp div[class^='opBtn'] .opKoshien p{
	color: #bd234d;
	border-bottom: 3px double #bd234d;
}

#DesOp  div[class^='opBtn'] div.opTokyo p:last-of-type,
#DesOp div div.opKoshien p:last-of-type{
	border-bottom: none;
}

#DesOp div[class^='opBtn']  p .opLeftImg{
	float:left;
	margin:10px 10px 0 0;
	max-width:250px;
	width:30%;
}

#DesOp div[class^='opBtn'] .opKoshien p:only-child{
	border-bottom: 3px double #bd234d;
}

#DesOp  div[class^='opBtn'] ul{
	padding: 1%;
	_padding-bottom:2%;
	*padding-bottom:2%;
}

#DesOp  div[class^='opBtn'] div ul.item2 li{
	width: 44%;
}

#DesOp  div[class^='opBtn'] div ul.item3 li{
	width: 27.33%;
}

#DesOp  div[class^='opBtn'] div ul.item4 li{
	width: 19%;
}

#DesOp  div[class^='opBtn'] div ul.item5 li{
	width: 14%;
}

#DesOp  div[class^='opBtn'] div ul.item6 li{
	width: 10.66%;
}

#DesOp div[class^='opBtn'] ul li{
	float: left;
	margin: 1%;
	padding: 2% 2% 5px;
	background: #fff;
	text-align: left;
}

#DesOp div[class^='opBtn'] ul.item6 li.wide{
width:17% !important;
}

#DesOp div[class^='opBtn'] ul li img{
	width: 100%;
	margin:0 auto 5px;
}


/* 写真選択
----------------------- */
.pageAreaR .btnBingle ul {
	clear: both;
	display: block !important;
}
.pageAreaR .btnBingle ul li{
	float: none !important;
	display: block !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: none !important;
}
.pageAreaR .btnBingle ul li input{
	position: static;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	width: 52% !important;
	height: 100%;
}
.column_keychain{
	
}
.pageAreaL{
	text-align: center;
	margin-bottom: 18px;
	*text-align: left;
}
.pageAreaL ul{
	*margin-left: 20px;
}
.pageAreaL ul li{
	
}
.pageAreaL ul li img{
	width: 100%;
	/*
	height: 100%;
	*/
	max-width: 150px !important;
	padding: 10px;
	border: 1px solid #bd234d;
}
.pageAreaR{
	
}
.pageAreaR form{
	padding: 0 20px 20px;
	text-align: center;
}
.pageAreaR ul{
	/*
	display: inline;
	*/
	overflow: hidden;
}
.pageAreaR ul li{
	position: relative;
	*float: left;
	*margin: 1%;
	*padding: 0;
	display: inline-block;
	margin: 10px;
	width: 18%;
	padding: 10px;
}
.pageAreaR ul li p{
	display: inline-block;
	margin: 10px;
	*display: block;
	*margin: 0;
}
.pageAreaR ul li input{
	position: absolute;
	*left:0;
	margin: 0;
	padding: 5px;
	width: 20px;
	height: 20px;
}
.pageAreaR ul li p img{
	width: 100%;
	/*
	height: 100%;
	*/
	max-width: 150px !important;
}
.pageAreaR .pagenumText{
	text-align: center;
	*text-align: left;
}
.mesSelect{
	*margin-left: 20px;
}


/* 使い方ガイド
---------------------------- */
.guideBox {
    max-width:880px;
    width:calc(100% - 40px);
    background:#fff;
    display:block;
    overflow:hidden;
    padding: 20px;
    margin-top: 15px;
    border: 1px dashed #feb258;
}


.guideBoxL,.guideBoxR {
    float:left;
    width:50%;
}

.guideBoxL{
    text-align:center;
    }



.guideBoxL img {
    border:1px solid #eee;
}

.guideBoxR img {
   margin-bottom:10px;
}

.guideBoxR hr {
border:none;
border-bottom:1px dotted #eee;
background:#fff;
margin:20px 0;
}

.guideBox p{
    width:100%;
    padding:20px 0;
}

.guideBox strong {
    color:#c00;
}

.btn_area_howto {
margin-top:50px;
}

.btn_area_howto ul{
	max-width: 200px;
	margin: 0 auto;
	overflow: hidden;
}

.btn_area_howto li{
	display: inline-block;
	width: 100%;
	float: left;
	max-height: 55px;
	margin: 0;
	text-align: center;
}
.btn_area_howto ul li a,
.btn_area_howto ul li input{
	display: inline-block;
	cursor: pointer;
	width: 100%;
	max-width: 190px;
}


@media (min-width: 768px){
	.tbCart{
		border-left: 1px solid #DDD;
		border-top: 1px solid #DDD;
	}
	ul.thTit {
		background: #e8e8e8;
	}
	.tbCart ul{
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	.tbCart ul li{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		padding: 8px;
		font-size: 12px;
		border-right: 1px solid #DDD;
		border-bottom: 1px solid #DDD;
	}
	.tbCart ul li.td01{
		width: 80px;
	}
	.tbCart ul li.td07{
		width: 125px;
	}
	.tbCart ul li.tr_li{
		background: #e8e8e8;
	}
}



/* ==============================================
 レスポンシブ　スマホ対応
=============================================== */
/*------------------- 768px以下の場合 ---*/
@media (max-width: 768px){
	#quantity_level li {
		border: none;
		float: left;
		width: 25px;
		padding: 4px;
	}
	#header .logo ul {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	#header .logo ul li{
		display:table-cell;
		vertical-align:middle;
		float: none;
	}
	#header .logo ul li.SBLogo {
		max-width: 100%;
		padding: 5px 0 0;
		float: none;
		font-weight: bold;
	}
	#DesOp{
		margin-left: 20px;
		margin-right: 20px;
	}
	
	div.h4Box {
	padding-bottom:20px;
	margin-bottom:0 !important;
	}
	
	#DesOp h4 {
		width:150px;
		font-size:12px;
	}
	#DesOp div[class^='opBtn'] p{
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.form_area {
		padding: 0 0 20px;
	}
	#undercolumn_cart .price{
		color: #ff0000;
	}
	.tbCart{
		border: none;
	}
	.tbCart ul{
		display: block;
		overflow: hidden;
		margin-bottom: 20px;
		padding: 0 20px 20px;
		border: none;
		border-bottom: 1px dashed #bd234d;
	}
	.tbCart ul li{
		
	}
	.tbCart ul.thTit{
		display: none;
	}
	table colgroup col{
		width: auto !important;
	}
	.tbCart ul li{
		position: relative;
		display: block;
		text-align: right;
		vertical-align: middle;
		float: right;
		padding: 5px;
		width: 63.5%;
		height: auto;
		font-size: 12px;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	.tbCart ul li.td01{
		width: 32%;
		float: left !important;
		border: none;
		padding: 0;
		text-align: center;
	}
	.tbCart ul li.td02{
		overflow: hidden;
		border-top: 1px solid #ddd;
	}
	.tbCart ul li.td01 img{
		width: 100%;
		max-width: 350px !important;
	}
	.tbCart ul li:before{
		position: absolute;
		overflow: hidden;
		color: #666666;
		display: block;
		line-height: 28px;
		/* padding-right: 8px; */
		text-align: left;
		text-indent: 5px;
		bottom: 0;
		left: 0;
		max-width: 100px;
		width: 100%;
		height: 100%;
		vertical-align: middle;
		border-right: 1px solid #ddd;
		background: #f0f0f0;
	}
	.tbCart ul li.td01:before{
	}
	.tbCart ul li.td02:before{
		content:"写真番号";
	}
	.tbCart ul li.td03:before{
		content:"商品";
	}
	.tbCart ul li.td04:before{
		content:"単価";
	}
	.tbCart ul li.td05:before{
		content:"数量";
		line-height: 42px;
	}
	.tbCart ul li.td06:before{
		content:"小計";
	}
	.tbCart ul li.td07:before{
		content:"オプション追加";
		/* line-height: 45px; */
	}
	.tbCart ul li.td08:before{
		border-right:none;
		background: #ffffff;
	}
	
	
	
	.tbCart ul.trPos,
	.tbCart ul.trTotal{
		/* display: table; */
		width: 100%;
		margin: 0;
		padding: 0;
	
		text-align: right;
}
	.tbCart ul.trPos li,
	.tbCart ul.trTotal li{
		display: table-cell;
		width: 60%;
		text-align: right;
		vertical-align: middle;
		padding: 10px;
		background: none;
		border: none;
		border-right: 1px dashed #bd234d;
	}
	.tbCart ul.trPos li,
	.tbCart ul.trTotal li{
		/* display: table-cell; */
		width: 100px;
		display: inline-block;
		text-align: right;
		float: none;
		margin-right: -1px;
		padding: 10px;
		background: none;
		/* border: none; */
		vertical-align: middle;
	}
	.tbCart ul.trPos{
		margin-top: -20px !important;
	}
	.tbCart ul li.td05 label.labelQuan{
		display: inline-block;
		border: 1px solid #fff;
		height: 25px;
		padding: 4px;
		width: 25px;
		text-align: center;
		line-height: 25px;
		position: absolute;
		right: 70px;
	}
	div#undercolumn ul#quantity_level {
		display: inline-block;
		/* height: 25px; */
	
		border: none;
		margin: 0;
		padding: 0;
}
}
/*------------------- 640px以下の場合 ---*/
@media (max-width: 640px){
	#header {
		width: auto;
		margin-bottom: 20px;
		border-bottom: 1px solid #bd234d;
	}
	.fooLinks ul li a{
		padding: 7px 10px 5px;
		color: #fff;
	}
	.kidzPhoto{
		padding: 7px 6px 5px !important;
	}
	.pagetop{
		bottom: 4px;
	}
	.pagetop a {
		border: none;
	}
	.pagetop a:hover{
		color: #ffffff !important;
		border: none;
		background: url(../img/common/bg_black.png) !important;
	}
	.companyCtBox {
		padding-bottom: 10px;
	}
	.flow_area{
		padding: 10px;
	}
	.btnBingle{
		padding-top: 10px !important;
	}
	.pagetop{ display:none !important;}
	.pageBack{
		display: block !important;
		position: fixed;
		right: 5px;
		bottom: 32px;
		z-index: 10000;
	}
	
	.pageBack a{
		display: inline-block;
		margin-bottom: 5px;
		padding: 10px;
		font-weight: bold;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		text-decoration: none;
		border: 1px solid #AB0431;
		background: rgba(255, 255, 255, 0.84);
	}
	.pageBack a:before {
		content: "▲";
	}
	.pageBack .pBottom a:before {
		content: "▼" !important;
	}
	.pageBack a:active,
	.pageBack a:hover{ 
		color: #C01442;
		outline: 0;
		text-decoration: none;
		border: 1px solid #C01442;
	}
	div#undercolumn_cart p.cartBtTx{
		margin-left: 20px !important;
		margin-right: 20px !important;
	}
	#DesOp h4{
		margin-bottom: 20px;
		float: left !important;
		margin-top: 0 !important;
	}
	#DesOp .opanOpen {
		position: relative;
		top: -10px;
		margin-bottom: 10px !important;
	}
	.consClick {
		margin-top: 10px !important;
	}
	.pageAreaR ul li {
		margin: 0!important;
		width: 32% !important;
		padding: 0 !important;
	}
	.pageAreaR .btnBingle ul li {
		width: 75% !important;
	}
	#undercolumn_company .userDataBtn ul {
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}
}
/*------------------- 480px以下の場合 ---*/
@media (max-width: 480px){
	#footer_wrap {
	  background: url(../img/common/bg_footer.png) repeat-x 490px bottom;
	}
	#undercolumn .Mtit .bkImg {
		padding-left: 55px;
		background: #bd234d url(../img/icon/tit_ico_cart.png) no-repeat 10px center;
	}
	.tbCart ul {
		/*
		margin-bottom: 10px;
		padding: 0 10px 10px;
		*/
	}
	.tbCart ul.trPos{
		margin-top: -20px !important;
	}
	.tbCart ul li.td01 {
		width: 21%;
	}
	.tbCart ul li {
		width: 73.5%;
	}
	.tbCart ul li.td07 select{
		font-size: 11px;
		letter-spacing: -0.15em;
	}
	.tbCart li select {
		font-size: 12px;
		letter-spacing: -1px;
	}
	.tbCart ul li.td07 input {
		max-width: 121px;
	}
	.tbCart ul li:before {
		max-width: 93px;
	}
#DesOp div[class^='opBtn'] ul li{
		width: 44% !important;
	}
	
#DesOp div[class^='opBtn'] ul.item6 li.wide{
width:60% !important;
}

#DesOp div[class^='opBtn'] ul.item2 li,
#DesOp div[class^='opBtn'] ul.item3 li{
		width: 94% !important;
	}

#DesOp div[class^='opBtn']  p .opLeftImg{
	float:none;
	margin:10px 10px 10px 0;
	max-width:100%;
	width:100%;
}


#DesOp h4 {
width:94%;
}
	.pageAreaR .btnBingle ul li {
		width: 65% !important;
	}
	.pageAreaR ul li {
		margin: 0!important;
		width: 45% !important;
		padding: 0 !important;
	}
}
/*------------------- 380px以下の場合 ---*/
@media (max-width: 380px){
	#header .logo ul li a {
		width: 65% !important;
		margin: 0 auto;
	}
	#container {
		position: relative;
		padding: 0 10px;
		z-index: 10;
	}
	#header {
		padding: 0;
		margin-bottom: 10px;
		border-bottom: 1px solid #bd234d;
	}
	#header .logo {
		position: relative;
		padding: 0;
		overflow: inherit;
	}
	#header .logo ul {
		overflow: initial;
		position: relative;
		display: block;
		table-layout: auto;
		width: 100%;
	}
	#header .logo ul li {
		display: block;
		width: auto;
		padding: 15px;
		text-align: center;
		float: none;
	}
	#header .logo ul li.SBLogo {
		position: absolute;
		z-index: 200;
		float: none;
		text-align: center;
		max-width: 100%;
		padding: 16px 0 10px 0;
		margin: 10px 10px 0 0;
		color: #fff;
		font-size: 20px !important;
		-webkit-border-radius: 10px 10px 0 0;
		-moz-border-radius: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;
		left: 50%;
		width: 240px;
		font-weight: bold;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: -120px !important;
		margin-right: 0 !important;
	}
	#container {
		margin: 10px 0 0 0;
	}
	#main_column {
		padding-top: 46px;
	    background: #C52B55 !important;
	}
	#undercolumn {
		background: #ffffff;
	}
	#undercolumn_cart{
		padding-top: 1px;
	}
	.form_area {
		padding: 0 0 0;
	}
	div#undercolumn_cart p {
		text-align: left;
		letter-spacing: -1px;
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}
	div#undercolumn_cart p.cartBtTx{
		margin: 10px !important;
	}
	.tbCart ul {
		margin-bottom: 10px;
		padding: 0 10px 10px;
	}
	#undercolumn .Mtit {
		text-align: center;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		background: #ffffff;
		behavior: url(/PIE.htc);
	}
	#undercolumn .Mtit:after {
		position: relative;
		top: 3px;
		content: "";
		width: 100%;
		display: block;
		height: 1px;
	}
	#undercolumn .Mtit .bkImg{
		padding-left: 55px;
		padding-right: 10px;
		margin: 0 auto;
		display: inline-block;
		background: #ffffff url(../img/icon/tit_ico_cart2.png) no-repeat 10px center;
	}
	#undercolumn .title {
		padding: 10px 70px 8px 10px;
		color: #AB0431;
		text-shadow: 1px 1px 1px #FF6967;
		background: #ffffff;
	}
	#undercolumn_company .Mtit h2.title,
	#undercolumn_guide .Mtit h2.title{
		padding-right: 10px !important;
	}
	#undercolumn_company .userDataBtn ul {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-bottom: 10px;
	}
	.flow_area {
		padding: 10px;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		border-top: 1px solid #bd234d;
		border-bottom: 1px solid #bd234d;
	}
	.tbCart ul li.td01 {
		width: auto;
		padding: 1px;
		float: none !important;
		margin-bottom: -1px;
		border: solid 1px #ddd;
	}
	.tbCart ul li {
		width: auto;
		font-size: 13px;
		float: none !important;
	}
	.tbCart ul li:before{
		line-height: 31px;
		max-width: 105px;
	
		font-size: 13px;
}
	.tbCart ul li.td01 span.attention{
		display: inline-block;
		padding: 8px;
	}
	.tbCart ul li.td08 a{
		font-weight: bold;
		padding: 5px;
		text-indent: 7px;
		letter-spacing: 5px;
	}
	/*
	.column_step3 .userSelect{
		width: 100% !important;
	}
	*/
	.userSelect {
		width: 49.09%;
		margin-bottom: 0 !important;
		display: inline-block;
	}
	
	
	
	#undercolumn_shopping form,
	#undercolumn_customer form {
		padding: 0 10px 10px;
	}
	p.information {
		padding: 10px;
	}
	div#undercolumn_shopping .pay_area {
		margin: 20px auto 0 !important;
	}
	div#undercolumn_shopping .pay_area02 {
		margin: 20px auto 20px auto !important;
	}
	.column_step3 table.tbCart, .column_step3 table.delivname, .column_step3 table.customer {
		 margin-bottom: 2px !important;
	}
	.custDelivname {
		padding-top: 10px;
	}
	.custDelivname h3{
		margin-top: 10px;
	}
	.column_step3 .btn_area,
	.column_step2 .btn_area{
		  padding: 0 0 2px;
	}
	.column_step2 .btn_area ul{
		padding: 0;
	}
	.column_step4 .payTest {
		margin-top: 0 !important;
		margin-bottom: 10px !important;
	}
/*
	.column_step5 .btnBingle{
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
*/
	.column_step5 {
		padding-bottom: 20px;
	}

	.column_step5>h2~p{
		padding:10px 20px
	}


	.btn_area {
		padding: 0 0 10px;
	}
	.btn_area ul {
		padding: 0 8px;
	}
	#undercolumn_guide .guideCt{
		padding: 10px;
	}
	#undercolumn_guide .guideCt .guideCtBox {
		padding: 10px;
		margin-top: 10px;
	}
	.guideCt .guideCtBox p img{
		margin: 2px !important;
	}
	#undercolumn .flow_area{
		display: none;
	}
	.column_step1 h2.title:after,
	.column_step2 h2.title:after,
	.column_step3 h2.title:after,
	.column_step4 h2.title:after,
	.column_step5 h2.title:after{
		position: absolute;
		top: 50%;
		right: 10px;
		padding: 0px 5px;
		margin-top: -11px;
		font-size: 14px;
		height: 22px;
		line-height: 23px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		color: #ffffff;
		text-shadow: 0px 0px 0px #ffffff;
		background: #AB0431;
	}
	.column_step1 h2.title:after{
		content: "STEP1";
	}
	.column_step2 h2.title:after{
		content: "STEP2";
	}
	.column_step3 h2.title:after{
		content: "STEP3";
	}
	.column_step4 h2.title:after{
		content: "STEP4";
	}
	.column_step5 h2.title:after{
		content: "STEP5";
	}
	
	.column_step3 .tbCart ul li.td01 {
		/*
		width: 32% !important;
		float: left !important;
		border: none;
		*/
	}
	.column_step3 .tbCart ul li.td02,
	.column_step3 .tbCart ul li.td03,
	.column_step3 .tbCart ul li.td04,
	.column_step3 .tbCart ul li.td05,
	.column_step3 .tbCart ul li.td06 {
		/*
		width: 57%;
		float: right !important;
		*/
		line-height: 20px;
		padding: 5px 10px;
	}
	.column_step3 .tbCart ul li:before {
		line-height: 32px;
		max-width: 75px !important;
	}
	.tbCart ul.trPos {
		margin-top: -10px !important;
	}
	#DesOp {
		margin-left: 10px;
		margin-right: 10px;
	}
	#DesOp h4 {
		display: block !important;
		margin-bottom: 10px !important;
		float: none !important;
	}
	#DesOp h4 span.opanClose{
		float: right;
	}
	#DesOp .opBtn.opanOpen {
		top: 0px !important;
	}
	.userDataBtn{
		padding: 0 !important;
	}
	.userDataBtn ul{
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-top: 10px !important;
	}
	.pageAreaR form{
		padding: 0!important;
	}
	.pageAreaR ul li {
		margin: 0!important;
		width: 45% !important;
		padding: 0 !important;
	}
	.pageAreaR .btnBingle ul li {
		width: 88% !important;
	}
	.pageAreaR .btnBingle ul{
		margin-bottom: 5px !important;
	}
#DesOp div[class^='opBtn'] div.opKoshien {
		margin-top: 10px;
	}
#DesOp div[class^='opBtn'] h3 {
		margin-bottom: 0;
		padding: 10px 10px 0 !important;
	}
#DesOp div[class^='opBtn'] p {
		letter-spacing: 0 !Important;
		padding: 10px 10px 10px 25px !important;
	}
}

@media screen and (max-width:799px) { 
    .guideBoxL,.guideBoxR {
        float:none;
        width:96%;
        margin:0 2% 30px;
    }
    
    .guideBoxR {
        padding:30px 0;
        border-top:2px dashed #eee;
    }
    
}

@media screen and (max-width:486px) { 
    .guideBoxL img{
width:100%;
    }
}

@media screen and (max-width:380px) { 
    .guideBoxL,.guideBoxR {
        float:none;
        width:99%;
        margin:0 .5% 30px;
    }
    
}