/**
 * ==================================================
 * Theater Re write WEB SHOP
 * お客様向けショップCSS
 *
 * ファイル：
 * assets/css/shop.css
 *
 * 【役割】
 *
 * ・SHOP全体レイアウト
 * ・中央コンテンツ
 * ・パンくず
 * ・ステージギフトTOP
 * ・ステージギフト申込画面
 *
 * 【分離済み】
 *
 * 左サイドバー：
 * assets/css/shop-sidebar.css
 *
 * 右サイドバー：
 * assets/css/shop-banner-sidebar.css
 *
 * 【配色】
 *
 * SHOP背景       #242424
 * コンテンツ背景 #2d2d2d
 * カード背景     #353535
 * 線             #505050
 * 基本文字       #e8e8e8
 * 補助文字       #b8b8b8
 * アクセント赤   #a82d35
 *
 * ==================================================
 */


/* ==================================================
 * 01. SWELL調整
 * ==================================================
 */


/*
 * SHOPではSWELLトップビジュアルを非表示
 */
body .p-mainVisual {
	display: none !important;
}


/*
 * SHOPページ背景
 */
body {
	background: #242424 !important;
}


/*
 * SWELLから継承される文字色を
 * SHOP内では独自配色へ固定
 */
.trw-shop-page,
.trw-shop-page h1,
.trw-shop-page h2,
.trw-shop-page h3,
.trw-shop-page h4,
.trw-shop-page h5,
.trw-shop-page h6,
.trw-shop-page p,
.trw-shop-page span,
.trw-shop-page strong,
.trw-shop-page label,
.trw-shop-page small,
.trw-shop-page li {
	color: #e8e8e8;
}


/* ==================================================
 * 02. ショップ全体
 * ==================================================
 */

.trw-shop-page {
	background: #242424;

	color: #e8e8e8;

	padding:
		48px
		20px
		80px;
}


.trw-shop-container {
	width: min(
		1440px,
		100%
	);

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		230px
		minmax(
			0,
			1fr
		)
		250px;

	gap: 36px;

	align-items: start;
}


/* ==================================================
 * 03. 中央コンテンツ
 * ==================================================
 */

.trw-shop-main {
	min-width: 0;

	color: #e8e8e8;
}


/* ==================================================
 * 04. SHOPトップ HERO
 * ==================================================
 */

.trw-shop-hero {
	padding:
		60px
		56px;

	background: #181818;

	color: #eeeeee;
}


.trw-shop-eyebrow {
	margin:
		0
		0
		10px;

	color: #aaaaaa !important;

	font-size: 11px;

	letter-spacing: .25em;
}


.trw-shop-hero h1 {
	margin:
		0
		0
		18px;

	color: #f2f2f2 !important;

	font-size:
		clamp(
			34px,
			5vw,
			58px
		);

	font-weight: 500;

	letter-spacing: .08em;
}


.trw-shop-hero > p:last-child {
	margin: 0;

	color: #d0d0d0 !important;

	font-size: 15px;

	letter-spacing: .05em;
}


/* ==================================================
 * 05. ステージギフト紹介
 * ==================================================
 */

.trw-shop-feature {
	margin-top: 28px;

	padding: 42px;

	background: #353535;

	border: 1px solid #4d4d4d;
}


.trw-shop-feature h2 {
	margin:
		12px
		0
		0;

	color: #eeeeee !important;

	font-size: 28px;

	letter-spacing: .08em;
}


.trw-shop-feature-ja {
	margin:
		4px
		0
		0;

	color: #aaaaaa !important;

	font-size: 12px;
}


.trw-shop-feature-text {
	margin:
		28px
		0;

	color: #d5d5d5 !important;

	line-height: 1.9;
}


/* ==================================================
 * 06. 共通ボタン
 * ==================================================
 */

