@charset "UTF-8";
/*
 * style.css
 *
 *  version --- 1.0
 *  updated --- 2012/09/05
 */

/* sysListItem
------------------------------------------------------------------*/
.sysListItem{}
.sysListItem .item{
	border-bottom:  1px solid #ccc;
	margin-bottom: 20px;
	padding-bottom: 20px;		
}
.sysListItem .item .photo{
	float: left;
	display: inline;
	width: 150px;
}
.sysListItem .item .photo img{
	width: 140px;
	height: auto;
	aspect-ratio: 1400 / 1000;
}
.sysListItem .item .photo a.showZoomIcon { display: inline-block; position: relative; }
.sysListItem .item .photo a.showZoomIcon::before {
	display: block; position: absolute; right: 5px; bottom: 5px; width: 26px; height: 26px;
	content: ""; background: url(/common/img/btn/btn_zoom01.png); background-size: contain;
}
.sysListItem .item .photo .imgnote{
	display: block;
	font-size: 85%;
	line-height: 1.5;
	margin-top: 5px;
}
.sysListItem .item .info{
	float: right;
	display: inline;
	width: 520px;
}
.sysListItem .item .info h4{
		font-weight: bold;
		font-size: 123.1%;
}
.sysListItem .item .info .selectopt,
.sysListItem .item .info .curtainpanel{
	margin: 0px 0px 5px 10px;
	font-size: 85%;
}
.sysListItem .item .info .packageitems{
	margin: 0px 0px 10px 10px;
	font-size: 85%;
	line-height: 1.5;
}
.sysListItem .item .info .updateItemButton,
.sysListItem .item .info .addToMyListButton,
.sysListItem .item .info .deleteItemButton{
	cursor: pointer;
}
.sysListItem .item table{
	width:100%;
	margin:0 0 0px 0;	
}
.sysListItem .item table thead th{
		font-weight: bold;
		font-size: 123.1%;
}
.sysListItem .item table thead td{

}

.sysListItem .item table th,
.sysListItem .item table td{
	padding:3px 0px;

}


.sysListItem .item table tbody th,
.sysListItem .item table tbody td{
	vertical-align: middle;
	line-height: 1.4;
}
.sysListItem .item table tbody th.price{
	width:50px;
	font-weight: bold;
	color: #666;
}
.sysListItem .item table tbody td.price{
	width:120px;	
}
.sysListItem .item table tbody td.price .tax{
	font-size:70%;
}
.sysListItem .item table tbody td.price .discountPercent{
	background-color: #802837;
	border-radius: 2px 2px 2px 2px;
	color: #FFFFFF;
	font-size: 70%;
	font-weight: bold;
	margin: 0 5px 0 0;
	padding: 2px 5px;
}
.sysListItem .item table tbody th.shipping{
	width:50px;
	font-weight: bold;
	color: #666;
}

.sysListItem .item table tbody td.shipping{
	width:120px;		
	line-height: 1.2;
}

