@charset "utf-8";

/*
============================================================
gift.css
------------------------------------------------------------

■all
■ZUTTOの選べるラッピング
■メッセージカード
■サービスについて
■gridInner

作成日：2014.07.25
作成者：
更新日：
更新者：
バージョン： 1.0
会社名：Dynamite Brothers Syndicate

============================================================
*/

/* ---------------------------------------------------------
■all
--------------------------------------------------------- */
#wrapper {
	max-width: 680px; 
	min-width: 680px;
	/width: 680px;}

#contentsMainInner {
	margin-right: 0;
	padding-bottom: 100px; }
	
#contentsMainInner h3 {
	padding: 0 0 10px;
	border-bottom: 1px solid #ccc; }

#contentsMainInner h4 {
	font-size: 100%;
	font-weight: bold;
	line-height: 22px;
	margin: 10px 0 5px; }
		
#contentsMainInner h5 {
	color: #222222;
	font-size: 83%;
	font-weight: bold;
	margin: 10px 0 5px; }
	
#contentsMainInner .text {
	color: #555555;
	font-size: 83%;
	line-height: 20px; }

.border_gray {
	border-bottom: 1px dotted #ccc; }

.w11 { width: 11em; }
.w12 { width: 12em; }
.w13 { width: 13em; }
.w14 { width: 14em; }
.w15 { width: 15em; }
.w16 { width: 16em; }
.w17 { width: 17em; }
.w18 { width: 18em; }
.w19 { width: 19em; }
.w20 { width: 20em; }
.w21 { width: 21em; }
.w30 { width: 30em; }



/* ---------------------------------------------------------
■ZUTTOの選べるラッピング
--------------------------------------------------------- */
#wrappingList {
}
#wrappingList .wrappingSection {
	padding: 35px 0;
	border-bottom: 1px solid #ccc;
}
#wrappingList .border00 {
	border: 0;
}
#wrappingList .num {
	float: left;
	width: 7%;
}
#wrappingList .ttl {
	float: right;
	width: 93%;
}
#wrappingList .clear {
	clear: both;
}
#wrappingList .list li {
	margin-right: 1.3333333%;
	width: 24%;
	float: left;
}
#wrappingList .list li.last {
	margin-right: 0;
}
#wrappingList .list li span {
	display: block;
	padding-top: 8px;
	line-height: 1.3;
	text-align: center;
}
#wrappingList .fee {
	overflow: hidden;
	zoom: 1;
}
#wrappingList .fee .left {
	float: left;
	width: 50px;
}
#wrappingList .fee .right {
	float: left;
	width: 300px;
}
#wrappingList .mainImg {
	position: relative;
	overflow: hidden;
}
#wrappingList .mainImg li {
	float: left;
}
#wrappingList .mainImg .swiper-container {
  width: auto;
}
#wrappingList .prev,
#wrappingList .next {
	margin-top: -20px;
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	text-indent: -99999px;
}
#wrappingList .prev { background: url(/images/common/btn_slide_prev.jpg) no-repeat; top:50%; left:0; }
#wrappingList .next { background: url(/images/common/btn_slide_next.jpg) no-repeat; top:50%; right:0; }

#wrappingList .prev:hover,
#wrappingList .next:hover {
	background-position: 0 -60px;
}
#wrappingList .btnWrapping {
	overflow: hidden;
	display: block;
	width: 216px;
	height: 32px;
	text-indent: -99999px;
	background: url(/images/gift/btn_wrapping.jpg) no-repeat; }

#wrappingList .btnWrapping:hover {
	background-position: 0 -52px; }