.trw-shop-primary-button {
	display: inline-block;

	padding:
		13px
		28px;

	background: #171717;

	color: #eeeeee !important;

	border: 1px solid #171717;

	text-decoration: none;

	font-size: 13px;

	font-weight: 700;

	letter-spacing: .04em;

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


.trw-shop-primary-button:hover {
	background: #a82d35;

	border-color: #a82d35;

	color: #ffffff !important;
}


/* ==================================================
 * 07. 共通セクション
 * ==================================================
 */

.trw-shop-section {
	margin-top: 48px;
}


.trw-shop-section-title {
	margin-bottom: 20px;

	padding-bottom: 12px;

	border-bottom: 1px solid #5b5b5b;
}


.trw-shop-section-title h2 {
	margin: 0;

	color: #eeeeee !important;

	font-size: 21px;

	letter-spacing: .08em;
}


.trw-shop-section-title p {
	margin:
		3px
		0
		0;

	color: #a8a8a8 !important;

	font-size: 12px;
}


.trw-shop-empty-products {
	padding:
		60px
		20px;

	background: #353535;

	border: 1px solid #4d4d4d;

	text-align: center;

	color: #b8b8b8;
}


.trw-shop-empty-products p {
	color: #d5d5d5 !important;
}


.trw-shop-empty-products small {
	color: #999999 !important;
}


/* ==================================================
 * 08. パンくず
 * ==================================================
 */

.trw-shop-breadcrumb {
	margin-bottom: 24px;

	color: #8f8f8f;

	font-size: 12px;
}


.trw-shop-breadcrumb a {
	color: #bbbbbb !important;

	text-decoration: none;
}


.trw-shop-breadcrumb a:hover {
	color: #ffffff !important;
}


.trw-shop-breadcrumb span {
	margin:
		0
		8px;

	color: #777777 !important;
}


.trw-shop-breadcrumb strong {
	color: #dddddd !important;
}


/* ==================================================
 * 09. SHOP内フォーム共通
 * ==================================================
 */

.trw-shop-page input,
.trw-shop-page select,
.trw-shop-page textarea {
	background: #353535;

	border-color: #5b5b5b;

	color: #eeeeee;
}


.trw-shop-page input::placeholder,
.trw-shop-page textarea::placeholder {
	color: #8f8f8f;
}


/* ==================================================
 * 10. ステージギフトTOP
 * ==================================================
 */


/* ------------------------------------------
 * 10-01. ヘッダー
 * ------------------------------------------ */

.trw-stage-gift-header {
	padding:
		48px
		42px;

	background: #2d2d2d;

	border: 1px solid #474747;
}


.trw-stage-gift-header h1 {
	margin:
		12px
		0
		0;

	color: #eeeeee !important;

	font-size: 36px;

	font-weight: 500;

	letter-spacing: .08em;
}


.trw-stage-gift-header-ja {
	margin:
		3px
		0
		0;

	color: #aaaaaa !important;

	font-size: 12px;
}


.trw-stage-gift-lead {
	margin:
		24px
		0
		0;

	color: #d0d0d0 !important;

	font-size: 14px;

	line-height: 1.9;
}


/* ------------------------------------------
 * 10-02. ステージギフトについて
 * ------------------------------------------ */

.trw-stage-gift-about {
	margin-top: 24px;

	padding:
		22px
		24px;

	background: #292929;

	border: 1px solid #444444;
	border-left: 3px solid #a82d35;
}


.trw-stage-gift-about p {
	margin:
		0
		0
		12px;

	color: #c5c5c5 !important;

	font-size: 13px;

	font-weight: 400;

	line-height: 1.9;
}


.trw-stage-gift-about p:last-child {
	margin-bottom: 0;
}


/* ------------------------------------------
 * 10-03. 公演一覧
 * ------------------------------------------ */

.trw-stage-gift-performance-list {
	display: grid;

	gap: 18px;
}


.trw-stage-gift-performance-card {
	padding: 26px;

	background: #353535;

	border: 1px solid #4e4e4e;
}


.trw-stage-gift-performance-body {
	min-width: 0;
}


.trw-stage-gift-performance-status {
	margin-bottom: 10px;
}


.trw-stage-gift-performance-card h3 {
	margin:
		0
		0
		16px;

	color: #eeeeee !important;

	font-size: 19px;

	line-height: 1.6;
}


.trw-stage-gift-performance-meta {
	display: grid;

	grid-template-columns:
		70px
		1fr;

	gap: 10px;

	margin:
		5px
		0;

	font-size: 13px;
}


.trw-stage-gift-performance-meta span {
	color: #909090 !important;
}


.trw-stage-gift-performance-meta strong {
	color: #d8d8d8 !important;

	font-weight: 500;
}


.trw-stage-gift-performance-action {
	margin-top: 22px;
}


/* ------------------------------------------
 * 10-04. スマートフォン
 * ------------------------------------------ */

@media (max-width: 700px) {

	.trw-stage-gift-header {
		padding:
			32px
			24px;
	}


	.trw-stage-gift-header h1 {
		font-size: 29px;
	}


	.trw-stage-gift-about {
		margin-top: 18px;

		padding:
			18px
			17px;
	}


	.trw-stage-gift-about p {
		margin-bottom: 11px;

		font-size: 13px;

		line-height: 1.85;
	}


	.trw-stage-gift-performance-card {
		padding:
			22px
			20px;
	}

}

/* ==================================================
 * 11. ステージギフト申込画面
 * ==================================================
 *
 * /stage-gift-order/
 *
 * 【仕様】
 *
 * ・SHOP共通3カラム
 * ・公演選択
 * ・応援先一覧
 * ・1枚目は必ず公演・劇団へのギフト
 * ・2枚目以降は出演順でキャスト
 * ・公演カードとキャストカードは同じサイズ
 * ・画像部分は1:1
 * ・キャスト検索
 * ・PC 4列
 * ・スマートフォン 2列
 * ・選択中は赤枠＋チェック
 * ・カート追加
 *
 * ==================================================
 */


/* ------------------------------------------
 * 11-01. 申込画面全体
 * ------------------------------------------ */

.trw-stage-gift-order-main {
	min-width: 0;
}


/* ------------------------------------------
 * 11-02. 申込画面ヘッダー
 * ------------------------------------------ */

.trw-order-header {
	margin-bottom: 28px;

	padding: 40px;

	background: #2d2d2d;

	border: 1px solid #474747;
}


.trw-order-header-status {
	margin-bottom: 14px;
}


.trw-order-header .trw-shop-eyebrow {
	margin-bottom: 8px;
}


.trw-order-header h1 {
	margin: 0;

	color: #eeeeee !important;

	font-size: 34px;

	font-weight: 500;

	letter-spacing: .06em;
}


.trw-order-header-ja {
	margin:
		5px
		0
		0;

	color: #aaaaaa !important;

	font-size: 12px;
}


.trw-order-header-lead {
	margin:
		22px
		0
		0;

	color: #d0d0d0 !important;

	font-size: 14px;

	line-height: 1.9;
}


/* ------------------------------------------
 * 11-03. カート状態
 * ------------------------------------------ */

.trw-stage-gift-cart-bar {
	margin-bottom: 24px;

	padding:
		20px;

	background: #2c2c2c;

	border: 1px solid #4d4d4d;
	border-left: 4px solid #a82d35;
}


.trw-stage-gift-cart-bar-main {
	display: flex;

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

	gap: 18px;
}


.trw-stage-gift-cart-success {
	color: #eeeeee !important;

	font-size: 15px;

	font-weight: 700;
}


.trw-stage-gift-cart-label {
	color: #bbbbbb !important;

	font-size: 13px;

	font-weight: 600;
}


.trw-stage-gift-cart-numbers {
	display: flex;

	align-items: center;

	gap: 8px;

	flex-shrink: 0;
}


.trw-stage-gift-cart-numbers strong {
	color: #ffffff !important;

	font-size: 14px;
}


.trw-stage-gift-cart-numbers span {
	color: #777777 !important;
}


.trw-stage-gift-cart-bar p {
	margin:
		8px
		0
		14px;

	color: #999999 !important;

	font-size: 11px;

	line-height: 1.7;
}


/*
 * カートを確認する
 *
 * カート追加後に
 * 次の行動が分かりやすいメインボタン
 */
.trw-stage-gift-cart-link {
	position: relative;

	display: flex;

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

	width: 100%;

	min-height: 50px;

	padding:
		13px
		48px
		13px
		20px;

	background: #a82d35;

	border: 1px solid #bd3943;

	color: #ffffff !important;

	font-size: 13px;

	font-weight: 700;

	letter-spacing: .06em;

	line-height: 1.4;

	text-align: center;

	text-decoration: none !important;

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


.trw-stage-gift-cart-link::after {
	content: "→";

	position: absolute;

	top: 50%;
	right: 18px;

	transform:
		translateY(
			-50%
		);

	color: #ffffff;

	font-size: 20px;

	font-weight: 400;

	line-height: 1;
}


.trw-stage-gift-cart-link:hover {
	background: #be3540;

	border-color: #cf4650;

	color: #ffffff !important;
}


.trw-stage-gift-cart-link:active {
	transform:
		translateY(
			1px
		);
}



/* ------------------------------------------
 * 11-04. 入力エラー
 * ------------------------------------------ */

.trw-order-error {
	margin-bottom: 24px;

	padding:
		18px
		20px;

	background: #39282a;

	border: 1px solid #8f454a;
	border-left: 4px solid #b94a54;
}


.trw-order-error strong {
	color: #ffffff !important;
}


.trw-order-error ul {
	margin:
		10px
		0
		0;

	padding-left: 22px;
}


.trw-order-error li {
	color: #f1d5d7 !important;
}


/* ------------------------------------------
 * 11-05. フォームカード
 * ------------------------------------------ */

.trw-order-card {
	margin-bottom: 24px;

	padding: 28px;

	background: #303030;

	border: 1px solid #494949;
}


.trw-order-card-compact {
	padding-bottom: 24px;
}


.trw-order-card-heading {
	display: flex;

	align-items: flex-start;

	gap: 14px;

	margin-bottom: 24px;

	padding-bottom: 16px;

	border-bottom: 1px solid #494949;
}


.trw-order-step {
	display: flex;

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

	width: 36px;
	height: 36px;

	flex: 0 0 36px;

	background: #1d1d1d;

	border: 1px solid #555555;

	color: #d7d7d7 !important;

	font-size: 10px;

	font-weight: 700;

	letter-spacing: .08em;
}


.trw-order-card-heading h2 {
	margin:
		0
		0
		3px;

	color: #eeeeee !important;

	font-size: 18px;

	font-weight: 600;
}


.trw-order-card-heading p {
	margin: 0;

	color: #999999 !important;

	font-size: 11px;
}


/* ------------------------------------------
 * 11-06. 共通入力欄
 * ------------------------------------------ */

.trw-order-field {
	margin-bottom: 22px;
}


.trw-order-field:last-child {
	margin-bottom: 0;
}


.trw-order-field label,
.trw-order-label {
	display: block;

	margin-bottom: 7px;

	color: #dddddd !important;

	font-size: 13px;

	font-weight: 700;
}


.trw-required {
	display: inline-block;

	margin-left: 6px;

	padding:
		2px
		6px;

	background: #85323a;

	border-radius: 3px;

	color: #ffffff !important;

	font-size: 9px;

	font-weight: 700;

	vertical-align: 1px;
}


.trw-order-field input[type="text"],
.trw-order-field input[type="email"],
.trw-order-field input[type="tel"],
.trw-order-field input[type="number"],
.trw-order-field input[type="search"],
.trw-order-field select,
.trw-order-field textarea {
	width: 100%;

	padding:
		12px
		13px;

	background: #272727 !important;

	border: 1px solid #555555 !important;

	border-radius: 0;

	color: #eeeeee !important;

	font: inherit;

	font-size: 14px;

	outline: none;
}


.trw-order-field input:focus,
.trw-order-field select:focus,
.trw-order-field textarea:focus {
	border-color: #888888 !important;

	box-shadow:
		0
		0
		0
		1px
		#888888;
}


.trw-order-field textarea {
	min-height: 130px;

	resize: vertical;
}


.trw-order-field select option {
	background: #272727;

	color: #eeeeee;
}


.trw-order-field input::placeholder,
.trw-order-field textarea::placeholder {
	color: #777777;
}


.trw-order-help {
	margin:
		7px
		0
		0;

	color: #969696 !important;

	font-size: 11px;

	line-height: 1.7;
}


/* ------------------------------------------
 * 11-07. 応援先一覧
 * ------------------------------------------ */

.trw-cast-choice-section {
	margin-top: 8px;
}


.trw-cast-choice-heading {
	display: flex;

	align-items: flex-start;
	justify-content: space-between;

	gap: 16px;

	margin-bottom: 16px;
}


.trw-cast-choice-heading h3 {
	margin:
		0
		0
		4px;

	color: #eeeeee !important;

	font-size: 17px;

	font-weight: 700;
}


.trw-cast-choice-heading p {
	margin: 0;

	color: #999999 !important;

	font-size: 11px;

	line-height: 1.6;
}


.trw-cast-choice-heading > span {
	flex-shrink: 0;

	padding:
		4px
		8px;

	background: #242424;

	border: 1px solid #4c4c4c;

	color: #aaaaaa !important;

	font-size: 10px;
}


/* ------------------------------------------
 * 11-08. ステージギフト使途説明
 * ------------------------------------------ */

.trw-stage-gift-purpose-note {
	margin:
		0
		0
		20px;

	padding:
		14px
		16px;

	background: #292929;

	border: 1px solid #444444;
	border-left: 3px solid #a82d35;
}


.trw-stage-gift-purpose-note p {
	margin:
		0
		0
		7px;

	color: #bdbdbd !important;

	font-size: 12px;

	font-weight: 400;

	line-height: 1.8;
}


.trw-stage-gift-purpose-note p:last-child {
	margin-bottom: 0;
}


.trw-stage-gift-purpose-note strong {
	color: #e1e1e1 !important;

	font-size: 12px;

	font-weight: 700;
}


/* ------------------------------------------
 * 11-09. キャスト検索
 * ------------------------------------------ */

.trw-cast-search {
	margin-bottom: 18px;
}


.trw-cast-search-label {
	display: block;

	margin-bottom: 7px;

	color: #cfcfcf !important;

	font-size: 12px;

	font-weight: 700;
}


.trw-cast-search-box {
	position: relative;
}


.trw-cast-search-box > span {
	position: absolute;

	top: 50%;
	left: 13px;

	z-index: 2;

	transform:
		translateY(
			-50%
		);

	color: #777777 !important;

	font-size: 17px;

	pointer-events: none;
}


.trw-cast-search-box input {
	width: 100%;

	padding:
		11px
		13px
		11px
		38px;

	background: #252525 !important;

	border: 1px solid #505050 !important;

	color: #eeeeee !important;

	font-size: 13px;

	outline: none;
}


.trw-cast-search-box input:focus {
	border-color: #777777 !important;
}


.trw-cast-search-box input::placeholder {
	color: #777777;
}


.trw-cast-search-result {
	min-height: 16px;

	margin:
		5px
		0
		0;

	color: #888888 !important;

	font-size: 10px;
}


/* ------------------------------------------
 * 11-10. 応援先カード一覧
 * ------------------------------------------ */

.trw-cast-card-grid {
	display: grid;

	grid-template-columns:
		repeat(
			4,
			minmax(
				0,
				1fr
			)
		);

	gap: 12px;
}


/* ------------------------------------------
 * 11-11. 応援先カード共通
 * ------------------------------------------ */

.trw-cast-card,
.trw-stage-gift-performance-card-choice {
	position: relative;

	display: block !important;

	min-width: 0;

	margin: 0 !important;

	background: #292929;

	border: 1px solid #484848;

	cursor: pointer;

	overflow: hidden;

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


.trw-cast-card[hidden] {
	display: none !important;
}


.trw-cast-card:hover,
.trw-stage-gift-performance-card-choice:hover {
	background: #303030;

	border-color: #666666;

	transform:
		translateY(
			-1px
		);
}


.trw-cast-card input[type="radio"],
.trw-stage-gift-performance-card-choice input[type="radio"] {
	position: absolute;

	opacity: 0;

	pointer-events: none;
}


.trw-cast-card:has(input:checked),
.trw-stage-gift-performance-card-choice:has(input:checked) {
	background: #372f30;

	border-color: #a82d35;

	box-shadow:
		inset
		0
		0
		0
		1px
		#a82d35;
}


/* ------------------------------------------
 * 11-12. 写真・画像エリア
 * ------------------------------------------ */

.trw-cast-card-photo {
	position: relative;

	display: block;

	width: 100%;

	aspect-ratio:
		1
		/
		1;

	background: #ffffff;

	overflow: hidden;
}


.trw-cast-card-photo img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: center;
}


.trw-cast-card-check {
	position: absolute;

	top: 7px;
	right: 7px;

	z-index: 3;

	display: flex;

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

	width: 24px;
	height: 24px;

	background: #a82d35;

	border-radius: 50%;

	color: #ffffff !important;

	font-size: 12px;

	font-weight: 700;

	opacity: 0;

	transform:
		scale(
			.8
		);

	transition:
		opacity .15s ease,
		transform .15s ease;
}


.trw-cast-card:has(input:checked)
.trw-cast-card-check,
.trw-stage-gift-performance-card-choice:has(input:checked)
.trw-cast-card-check {
	opacity: 1;

	transform:
		scale(
			1
		);
}


/* ------------------------------------------
 * 11-13. 公演・劇団カード
 * ------------------------------------------ */

.trw-stage-gift-performance-card-choice {
	border-color: #5b4a4c;
}


.trw-stage-gift-performance-card-photo {
	background: #ffffff;
}


.trw-stage-gift-performance-card-visual {
	display: flex;

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

	flex-direction: column;

	gap: 5px;

	width: 100%;
	height: 100%;

	padding: 15px;

	background: #ffffff;

	text-align: center;
}


.trw-stage-gift-performance-card-star {
	display: flex;

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

	width: 52px;
	height: 52px;

	margin-bottom: 5px;

	border: 1px solid #b8b8b8;

	border-radius: 50%;

	color: #333333 !important;

	font-size: 24px;
}


.trw-stage-gift-performance-card-visual strong {
	color: #222222 !important;

	font-size: 12px;

	font-weight: 700;

	letter-spacing: .08em;
}


.trw-stage-gift-performance-card-visual small {
	color: #777777 !important;

	font-size: 8px;

	letter-spacing: .12em;
}


/* ------------------------------------------
 * 11-14. カード名・役名
 * ------------------------------------------ */

.trw-cast-card-info {
	display: flex;

	flex-direction: column;

	gap: 2px;

	min-height: 54px;

	padding:
		10px
		9px;
}


.trw-cast-card-info strong {
	overflow: hidden;

	color: #e6e6e6 !important;

	font-size: 12px;

	font-weight: 600;

	line-height: 1.45;

	text-overflow: ellipsis;

	white-space: nowrap;
}


.trw-cast-card-info small {
	overflow: hidden;

	color: #8f8f8f !important;

	font-size: 9px;

	line-height: 1.4;

	text-overflow: ellipsis;

	white-space: nowrap;
}


/* ------------------------------------------
 * 11-15. 検索結果なし・キャストなし
 * ------------------------------------------ */

.trw-cast-search-empty,
.trw-order-empty-casts {
	padding: 18px;

	background: #252525;

	border: 1px dashed #505050;

	color: #999999 !important;

	font-size: 11px;

	text-align: center;
}


.trw-stage-gift-performance-only-note {
	margin:
		16px
		0
		0;

	padding:
		12px
		14px;

	background: #292929;

	border: 1px solid #494949;

	color: #999999 !important;

	font-size: 10px;

	line-height: 1.7;
}


/* ------------------------------------------
 * 11-16. 金額入力
 * ------------------------------------------ */

.trw-stage-gift-amount-field {
	margin-bottom: 26px;
}


.trw-stage-gift-amount-guide {
	margin:
		0
		0
		16px;

	padding:
		13px
		15px;

	background: #292929;

	border: 1px solid #494949;
	border-left: 3px solid #a82d35;
}


.trw-stage-gift-amount-guide strong {
	display: block;

	margin: 0;

	color: #eeeeee !important;

	font-size: 12px;

	font-weight: 700;

	line-height: 1.7;
}


.trw-stage-gift-amount-guide p {
	margin:
		5px
		0
		0;

	color: #9f9f9f !important;

	font-size: 10px;

	line-height: 1.7;
}


.trw-stage-gift-amount-area {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		12px
		18px;
}


.trw-order-amount-row {
	display: flex;

	align-items: center;

	gap: 9px;

	flex:
		0
		0
		auto;
}


.trw-order-amount-row input {
	width: 180px !important;

	max-width: 180px;

	min-height: 46px;

	padding:
		11px
		13px !important;

	background: #202020 !important;

	border: 1px solid #626262 !important;

	color: #ffffff !important;

	font-size: 18px !important;

	font-weight: 700;

	text-align: right;

	letter-spacing: .03em;
}


.trw-order-amount-row input:focus {
	border-color: #a82d35 !important;

	box-shadow:
		0
		0
		0
		1px
		#a82d35 !important;
}


.trw-order-amount-row > span {
	color: #d6d6d6 !important;

	font-size: 14px;

	font-weight: 700;
}


.trw-stage-gift-amount-buttons {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 7px;
}


.trw-stage-gift-amount-add,
.trw-stage-gift-amount-clear {
	min-height: 42px;

	margin: 0;

	padding:
		9px
		12px;

	border-radius: 0;

	font-family: inherit;

	font-size: 11px;

	font-weight: 700;

	line-height: 1;

	cursor: pointer;

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


.trw-stage-gift-amount-add {
	background: #353535;

	border: 1px solid #666666;

	color: #eeeeee !important;
}


.trw-stage-gift-amount-add:hover {
	background: #a82d35;

	border-color: #a82d35;

	color: #ffffff !important;
}


.trw-stage-gift-amount-add:active {
	transform:
		translateY(
			1px
		);
}


.trw-stage-gift-amount-clear {
	background: transparent;

	border: 1px solid #505050;

	color: #999999 !important;
}


.trw-stage-gift-amount-clear:hover {
	background: #292929;

	border-color: #777777;

	color: #dddddd !important;
}


.trw-stage-gift-amount-error {
	margin:
		10px
		0
		0;

	padding:
		9px
		11px;

	background: #39282a;

	border: 1px solid #8f454a;

	color: #f1d5d7 !important;

	font-size: 11px;

	font-weight: 600;

	line-height: 1.6;
}


.trw-stage-gift-amount-error[hidden] {
	display: none !important;
}


.trw-stage-gift-amount-field > .trw-order-help {
	margin-top: 11px;

	color: #969696 !important;

	font-size: 11px;

	line-height: 1.7;
}


/* ------------------------------------------
 * 11-17. 金額入力 スマートフォン
 * ------------------------------------------ */

@media (max-width: 700px) {

	.trw-stage-gift-purpose-note {
		margin-bottom: 18px;

		padding:
			12px
			13px;
	}


	.trw-stage-gift-purpose-note p {
		margin-bottom: 6px;

		font-size: 11px;

		line-height: 1.8;
	}


	.trw-stage-gift-purpose-note strong {
		font-size: 11px;
	}


	.trw-stage-gift-amount-guide {
		padding:
			12px
			13px;
	}


	.trw-stage-gift-amount-area {
		display: block;
	}


	.trw-order-amount-row {
		width: 100%;

		margin-bottom: 12px;
	}


	.trw-order-amount-row input {
		width: 100% !important;

		max-width: none;

		flex: 1;

		min-width: 0;

		font-size: 18px !important;
	}


	.trw-stage-gift-amount-buttons {
		display: grid;

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

		gap: 8px;
	}


	.trw-stage-gift-amount-add,
	.trw-stage-gift-amount-clear {
		width: 100%;

		min-height: 44px;

		padding:
			10px
			8px;

		font-size: 11px;
	}


	.trw-stage-gift-amount-clear {
		grid-column:
			1
			/
			-1;
	}

}


/* ------------------------------------------
 * 11-18. 個人情報補足
 * ------------------------------------------ */

.trw-order-privacy-note {
	margin-top: 18px;

	padding:
		14px
		16px;

	background: #292929;

	border: 1px solid #444444;
}


.trw-order-privacy-note p {
	margin:
		0
		0
		6px;

	color: #9b9b9b !important;

	font-size: 10px;

	line-height: 1.7;
}


.trw-order-privacy-note p:last-child {
	margin-bottom: 0;
}


.trw-order-privacy-note strong {
	color: #cfcfcf !important;
}


/* ------------------------------------------
 * 11-19. カートへ入れる
 * ------------------------------------------ */

.trw-order-submit {
	margin-top: 30px;

	padding: 24px;

	background: #292929;

	border: 1px solid #474747;

	text-align: center;
}


.trw-order-submit p {
	margin:
		0
		0
		13px;

	color: #999999 !important;

	font-size: 10px;
}


.trw-order-submit-button {
	min-width: 260px;

	cursor: pointer;
}



/* ------------------------------------------
 * 11-20. 選択した応援先
 * ------------------------------------------ */

.trw-stage-gift-selected-target {
	display: grid;

	grid-template-columns:
		72px
		minmax(
			0,
			1fr
		);

	align-items: center;

	gap: 16px;

	padding:
		16px;

	background: #292929;

	border: 1px solid #4a4a4a;
	border-left: 3px solid #a82d35;
}


.trw-stage-gift-selected-target-media {
	width: 72px;
	height: 72px;

	background: #1f1f1f;

	border: 1px solid #474747;

	overflow: hidden;
}


.trw-stage-gift-selected-target-media img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	object-position: center;
}


.trw-stage-gift-selected-target-performance {
	display: flex;

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

	width: 100%;
	height: 100%;

	background: #f1f1f1;

	color: #333333 !important;

	font-size: 26px;
}


.trw-stage-gift-selected-target-info {
	min-width: 0;
}


.trw-stage-gift-selected-target-info small {
	display: block;

	margin-bottom: 4px;

	color: #888888 !important;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: .08em;
}


.trw-stage-gift-selected-target-info strong {
	display: block;

	color: #f0f0f0 !important;

	font-size: 16px;

	font-weight: 700;

	line-height: 1.45;
}


.trw-stage-gift-selected-target-info span {
	display: block;

	margin-top: 3px;

	color: #a5a5a5 !important;

	font-size: 11px;

	line-height: 1.5;
}


/* ------------------------------------------
 * 11-21. 応援先変更ボタン
 * ------------------------------------------ */

.trw-stage-gift-change-target-wrap {
	display: flex;

	justify-content: flex-end;

	margin:
		8px
		0
		24px;
}


.trw-stage-gift-change-target {
	position: relative;

	min-height: 34px;

	margin: 0;

	padding:
		7px
		30px
		7px
		12px;

	background: transparent;

	border: 1px solid #565656;

	color: #bcbcbc !important;

	font-family: inherit;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: .03em;

	line-height: 1.4;

	cursor: pointer;

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


.trw-stage-gift-change-target::after {
	content: "↺";

	position: absolute;

	top: 50%;
	right: 10px;

	transform:
		translateY(
			-50%
		);

	color: #888888;

	font-size: 13px;
}


.trw-stage-gift-change-target:hover {
	background: #303030;

	border-color: #777777;

	color: #eeeeee !important;
}


.trw-stage-gift-change-target:hover::after {
	color: #dddddd;
}


/* ------------------------------------------
 * 11-22. 選択した応援先 スマートフォン
 * ------------------------------------------ */

@media (max-width: 700px) {

	.trw-stage-gift-selected-target {
		grid-template-columns:
			58px
			minmax(
				0,
				1fr
			);

		gap: 12px;

		padding:
			13px;
	}


	.trw-stage-gift-selected-target-media {
		width: 58px;
		height: 58px;
	}


	.trw-stage-gift-selected-target-info strong {
		font-size: 14px;
	}


	.trw-stage-gift-change-target-wrap {
		margin:
			7px
			0
			22px;
	}


	.trw-stage-gift-change-target {
		min-height: 32px;

		padding:
			6px
			28px
			6px
			11px;

		font-size: 10px;
	}

}



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

@media (max-width: 1100px) {

	.trw-shop-container {
		grid-template-columns:
			200px
			minmax(
				0,
				1fr
			);
	}


	.trw-cast-card-grid {
		grid-template-columns:
			repeat(
				3,
				minmax(
					0,
					1fr
				)
			);
	}

}


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

@media (max-width: 700px) {

	/* ------------------------------------------
	 * 13-01. SHOP全体
	 * ------------------------------------------ */

	.trw-shop-page {
		padding:
			20px
			15px
			50px;
	}


	.trw-shop-container {
		display: flex;

		flex-direction: column;

		gap: 30px;
	}


	.trw-shop-main {
		order: 1;

		width: 100%;
	}


	.trw-shop-sidebar {
		order: 2;

		width: 100%;
	}


	.trw-shop-banners {
		order: 3;

		width: 100%;
	}


	/* ------------------------------------------
	 * 13-02. SHOPトップ
	 * ------------------------------------------ */

	.trw-shop-hero {
		padding:
			40px
			26px;
	}


	.trw-shop-feature {
		padding:
			28px
			24px;
	}


	/* ------------------------------------------
	 * 13-03. ステージギフトTOP
	 * ------------------------------------------ */

	.trw-stage-gift-header {
		padding:
			32px
			24px;
	}


	.trw-stage-gift-header h1 {
		font-size: 29px;
	}


	.trw-stage-gift-performance-card {
		padding:
			22px
			20px;
	}


	/* ------------------------------------------
	 * 13-04. ステージギフト申込ヘッダー
	 * ------------------------------------------ */

	.trw-order-header {
		padding:
			28px
			20px;
	}


	.trw-order-header h1 {
		font-size: 28px;
	}


	/* ------------------------------------------
	 * 13-05. フォームカード
	 * ------------------------------------------ */

	.trw-order-card {
		padding:
			20px
			16px;
	}


	.trw-order-card-heading {
		gap: 11px;

		margin-bottom: 20px;
	}


	.trw-order-step {
		width: 31px;
		height: 31px;

		flex-basis: 31px;
	}


	.trw-order-card-heading h2 {
		font-size: 16px;
	}


	/* ------------------------------------------
	 * 13-06. カート状態
	 * ------------------------------------------ */

	.trw-stage-gift-cart-bar-main {
		display: block;
	}


	.trw-stage-gift-cart-numbers {
		margin-top: 5px;
	}


	/* ------------------------------------------
	 * 13-07. 応援先一覧見出し
	 * ------------------------------------------ */

	.trw-cast-choice-heading {
		display: block;
	}


	.trw-cast-choice-heading > span {
		display: inline-block;

		margin-top: 8px;
	}


	/* ------------------------------------------
	 * 13-08. 応援先カード
	 *
	 * 公演・劇団カードも含めて2列表示
	 * ------------------------------------------ */

	.trw-cast-card-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(
					0,
					1fr
				)
			);

		gap: 10px;
	}


	.trw-cast-card-info {
		min-height: 50px;

		padding:
			9px
			8px;
	}


	.trw-cast-card-info strong {
		font-size: 11px;
	}


	.trw-cast-card-info small {
		font-size: 8px;
	}


	/* ------------------------------------------
	 * 13-09. 公演・劇団カード
	 * ------------------------------------------ */

	.trw-stage-gift-performance-card-visual {
		padding: 10px;
	}


	.trw-stage-gift-performance-card-star {
		width: 44px;
		height: 44px;

		margin-bottom: 3px;

		font-size: 20px;
	}


	.trw-stage-gift-performance-card-visual strong {
		font-size: 10px;
	}


	.trw-stage-gift-performance-card-visual small {
		font-size: 7px;
	}


	/* ------------------------------------------
	 * 13-10. 金額入力
	 * ------------------------------------------ */

	.trw-order-amount-row input {
		max-width: none;
	}


	/* ------------------------------------------
	 * 13-11. カートへ入れる
	 * ------------------------------------------ */

	.trw-order-submit {
		padding:
			20px
			15px;
	}


	.trw-order-submit-button {
		width: 100%;

		min-width: 0;
	}

}



/* ==================================================
 * 14. グッズショップ
 * ==================================================
 *
 * 【対象】
 * /shop/?view=goods
 *
 * ・商品一覧
 * ・商品画像
 * ・公演名
 * ・カテゴリー
 * ・価格
 * ・在庫表示
 * ・絞り込み状態
 *
 * PC：
 * 3列
 *
 * タブレット：
 * 2列
 *
 * スマートフォン：
 * 2列
 *
 * ==================================================
 */


/* ------------------------------------------
 * 14-01. グッズショップ見出し
 * ------------------------------------------ */

.trw-shop-section-title h1 {
	margin:
		4px
		0
		0;

	color: #eeeeee !important;

	font-size:
		clamp(
			28px,
			4vw,
			40px
		);

	font-weight: 500;

	line-height: 1.25;

	letter-spacing: .08em;
}


/* ------------------------------------------
 * 14-02. 絞り込み中表示
 * ------------------------------------------ */

.trw-shop-goods-filter-summary {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		8px
		12px;

	margin-bottom: 24px;

	padding:
		14px
		16px;

	background: #292929;

	border: 1px solid #484848;
	border-left: 3px solid #a82d35;
}


.trw-shop-goods-filter-summary span {
	display: inline-flex;

	align-items: center;

	gap: 4px;

	color: #999999 !important;

	font-size: 11px;

	line-height: 1.5;
}


.trw-shop-goods-filter-summary strong {
	color: #dddddd !important;

	font-size: 11px;

	font-weight: 600;
}


.trw-shop-goods-filter-summary a {
	margin-left: auto;

	color: #bbbbbb !important;

	font-size: 10px;

	font-weight: 600;

	text-decoration: underline;

	text-underline-offset: 3px;
}


.trw-shop-goods-filter-summary a:hover {
	color: #ffffff !important;
}


/* ------------------------------------------
 * 14-03. 商品一覧
 * ------------------------------------------ */

.trw-shop-goods-grid {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(
				0,
				1fr
			)
		);

	gap:
		28px
		18px;
}


