@charset "UTF-8";
/* CSS Document */

/* =========================================================
■お買い物の流れ
========================================================= */
.res-mt-sonohoka {
	margin-top:36px;
}
/*------*/
.top-flow-area {
	margin:32px auto 0;
}

@media (max-width: 1080px) {
.top-flow-area {
	margin:32px 20px 0;
}
}

@media (max-width: 768px) {
.top-flow-area {
	margin:16px auto 0;
}
}

/*カテゴリセット*/
.top-flow-set {	
	display:flex;
	justify-content:space-between;
}

.top-flow-set.eclipse {
	margin:0 0 40px 0;
	align-items:center;
}

@media (max-width: 768px) {
.top-flow-set {	
	margin-bottom:10px;
	display:block;
}

.top-flow-set.eclipse {
	margin:0 0 20px 0;
	align-items:center;
}

}

/*カテゴリタイトルエリア*/
.top-flow-ttl-set {
	width:180px;
	text-align:center;
}

/*ログイン*/
.top-flow-ttl-set.login {
	padding-top:35px;
	/*height:208px;*/
	height:238px;
	background:url(../images/top/flow_login_bg.png) no-repeat top center;
	background-size:180px;
}
/*お買い物*/
.top-flow-ttl-set.cart {
	padding-top:76px;
	height:263px;
	/*height:320px;*/
	background:url(../images/top/flow_cart_bg.png) no-repeat top center;
	background-size:180px;
}
/*支払い*/
.top-flow-ttl-set.pay {
	padding-top:76px;
	height:291px;
	background:url(../images/top/flow_pay_bg.png) no-repeat top center;
	background-size:180px;
}
/*確認*/
.top-flow-ttl-set.check {
	padding-top:48px;
	height:207px;
	background:url(../images/top/flow_check_bg.png) no-repeat top center;
	background-size:180px;
}
/*お届け*/
.top-flow-ttl-set.deliv {
	padding-top:78px;
	height:238px;
	background:url(../images/top/flow_deliv_bg.png) no-repeat top center;
	background-size:180px;
}
/*マイページ、サービス*/
.top-flow-ttl-set.eclipse {
	padding-top:0;
	height:180px;
	background:url(../images/top/flow_ellipse_bg.png) no-repeat top center;
	background-size:180px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center
}

/**/
.top-flow-ttl-set.add {
	padding:0 0 35px;
	background:url(../images/top/flow_bg_bottom.png) no-repeat bottom center;
	background-size:180px;
}

@media (max-width: 768px) {
.top-flow-ttl-set {
	padding-top:0 !important;
	height:auto !important;
	background:none !important;
	display:flex;
	justify-content:space-between;
	width:100%;
}

/*マイページ、サービス*/
.top-flow-ttl-set.eclipse {
	padding-top:0;
	height:auto !important;
	background:none !important;
	display:flex;
	flex-direction:row;
	align-items:start;
	justify-content:space-between;
}

/**/
.top-flow-ttl-set.add {
	padding:0;
	background:none;
}

}


/*インナー*/
.top-flow-ttl-set-inner1 {
	padding-top:35px;
	background:url(../images/top/flow_bg_top.png) no-repeat top center;
	background-size:180px;
	display:flex;/*※*/
	flex-direction:column;/*※*/
}

.top-flow-ttl-set-inner1.login {
	background:url(../images/top/flow_bg_fill.png) no-repeat top center;
}

.top-flow-ttl-set-inner2 {
	background:#595959;
	flex-grow:1;/*※*/
}

/*お買い物*/
.top-flow-ttl-set-inner2.cart {
	padding-top:44px;
}

/*確認（真ん中寄せ）*/
.top-flow-ttl-set-inner2.middle {
	display:flex;
	flex-direction:column;
	justify-content:center
}

@media (max-width: 768px) {
.top-flow-ttl-set-inner1 {
	padding-top:0;
	background:none;
	background-size:none;
	display:block;/*※*/
	width:100%;
}

.top-flow-ttl-set-inner1.login {
	background:none;
}

.top-flow-ttl-set-inner2 {
	background:none;
	flex-grow:unset;/*※*/
	display:flex;
	justify-content:space-between;
}

/**/
.top-flow-ttl-set-inner2.cart {
	padding-top:0;
}

.top-flow-ttl-set-inner2.middle {
	display:flex;
	flex-direction:unset;
	justify-content:space-between;
}

}



