/**
 * ==================================================
 * Theater Re write WEB SHOP
 * 右サイドバーCSS
 *
 * ファイル：
 * assets/css/shop-banner-sidebar.css
 *
 * 【役割】
 * ・カート
 * ・PICK UP
 * ・宣伝バナー
 * ・INFORMATION
 * ・公演情報
 *
 * ==================================================
 */


/* ==================================================
 * 01. 右サイドバー全体
 * ==================================================
 */

.trw-shop-banners {
	display: grid;

	gap: 20px;
}


/* ==================================================
 * 02. カート
 * ==================================================
 */


/* ------------------------------------------
 * 02-01. カートリンク全体
 * ------------------------------------------ */

.trw-shop-cart-link {
	display: block;

	padding: 18px;

	background: #2b2b2b;

	border: 1px solid #4b4b4b;
	border-top: 3px solid #a82d35;

	color: #eeeeee !important;

	text-decoration: none;

	transition:
		background .2s ease,
		border-color .2s ease,
		transform .2s ease;
}


.trw-shop-cart-link:hover {
	background: #333333;

	border-color: #666666;
	border-top-color: #c33b45;

	transform:
		translateY(
			-1px
		);
}


/* ------------------------------------------
 * 02-02. カート上部
 * ------------------------------------------ */

.trw-shop-cart-link-head {
	display: flex;

	align-items: center;

	gap: 12px;
}


.trw-shop-cart-link-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	flex: 0 0 38px;

	background: #1d1d1d;

	border: 1px solid #4e4e4e;

	font-size: 18px;
}


.trw-shop-cart-link-head > div {
	min-width: 0;

	display: flex;

	flex-direction: column;

	gap: 2px;
}


.trw-shop-cart-link-head small {
	color: #8d8d8d !important;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: .18em;
}


.trw-shop-cart-link-head strong {
	color: #eeeeee !important;

	font-size: 14px;

	font-weight: 700;

	line-height: 1.4;
}


/* ------------------------------------------
 * 02-03. カート件数・金額
 * ------------------------------------------ */

.trw-shop-cart-link-info {
	display: flex;

	align-items: baseline;
	justify-content: space-between;

	gap: 10px;

	margin-top: 15px;

	padding-top: 13px;

	border-top: 1px solid #454545;
}


.trw-shop-cart-link-info span {
	color: #aaaaaa !important;

	font-size: 11px;

	font-weight: 500;
}


.trw-shop-cart-link-info strong {
	color: #ffffff !important;

	font-size: 15px;

	font-weight: 700;
}


/* ==================================================
 * 03. PICK UP
 * ==================================================
 */


/* ------------------------------------------
 * 03-01. PICK UP外枠
 * ------------------------------------------ */

.trw-shop-pickup-box {
	padding: 14px;

	background: #282828;

	border: 1px solid #3c78b8;

	border-radius: 6px;
}


/* ------------------------------------------
 * 03-02. PICK UP見出し
 * ------------------------------------------ */

.trw-shop-pickup-heading {
	display: flex;

	align-items: baseline;
	justify-content: space-between;

	gap: 10px;

	margin-bottom: 12px;

	padding-bottom: 9px;

	border-bottom: 1px solid #3b5f82;
}


.trw-shop-pickup-heading span {
	color: #72a7da !important;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: .18em;
}


.trw-shop-pickup-heading strong {
	color: #b9cde0 !important;

	font-size: 10px;

	font-weight: 500;
}


/* ------------------------------------------
 * 03-03. バナー設置枠
 * ------------------------------------------ */

.trw-shop-pickup-banner {
	width: 100%;

	overflow: hidden;

	background: #202020;

	border-radius: 4px;
}


/*
 * 実際に画像を入れたとき用
 */
.trw-shop-pickup-banner img {
	display: block;

	width: 100%;
	height: auto;

	border: 0;
}


/* ------------------------------------------
 * 03-04. バナー未登録時
 * ------------------------------------------ */

.trw-shop-pickup-banner-empty {
	min-height: 130px;

	padding:
		18px
		12px;

	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	border: 1px dashed #4f6f8e;

	border-radius: 4px;

	text-align: center;
}


.trw-shop-pickup-banner-empty > span {
	color: #6386a7 !important;

	font-size: 9px;

	font-weight: 700;

	letter-spacing: .18em;
}


.trw-shop-pickup-banner-empty p {
	margin:
		8px
		0
		4px;

	color: #c6d2dc !important;

	font-size: 13px;

	font-weight: 600;
}


.trw-shop-pickup-banner-empty small {
	color: #7f98ad !important;

	font-size: 9px;

	line-height: 1.6;
}


/* ==================================================
 * 04. INFORMATION
 * ==================================================
 */

.trw-shop-banner-placeholder {
	min-height: 170px;

	padding: 22px;

	display: flex;

	flex-direction: column;

	justify-content: center;

	background: #303030;

	border: 1px solid #4b4b4b;

	text-align: center;
}


/* ------------------------------------------
 * 04-01. 英字見出し
 * ------------------------------------------ */

.trw-shop-banner-placeholder span {
	color: #858585 !important;

	font-size: 9px;

	font-weight: 500;

	letter-spacing: .18em;

	line-height: 1.4;
}


/* ------------------------------------------
 * 04-02. メイン文字
 * ------------------------------------------ */

.trw-shop-banner-placeholder p {
	margin:
		10px
		0
		6px;

	color: #cfcfcf !important;

	font-size: 13px;

	font-weight: 600;

	line-height: 1.5;
}


/* ------------------------------------------
 * 04-03. 補足文字
 * ------------------------------------------ */

.trw-shop-banner-placeholder small {
	display: block;

	margin-top: 4px;

	color: #777777 !important;

	font-size: 10px;

	font-weight: 400;

	line-height: 1.6;
}


/* ==================================================
 * 05. タブレット
 * ==================================================
 */

@media (max-width: 1100px) {

	.trw-shop-banners {
		grid-column: 1 / -1;

		grid-template-columns:
			repeat(
				2,
				1fr
			);
	}


	.trw-shop-cart-link {
		grid-column: 1 / -1;
	}

}


/* ==================================================
 * 06. スマートフォン
 * ==================================================
 */

@media (max-width: 700px) {

	.trw-shop-banners {
		width: 100%;

		grid-template-columns: 1fr;
	}


	.trw-shop-cart-link {
		grid-column: auto;

		padding: 16px;
	}


	.trw-shop-cart-link-info {
		margin-top: 13px;

		padding-top: 11px;
	}


	.trw-shop-pickup-box {
		padding: 12px;
	}


	.trw-shop-pickup-banner-empty {
		min-height: 120px;
	}

}