/* ------------------------------------------
 * 14-04. 商品カード
 * ------------------------------------------ */

.trw-shop-goods-card {
	position: relative;

	min-width: 0;

	background: #303030;

	border: 1px solid #484848;

	overflow: hidden;

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


.trw-shop-goods-card:hover {
	background: #333333;

	border-color: #646464;

	transform:
		translateY(
			-2px
		);
}


/* ------------------------------------------
 * 14-05. 商品画像
 * ------------------------------------------ */

.trw-shop-goods-card-image {
	position: relative;

	display: flex;

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

	width: 100%;

	aspect-ratio:
		4
		/
		5;

	background: #eeeeee;

	overflow: hidden;
}


.trw-shop-goods-card-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;

	object-position: center;
}


/*
 * 画像未登録
 */
.trw-shop-goods-card-no-image {
	display: flex;

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

	width: 100%;
	height: 100%;

	color: #888888 !important;

	font-size: 10px;

	font-weight: 700;

	letter-spacing: .12em;
}


/* ------------------------------------------
 * 14-06. 商品ラベル
 * ------------------------------------------ */

.trw-shop-goods-card-image .trw-product-label {
	position: absolute;

	top: 10px;
	left: 10px;

	z-index: 2;

	display: inline-flex;

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

	min-height: 24px;

	padding:
		4px
		8px;

	background: #a82d35;

	color: #ffffff !important;

	font-size: 9px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: .08em;
}