/**/
.top-flow-ttl-set .icon img {
	width:auto;
	height:40px;
}

@media (max-width: 768px) {
.top-flow-ttl-set .icon {
	padding-top:8px;
	width:49px;
	height:58px;
	background:url(../images/top/flow_icon_bg_sp.png) no-repeat;
	background-size:contain;
}

.top-flow-ttl-set.eclipse .icon {
	padding-top:8px;
	width:49px;
	height:49px;
	background:url(../images/top/flow_ellipse_bg.png) no-repeat;
	background-size:contain;
}

.top-flow-ttl-set .icon img {
	width:65%;
	height:auto;
}
}

.top-flow-ttl-set .txt {
	margin-top:20px;
	/*font-family: YuGothic;
	font-style: normal;*/
	font-weight: bold;
	font-size: 16px;
	line-height: 156.5%;
	/* or 25px */
	text-align: center;
	
	/* white */
	color: #FFFFFF;
}

.top-flow-ttl-set .txt p i {
	display:none;
}

@media (max-width: 768px) {
.top-flow-ttl-set .txt {
	margin-top:0;
	font-size: 14px;
	line-height: 140%;
	/* identical to box height, or 20px */
	/* Gray */
	color: #595959;
	text-align:left;
	width: calc(100% - 53px);
}

.top-flow-ttl-set .txt p {
	padding-left:12px;
	padding-right:8px;
	height:48px;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.top-flow-ttl-set .txt p i {
	display:block;
}

}

/**/
.top-flow-list-set {
	width:860px;
}

@media (max-width: 1080px) {
.top-flow-list-set {
	/*width:78%;*/
	width: calc(100% - 210px);
}

}


.top-flow-list-set-inner {
	padding:16px 0;
	background:#fff;
	display:flex;
}


.top-flow-list-set-inner > div {
	padding:0 32px;
	width:50%;
	box-sizing:border-box;
}

.top-flow-list-set-inner > div.right {
	border-left: solid 2px #D7D7D7;
}


@media (max-width: 768px) {
.top-flow-list-set {
	margin-top:-10px;
	width:inherit;
	display:none;/*アコーディオン用*/
}

.top-flow-list-set-inner {
	padding:26px 0 16px;
	display:block;
}

.top-flow-list-set-inner > div {
	padding:0 16px;
	width:100%;
}

.top-flow-list-set-inner > div.right {
	border-left:none;
}

}

.top-flow-list {
}

.top-flow-list li {
	/*font-family: YuGothic;
	font-style: normal;*/
	font-weight: 500;
	font-size: 14px;
	line-height: 200%;
	/* or 28px */
	
	/* Black */
	color: #2C2C2C;
}


/* =========================================================
■オンラインストア以外のお問い合わせ
========================================================= */
.another-inq-area {
	margin:40px auto 0;
	padding:24px 0;
	background: #FFFFFF;
}

.another-inq-area-inner {
	margin:0 auto;
	display:table;
	width:720px;
}

.another-inq-list {
	/*font-family: YuGothic;
	font-style: normal;*/
	font-weight: 500;
	font-size: 14px;
	line-height: 160%;
	color: #2C2C2C;
	display:flex;
	flex-wrap:wrap;
}

.another-inq-list li {
	margin:24px 24px 0 0;
}

@media (max-width: 768px) {
.another-inq-area {
	margin:24px auto 0;
	padding:24px 0;
	background: #FFFFFF;
}

.another-inq-area-inner {
	margin:0 auto;
	padding:0 16px;
	display:block;
	width:inherit;
}

.another-inq-list {
	/*font-weight: 500;
	font-size: 14px;
	line-height: 160%;
	display:block;*/
}


}

@media (max-width: 560px) {
.another-inq-list li:not(:nth-child(1))  {
	margin:16px 0 0 0;
}	

.another-inq-list li:first-child {
}

}