/*
.wrapping {
	margin-bottom: 90px; }

.wrappingWrapper {
	overflow: hidden;
	padding: 50px 0 35px;
	border-bottom: 1px solid #ccc;
	zoom: 1; }

.wrappingWrapper .left {
	float: left;
	width: 58%;
	padding-right: 20px; }

.wrappingWrapper .right {
	float: right;
	width: 37.9%; }

.wrappingWrapper .ttl .text10 {
	color: #222; }

.itemInfo {
	clear: both;
	overflow: hidden;
	margin-top: 10px;
	zoom: 1; }
	
	
#contentsMainInner .itemInfo h4 {
	font-size: 88%;
	line-height: 16px;
	margin: 10px 0 5px; }


.itemInfo ul {
	overflow: hidden;
	margin-right: -8px;
	zoom: 1; }

.itemInfo ul li {
	float: left;
	width: 23.5%;
	margin-right: 10px; }

.itemInfo ul li a {
	color: #555; }

.itemInfo ul li img {
	margin-bottom: 10px; }

.wrappingWrapper .fee {
	overflow: hidden;
	zoom: 1; }

.wrappingWrapper .fee .left {
	float: left;
	width: 30px;
	padding-right: 0; }

.wrappingWrapper .fee .right {
	float: left;
	width: 300px; }

.btnWrapping {
	overflow: hidden;
	display: block;
	width: 216px;
	height: 32px;
	text-indent: -99999px;
	background: url(/images/gift/btn_wrapping.jpg) no-repeat; }

.btnWrapping:hover {
	background-position: 0 -52px; }
*/

/* ---------------------------------------------------------
■メッセージカード
--------------------------------------------------------- */
.messagecard {
	overflow: hidden;
	border: 1px solid #cb1511;
	padding:  20px;
	zoom: 1; }

.messagecard .left {
	float: left;
	width: 290px;
	margin-right: -310px; }

.messagecard .right {
	float: right;
	width: 100%; }

.messagecard .right .msgWrapper {
	margin-left: 310px; }

	
	
/* ---------------------------------------------------------
■サービスについて
--------------------------------------------------------- */
.btnWrappingIn a {
	overflow: hidden;
	display: block;
	width: 207px;
	height: 32px;
	text-indent: -99999px;
	background: url(/images/common/btn_wrapping_in.jpg) no-repeat; }
	
.btnWrappingL a {
	overflow: hidden;
	display: block;
	width: 216px;
	height: 32px;
	text-indent: -99999px;
	background: url(/images/common/btn_wrapping_l.jpg) no-repeat; }

.btnWrappingIn a:hover,
.btnWrappingL a:hover {
	background-position: left bottom; }


.rankingWrapper {
	overflow: hidden; }


/*
 *ナビ
 */
.rankingNav {
	position: relative;
	float: left;
	width: 220px;
	margin-right: -220px;
	z-index: 1; }

.rankingNav li {
	color: #555;
	font-size: 75%;
	line-height: 32px;
	cursor: pointer; }

.rankingNav li.on {
	font-weight: bold;
	background: url(/images/top/bg_ranking_nav.jpg) repeat; }

.rankingNav li:hover {
	font-weight: bold;
	background: url(/images/top/bg_ranking_nav.jpg) repeat; }


/*
 *コンテンツ
 */
#rankingitem {
	float: right;
	width: 100%; }

#rankingitemInner {
	margin-left: 290px; }

.rgridWrapper {
	position: relative; }

.rgridWrapper .gridInner li {
	width: 31.8%;
	height: 21px; }


.rgridWrapper .prev,
.rgridWrapper .next {
	margin-top: 20px; }


#rankingitem .img {
	padding-top: 20px; }

#rankingitem .img img {
	/width: 235px;
	/height: 235px; }

#rankingitemInner .rgridWrapper {
	display: none; }

#rankingitemInner .on {
	display: block; }
	
/* ---------------------------------------------------------
■gridInner
--------------------------------------------------------- */
.gridInner h3 {
	color: #222222;
	font-size: 113%;
	font-weight: bold;
	line-height: 31px;
	background: none; }


.processDescArea {
	overflow: hidden;
	zoom: 1; }
	
.processDescArea_l {
	overflow: hidden;
	zoom: 1;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #efefef; }
	
.processDescArea_ttl {
	float: left;
	width: 21px; }

.processDescAreaInner {
	float: right;
	width: 640px; }
	
.processDescArea_sub {
	overflow: hidden;
	zoom: 1; }
	
.processDescArea_sub00 {
	clear: both;
	overflow: hidden;
	zoom: 1; }

.processDescArea_sub .imgleft {
	float: left; }
	
.processDescArea_sub .descRight {
	float: right;
	width: 600px; }