/* ------------------------------------------
 * 14-07. 商品情報
 * ------------------------------------------ */

.trw-shop-goods-card-body {
	padding:
		16px
		15px
		18px;
}


/*
 * 公演名
 */
.trw-shop-goods-performance {
	min-height: 1.5em;

	margin:
		0
		0
		5px;

	color: #999999 !important;

	font-size: 9px;

	font-weight: 500;

	line-height: 1.5;

	letter-spacing: .02em;
}


/*
 * 商品名
 */
.trw-shop-goods-card-body h2 {
	margin:
		0
		0
		7px;

	color: #eeeeee !important;

	font-size: 15px;

	font-weight: 600;

	line-height: 1.55;

	letter-spacing: .01em;

	overflow-wrap: anywhere;
}


/*
 * カテゴリー
 */
.trw-shop-goods-category {
	display: inline-block;

	margin:
		0
		0
		12px;

	padding:
		3px
		7px;

	background: #272727;

	border: 1px solid #484848;

	color: #a8a8a8 !important;

	font-size: 9px;

	line-height: 1.4;
}


/*
 * 価格
 */
.trw-shop-goods-price {
	margin:
		0;

	color: #f0f0f0 !important;

	font-size: 16px;

	font-weight: 700;

	line-height: 1.4;

	letter-spacing: .02em;
}