.sysListItem .item table tbody th.quantity{
	width:50px;
	font-weight: bold;
	color: #666;
}
.sysListItem .item table tbody td.quantity{
	width:80px;	
	text-align: left !important;
}
.sysListItem .item table tbody td .iText01{
	text-align: right !important;
	width:20px;
}
.sysListItem .item table tbody td.total{
	width:90px;	
	font-weight: bold;
	text-align: right !important;
}
.sysListItem .item .supplement{
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px dotted #ccc;	
}
.sysListItem .item .supplement .text{
	float: left;
	display: inline;
	width: 400px;
}
.sysListItem .item .supplement .buttons{
	float: right;
	display: inline;
	width: 120px;	
	text-align: right;
}
.sysListItem .item .supplement .buttons a{
	display: inline-block;
}
.sysListItem .item .relatedItemButton { display: block; color: #ffffff; background-color: #842c37; width: fit-content; font-size: 100%; text-decoration: none; line-height: normal; padding: 3px 10px; margin: 0px 0px 10px 0px; }
.sysListItem .item .relatedItemButton:hover { opacity: 0.8; }
.sysListItem .item .packageitems .relatedItemButton { margin: 0px 0px 8px 0px; }

.shipToPostalCode { font-size: 103% !important; background-color: #f9f9f9 !important; }
.shipToPostalCode .title { font-size: 110%; }
.shipToPostalCode span { font-size: 80%; }
.shipToPostalCode a { cursor: pointer; }

.mmStatusOnCheckoutDiv label { color: #e08023; font-weight: bold; }
.mmStatusOnCheckoutDiv input[type=checkbox] { transform: scale(1.1); }
.mmStatusOnCheckoutDiv ul li { font-size: 80%; }

div.ctaDiv { margin: 10px 10px 0px 10px; }
div.ctaDiv .cart_grandTotal { font-size: 140%; font-weight: bold; }
div.ctaDiv .cart_grandTotal .tax { font-size: 60%; }
div.ctaDiv #cartToOrderForm2 { margin-top: 10px; }

.sysListItem .item .info div.selectopt { margin: 0px 0px 0px 10px; }
.sysListItem .item .info div.curtainpanel { margin: 0px 0px 0px 10px; }
.sysListItem .item .info div.packageitems { margin: 10px 0px 0px 0px; }
.sysListItem .item .info div.price { font-size: 130%; font-weight: bold; line-height: 1.1; margin: 10px 0px 0px 0px; }
.sysListItem .item .info div.price .tax { font-size: 60%; }
.sysListItem .item .info div.price .discountPercent {
	color: #FFFFFF; background-color: #802837; border-radius: 2px; margin: 0px 5px 0px 0px; padding: 2px 5px; font-size: 70%; font-weight: bold;
}
.sysListItem .item .info div.price .nowrap { white-space: nowrap; }
.sysListItem .item .info div.price * { vertical-align: middle; }
.sysListItem .item .info div.shipping { font-size: 80%; }
.sysListItem .item .info div.atpOrEtc { margin: 10px 0px 0px 0px; }
.sysListItem .item .info div.atpOrEtc p.atp { margin: 0px !important; padding: 0px !important; }
.sysListItem .item .info div.buttons { display: flex; justify-content: flex-end; gap: 20px; }
.sysListItem .item .info div.buttons .quantitySelect { padding: 5px; }

@keyframes loading-shimmer {
	0% { background-position: 0% 0; }
	100% { background-position: 100% 0; }
}
#furnitureDeliverySlipTypeDiv {
	&:empty {
		height: 100px;
		background: linear-gradient(120deg, #f8f8f8 0%, #dddddd 50%, #f8f8f8 100%);
		background-size: 200% 100%;
		animation: loading-shimmer 1.8s alternate infinite;
	}
	& > span {
		display: flex; flex-direction: column; gap: 15px;
		label {
			display: flex; padding: 20px 35px; border: 1px solid #842c37; border-radius: 8px; position: relative; overflow: hidden;
			&:has(input[type=radio]:checked) { background-color: #f4e9e7; }
			.left {
				width: 50%; display: flex; flex-direction: column; gap: 10px;
				input[type=radio] {
					appearance: none; -webkit-appearance: none; -moz-appearance: none;
					width: 18px; height: 18px; border-radius: 50%; border: 1px solid #842c37; background-color: #ffffff;
					display: inline-grid; place-items: center; margin: 0px 5px 0px 0px; cursor: pointer;
					&::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background-color: #842c37; transform: scale(0); }
					&:checked::after { transform: scale(1); }
				}
				.icons {
					display: flex; gap: 4px 3px; flex-wrap: wrap;
					span {
						display: inline-block; color: #e08023; background-color: #fff1dd; padding: 2px; width: 130px; border-radius: 15px; text-align: center;
						&.timedel { color: #333333; background-color: #f3f3f5; }
						img { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }
					}
				}
			}
			.right { width: 40%; display: flex; flex-direction: column; gap: 5px; }
			.vl {
				width: 10%; display: flex;
				&::after { content: ""; width: 1px; background-color: #842c37; margin: 0px auto; }
			};
			.recommend {
				position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; border: 25px solid transparent; border-top-color: #842c37; border-left-color: #842c37;
				&::after { content: "おすすめ"; position: absolute; top: -12px; left: -6px; font-size: 12px; line-height: 1; color: #ffffff; white-space: nowrap; transform: translateX(-50%) rotate(-45deg) scale(0.8); }
			}
			a { color: inherit; }
			.nowrap { white-space: nowrap; font-weight: inherit; }
		}
	}
}

.campaignApplied { color: #842c37; font-size: 85%; float: right; text-align: right; margin: 0px 15px 10px 0px; width: 90%; }

.backToShopping {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	box-sizing: border-box !important;
	width: 280px !important;
	height: 46px !important;
	margin: 0px auto !important;
	padding: 0px !important;
	color: #e08023;
	background-color: transparent;
	border: 1px solid #e08023;
	border-radius: 23px !important;
	font-size: 110%;
	font-weight: bold;
	text-decoration: none;
	position: relative;
}
.backToShopping::before { content: "＜"; position: absolute; left: 15px; }
.backToShopping:hover { color: #e08023; opacity: 0.8; }

ol.ol_indent { list-style-position: inside; }
ol.ol_indent li { padding-left: 1em; text-indent: -1em; }

/*textInfoArea01*/
.textInfoArea01{
	background: url(../../../common/img/master/border-ccc.gif) repeat-y center top;
	background-color:#f3e9e7;
	width:680px;
}
.textInfoArea01 .campaign{
	float: left;
	display: inline;
	width: 324px;
	margin:10px 0 10px 15px;
}
.textInfoArea01 .coupon{
	float: right;
	display: inline;
	width: 324px;
	margin:10px 15px 10px 0px;
}
.textInfoArea01 .coupon .inner{
	margin:0px 0 0 15px;
}



/*textInfoArea02*/
.textInfoArea02{
	background-color:#ecdfe0;
	width:680px;
	margin-bottom: 15px;
}
.textInfoArea02 .text{
	float: left;
	display: inline;
	width: 365px;
	margin:10px 0 10px 15px;
}
.textInfoArea02 .account{
	float: right;
	display: inline;
	width: 280px;
	margin:10px 15px 10px 0px;
}
.textInfoArea02 .account table{
	float: right;
	width: 100%;
}
.textInfoArea02 .account table th,
.textInfoArea02 .account table td{
	padding: 3px;
}
.textInfoArea02 .account table th{
	text-align: right;
	width: 50%;
}
.textInfoArea02 .account table td{
	text-align: right;
	width: 50%;	
}
.textInfoArea02 .account table tr.total th,
.textInfoArea02 .account table tr.total td{
	border-top: 1px solid #aaa;
	vertical-align: baseline;
}
.textInfoArea02 .account table tr.total td{
	font-size: 140%;
	font-weight: bold;
}
.textInfoArea02 .account table tr.total td .tax{
	font-size: 60%;
}

.textInfoArea02 .ifMmMesg{
	color: #842c37;
	font-size: 85%;
	float: right;
	text-align: right;
	margin: 0px 15px 10px 0px;
	width: 90%;
}

/* enquete */
.cstSrvIndent {
	margin-left: 20px;
}
.cstSrvChoice {
	white-space: nowrap;
	margin-right: 10px;
}
.choiceRadio { 
	width: 13px;
	height: 13px;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
}
.groupSquare { 
	font-size: 13px; 
	margin:0px; 
	padding: 0px; 
	vertical-align: middle;
}
.cstSrvGroupLink { 
	text-decoration: none;
}
.cstSrvGroupLink:hover { 
	text-decoration: underline;
}
.cstSrvGroupLink img { 
	width: 13px; 
	height: 13px; 
	margin: 0px; 
	padding: 0px; 
	vertical-align: middle; 
}
.cstSrvInputChoice { 
	width: 100px; 
	padding: 2px !important; 
}


/* delivery */
.sysListItem.dlv { border:4px solid #cccccc; padding: 10px; }
.sysListItem.dlv .item .info { width: 496px; }
.sysListItem.dlv td.qty { width: 50%; }
.sysListItem.dlv td.qty span { color:#666666; font-weight:bold; }
.sysListItem.dlv td.atp { width: 50%; }
.sysListItem.dlv td.atp span { color:#666666; font-weight:bold; }
.delivOptionPanel { margin-left: 20px; }
.calendarIcon { display: inline-block; margin-left: 5px; vertical-align: middle; }
.calendarDiv { width: 100%; min-height: 280px; background-color: #f0f0f0; }
.calendarTable th, .calendarTable td { width: 14% !important; paddidng: 10px 4px !important; }
.calendarTable th { text-align: center; }
.calendarTable td.no { background-color: #a0a0a0; }
.calendarTable select { font-size: inherit; }
.calendarTable span.dayNote { font-size: 80%; color: #808080; }
.ul_indent li { padding-left: 1em; text-indent: -1em; }

/* last order button */
.topOrderButton { position:relative; }
.topOrderButton input.button01 { position: absolute; top: -3px; right: 0px; }

/* mmSubscriptionRequiredTable */
.mmStatusRequiredTable,
.mmSubscriptionRequiredTable {
 width: 100%;
}
.mmStatusRequiredTable td,
.mmSubscriptionRequiredTable td {
 padding: 10px;
 outline: 5px solid #f1edeb;
 outline-width: 5px !important;
}

/* benefitDetails */
.benefitDetails { background: white; border: 1px solid white; }
.benefitDetails > summary { padding: 12px 40px 12px 16px; cursor: pointer; }
.benefitDetails > div { padding: 12px 16px; margin-top: -10px; }

.benefitDetails > summary { list-style: none; font-weight: bold; position: relative; transition: margin 150ms ease-out; }
.benefitDetails > summary::-webkit-details-marker { display: none; }
.benefitDetails > summary::before { position: absolute; right: 16px; top: 50%; width: 16px; height: 2px; background: #842c37; content: ""; }
.benefitDetails > summary::after { position: absolute; right: 16px; top: 50%; width: 16px; height: 2px; background: #842c37; content: "";
                                   transform-origin: center; transform: rotate(90deg); transition: transform 0.3s ease-out; }
.benefitDetails[open] > summary { margin-bottom: 10px; }
.benefitDetails[open] > summary::after { transform: rotate(0deg); }

/* coupon */
.couponDiv { width: fit-content; }
.couponDiv #clearCoupon2 { padding: 5px 10px; }
.couponHelp { display: inline-flex; align-items: center; justify-content: center; color: black; line-height: 1; text-decoration: none; border: 1px solid black; border-radius: 50%; cursor: pointer;  }
.couponInput { width: 120px; }
.couponInput + input[type=submit] { padding: 5px 10px; }

#stickyCheckout { position: fixed; top: calc(var(--headerHeight) + var(--extraHeaderHeight) + 30px); left: calc((100% - 950px) / 2 + 725px + 45px); box-sizing: border-box; width: 180px; background-color: rgba(248,248,248,0.9); padding: 10px 10px 15px 10px; font-size:90%; }
#stickyCheckout .textInfoArea02 { width: 100%; background-color: transparent; margin-top: 5px !important; margin-bottom: 10px !important; }
#stickyCheckout .textInfoArea02 .account { width: 100%; margin: 0px; }
#stickyCheckout .textInfoArea02 .account table th { width: 20%; }
#stickyCheckout .campaignApplied { font-size: 70%; width: 100%; margin: 0px; }
#stickyCheckout #cartToOrderForm3 { width: 100% !important; height: 32px !important; font-size: 90%; }
#stickyCheckout #amazonPayButtonContainer2,
#stickyCheckout #amazonPayButtonContainer2 #amazonPayButton2 { max-width: 100%; }

.cannotCheckOutNotice {
	color: #842c37; background-color: #ffedf0; border: 5px solid #fe3f3f;
	padding: 15px; margin: 25px 0px;
}

/* new design */
#gContainerInner.w950to1440 {
	#gMainBody {
		width: 100%;
		h1 { margin-left: 15px; }
		.contentWrap {
			.contentWrapInner {
				margin: 0px;
				#contentBox {
					display: flex; gap: 15px; margin: 0px 15px;
					#contentLeftCol {
						flex: 5 1 0;
					}
					#contentRightCol {
						flex: 2 1 0;
						min-width: 270px;
						max-width: 330px;
					}
				}
			}
		}
	}
}
#gContainer.newCartDesign {
	.shipToPostalCode { border-color: #f3f3f5; background-color: #f3f3f5 !important; }
	h2, h3 { display: none; }
	.switch {
		position: relative; display: inline-block; line-height: 1.5; padding-left: calc(2.9em + 0.3em);
		input[type=checkbox] { position: absolute; width: 0px; height: 0px; opacity: 0; }
		&::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 2.9em; height: 1.5em; background-color: #ccc; border-radius: 1.5em; }
		&::after { content: ""; position: absolute; top: 0.2em; bottom: 0.2em; left: 0.2em; width: 1.1em; height: 1.1em; background-color: #fff; border-radius: 1.1em; }
		&:has(input[type=checkbox]:checked)::before { background-color: #e67e22; }
		&:has(input[type=checkbox]:checked)::after { transform: translateX(1.4em); }
	}
	.sysListItem {
		.item {
			border: 1px solid #333333; border-radius: 16px; padding: 25px;
			.photo {
				width: 200px;
				img { width: 200px; height: auto; aspect-ratio: 1400 / 1000; }
			}
			.info {
				width: calc(100% - 200px - 20px);
			}
		}
	}
	.textInfoArea02 { width: 100%; }
	#stickyCheckout { position: sticky; left: auto; width: 100%; }
}