/* ------------------------------------------
 * 14-08. 在庫表示
 * ------------------------------------------ */

.trw-shop-goods-stock {
	margin:
		7px
		0
		0;

	font-size: 10px;

	font-weight: 700;

	line-height: 1.4;
}


/*
 * 残りわずか
 */
.trw-shop-goods-stock.is-low {
	color: #d8b56a !important;
}


/*
 * SOLD OUT
 */
.trw-shop-goods-stock.is-soldout {
	color: #b8787d !important;

	letter-spacing: .08em;
}


/*
 * 売り切れ商品の画像を少し暗く見せる
 */
.trw-shop-goods-card:has(
	.trw-shop-goods-stock.is-soldout
)
.trw-shop-goods-card-image img {
	opacity: .55;
}


/* ------------------------------------------
 * 14-09. タブレット
 * ------------------------------------------ */

@media (max-width: 1100px) {

	.trw-shop-goods-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(
					0,
					1fr
				)
			);

		gap:
			24px
			16px;
	}

}


/* ------------------------------------------
 * 14-10. スマートフォン
 * ------------------------------------------ */

@media (max-width: 700px) {

	.trw-shop-section-title h1 {
		font-size: 28px;
	}


	.trw-shop-goods-filter-summary {
		display: block;

		margin-bottom: 20px;

		padding:
			12px
			13px;
	}


	.trw-shop-goods-filter-summary span {
		display: block;

		margin-bottom: 5px;

		font-size: 10px;
	}


	.trw-shop-goods-filter-summary strong {
		font-size: 10px;
	}


	.trw-shop-goods-filter-summary a {
		display: inline-block;

		margin:
			6px
			0
			0;

		font-size: 10px;
	}


	.trw-shop-goods-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(
					0,
					1fr
				)
			);

		gap:
			18px
			10px;
	}


	.trw-shop-goods-card:hover {
		transform: none;
	}


	.trw-shop-goods-card-image {
		aspect-ratio:
			4
			/
			5;
	}


	.trw-shop-goods-card-image .trw-product-label {
		top: 7px;
		left: 7px;

		min-height: 21px;

		padding:
			3px
			6px;

		font-size: 8px;
	}


	.trw-shop-goods-card-body {
		padding:
			11px
			10px
			13px;
	}


	.trw-shop-goods-performance {
		margin-bottom: 4px;

		font-size: 8px;
	}


	.trw-shop-goods-card-body h2 {
		margin-bottom: 5px;

		font-size: 12px;

		line-height: 1.5;
	}


	.trw-shop-goods-category {
		margin-bottom: 9px;

		padding:
			2px
			5px;

		font-size: 8px;
	}


	.trw-shop-goods-price {
		font-size: 14px;
	}


	.trw-shop-goods-stock {
		margin-top: 5px;

		font-size: 9px;
	}

}