/**
 * ==================================================
 * Theater Re write WEB SHOP
 * キャストアカウント
 *
 * ファイル：
 * assets/css/cast-account.css
 *
 * 【対象】
 * ・初回アカウント登録
 * ・キャストログイン
 * ・CAST PAGE
 *
 * 今後：
 * ・パスワード再設定
 * ・アカウント情報
 * ・公演別ギフト一覧
 *
 * ==================================================
 */


/* ==================================================
 * 01. アカウント画面共通
 * ==================================================
 */

.trw-cast-account-page {
	background: #242424;
	color: #e8e8e8;
	min-height: 70vh;
	padding: 70px 20px;
}

.trw-cast-account-inner {
	width: min(620px, 100%);
	margin: 0 auto;
}

.trw-cast-account-heading {
	margin-bottom: 30px;
}

.trw-cast-account-heading h1 {
	margin: 0 0 10px;
	color: #ffffff;
	font-size: 30px;
	line-height: 1.4;
}

.trw-cast-account-heading p {
	margin: 0;
	color: #b8b8b8;
	font-size: 14px;
	line-height: 1.8;
}


/* ==================================================
 * 02. フォーム
 * ==================================================
 */

.trw-cast-account-card {
	padding: 32px;
	border: 1px solid #505050;
	background: #2d2d2d;
}

.trw-cast-account-field {
	margin-bottom: 24px;
}

.trw-cast-account-field label {
	display: block;
	margin-bottom: 8px;
	color: #e8e8e8;
	font-size: 14px;
	font-weight: 700;
}

.trw-cast-account-field input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 10px 13px;
	border: 1px solid #555555;
	border-radius: 0;
	background: #242424;
	color: #ffffff;
	font-size: 16px;
	box-sizing: border-box;
}

.trw-cast-account-field input:focus {
	outline: none;
	border-color: #a82d35;
}

.trw-cast-account-help {
	margin: 8px 0 0;
	color: #969696;
	font-size: 11px;
	line-height: 1.7;
}


/* ==================================================
 * 03. ボタン
 * ==================================================
 */

.trw-cast-account-button {
	display: block;
	width: 100%;
	min-height: 52px;
	margin-top: 10px;
	border: 1px solid #a82d35;
	background: #a82d35;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.trw-cast-account-button:hover {
	opacity: .88;
}


/* ==================================================
 * 04. エラー・通知
 * ==================================================
 */

.trw-cast-account-errors {
	margin-bottom: 24px;
	padding: 16px 18px;
	border: 1px solid #a82d35;
	background: rgba(168, 45, 53, .12);
}

.trw-cast-account-errors p {
	margin: 4px 0;
	color: #f0c5c8;
	font-size: 13px;
	line-height: 1.7;
}

.trw-cast-account-notice {
	margin-bottom: 24px;
	padding: 16px 18px;
	border: 1px solid #55765a;
	background: rgba(70, 120, 80, .12);
	color: #cce3cf;
	font-size: 13px;
	line-height: 1.7;
}

.trw-cast-account-warning {
	margin-top: 20px !important;
	padding: 13px;
	border: 1px solid #806d3d;
	background: rgba(150, 120, 40, .10);
	color: #e4d3a4 !important;
}


/* ==================================================
 * 05. 登録完了
 * ==================================================
 */

.trw-cast-account-complete {
	padding: 34px;
	border: 1px solid #505050;
	background: #2d2d2d;
	text-align: center;
}

.trw-cast-account-complete h2 {
	margin: 0 0 16px;
	color: #ffffff;
	font-size: 24px;
}

.trw-cast-account-complete p {
	margin: 8px 0;
	color: #c8c8c8;
	font-size: 14px;
	line-height: 1.8;
}


/* ==================================================
 * 06. ログイン画面リンク
 * ==================================================
 */

.trw-cast-account-links {
	margin-top: 22px;
	text-align: center;
}

.trw-cast-account-links a {
	color: #c8c8c8;
	font-size: 12px;
	text-decoration: underline;
}


/* ==================================================
 * 07. CAST PAGE
 * ==================================================
 */

.trw-cast-page {
	background: #242424;
	color: #e8e8e8;
	min-height: 70vh;
	padding: 60px 20px 80px;
}

.trw-cast-page-inner {
	width: min(1100px, 100%);
	margin: 0 auto;
}

.trw-cast-page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 34px;
	padding-bottom: 22px;
	border-bottom: 1px solid #505050;
}

.trw-cast-page-header h1 {
	margin: 0 0 7px;
	color: #ffffff;
	font-size: 30px;
}

.trw-cast-page-header p {
	margin: 0;
	color: #a8a8a8;
	font-size: 13px;
}

.trw-cast-page-nav {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.trw-cast-page-nav a {
	color: #d6d6d6;
	font-size: 12px;
	text-decoration: none;
}

.trw-cast-page-nav a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.trw-cast-page-nav-coming-soon {
	color: #777777;
}


/* ==================================================
 * 08. CAST PAGE セクション
 * ==================================================
 */

.trw-cast-page-section-heading {
	margin-bottom: 18px;
}

.trw-cast-page-section-heading h2 {
	margin: 0 0 6px;
	color: #ffffff;
	font-size: 21px;
}

.trw-cast-page-section-heading p {
	margin: 0;
	color: #969696;
	font-size: 12px;
	line-height: 1.7;
}


/* ==================================================
 * 09. 公演カード
 * ==================================================
 */

.trw-cast-performance-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.trw-cast-performance-card {
	overflow: hidden;
	border: 1px solid #505050;
	background: #2d2d2d;
}


/*
 * 公演写真
 * 登録写真が正方形なので1:1で表示
 */
.trw-cast-performance-photo {
	aspect-ratio: 1 / 1;
	background: #202020;
	overflow: hidden;
}

.trw-cast-performance-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trw-cast-performance-no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #777777;
	font-size: 11px;
	letter-spacing: .08em;
}

.trw-cast-performance-body {
	padding: 18px;
}

.trw-cast-performance-body h3 {
	margin: 0 0 13px;
	color: #ffffff;
	font-size: 17px;
	line-height: 1.5;
}

.trw-cast-performance-meta {
	margin: 5px 0;
	color: #b8b8b8;
	font-size: 12px;
	line-height: 1.6;
}

.trw-cast-performance-button {
	display: block;
	margin-top: 16px;
	padding: 11px 14px;
	border: 1px solid #666666;
	color: #e8e8e8;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.trw-cast-performance-button:hover {
	border-color: #a82d35;
	background: #a82d35;
	color: #ffffff;
}

.trw-cast-page-empty {
	padding: 35px 20px;
	border: 1px solid #505050;
	background: #2d2d2d;
	color: #969696;
	font-size: 13px;
	text-align: center;
}


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

@media (max-width: 900px) {

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


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

@media (max-width: 700px) {

	.trw-cast-account-page {
		padding: 42px 16px;
	}

	.trw-cast-account-heading h1 {
		font-size: 24px;
	}

	.trw-cast-account-card,
	.trw-cast-account-complete {
		padding: 24px 18px;
	}


	.trw-cast-page {
		padding: 40px 16px 60px;
	}

	.trw-cast-page-header {
		display: block;
	}

	.trw-cast-page-header h1 {
		font-size: 24px;
	}

	.trw-cast-page-nav {
		margin-top: 18px;
	}

	.trw-cast-performance-grid {
		grid-template-columns: 1fr;
	}
}


/* ==================================================
 * 12. 公演別ギフト詳細
 * ==================================================
 */


/* ==================================================
 * 12-01. 詳細画面全体
 * ==================================================
 */

.trw-cast-gift-detail {
	margin-top: 10px;
}


/* ==================================================
 * 12-02. 一覧へ戻る
 * ==================================================
 */

.trw-cast-gift-back {
	display: inline-block;
	margin-bottom: 24px;
	color: #b8b8b8;
	font-size: 12px;
	line-height: 1.6;
	text-decoration: none;
}

.trw-cast-gift-back:hover {
	color: #ffffff;
	text-decoration: underline;
}


/* ==================================================
 * 12-03. 確定済み支援総額
 * ==================================================
 */

.trw-cast-gift-summary {
	margin: 28px 0 34px;
	padding: 24px 26px;
	border: 1px solid #505050;
	background: #2d2d2d;
}

.trw-cast-gift-summary-label {
	margin: 0 0 6px;
	color: #969696;
	font-size: 12px;
	line-height: 1.6;
}

.trw-cast-gift-summary-amount {
	margin: 0;
	color: #ffffff;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
}


/* ==================================================
 * 12-04. ギフト一覧
 * ==================================================
 */

.trw-cast-gift-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}


/* ==================================================
 * 12-05. ギフトカード
 * ==================================================
 */

.trw-cast-gift-card {
	padding: 22px;
	border: 1px solid #505050;
	background: #2d2d2d;
}

.trw-cast-gift-supporter {
	margin-bottom: 16px;
}

.trw-cast-gift-company {
	margin: 0 0 5px;
	color: #a8a8a8;
	font-size: 11px;
	line-height: 1.6;
}

.trw-cast-gift-supporter-name {
	margin: 0;
	color: #c8c8c8;
	font-size: 13px;
	line-height: 1.7;
}

.trw-cast-gift-supporter-name strong {
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
}

.trw-cast-gift-amount {
	margin: 0;
	color: #ffffff;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
}

.trw-cast-gift-amount span {
	margin-left: 2px;
	font-size: 14px;
	font-weight: 400;
}


/* ==================================================
 * 12-06. メッセージ
 * ==================================================
 */

.trw-cast-gift-message {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #484848;
}

.trw-cast-gift-message-label {
	margin: 0 0 8px;
	color: #969696;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
}

.trw-cast-gift-message-text {
	margin: 0;
	color: #d0d0d0;
	font-size: 13px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}


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

@media (max-width: 900px) {

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


/* ==================================================
 * 12-08. スマートフォン
 * ==================================================
 */

@media (max-width: 700px) {

	.trw-cast-gift-back {
		margin-bottom: 20px;
	}

	.trw-cast-gift-summary {
		margin: 22px 0 28px;
		padding: 20px 18px;
	}

	.trw-cast-gift-summary-amount {
		font-size: 27px;
	}

	.trw-cast-gift-grid {
		grid-template-columns: 1fr;
	}

	.trw-cast-gift-card {
		padding: 20px 18px;
	}

	.trw-cast-gift-supporter-name strong {
		font-size: 15px;
	}

	.trw-cast-gift-amount {
		font-size: 24px;
	}
}



/* ==================================================
 * 13. アカウント情報
 * ==================================================
 */


/* ==================================================
 * 13-01. CAST PAGEへ戻る
 * ==================================================
 */

.trw-cast-account-back {
	display: inline-block;
	margin: 0 0 26px;
	color: #b8b8b8;
	font-size: 12px;
	line-height: 1.6;
	text-decoration: none;
}

.trw-cast-account-back:hover {
	color: #ffffff;
	text-decoration: underline;
}


/* ==================================================
 * 13-02. 現在のアカウント情報
 * ==================================================
 */

.trw-cast-account-summary {
	margin-bottom: 42px;
	border: 1px solid #505050;
	background: #2d2d2d;
}

.trw-cast-account-summary-row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #484848;
}

.trw-cast-account-summary-row:last-child {
	border-bottom: 0;
}

.trw-cast-account-summary-row span {
	color: #969696;
	font-size: 12px;
	line-height: 1.6;
}

.trw-cast-account-summary-row strong {
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	overflow-wrap: anywhere;
}


/* ==================================================
 * 13-03. 変更セクション
 * ==================================================
 */

.trw-cast-account-section {
	margin-top: 42px;
}

.trw-cast-account-section:first-of-type {
	margin-top: 0;
}

.trw-cast-account-section + .trw-cast-account-section {
	margin-top: 52px;
}


/* ==================================================
 * 13-04. アカウント情報画面の見出し
 * ==================================================
 */

.trw-cast-account-section .trw-cast-page-section-heading {
	margin-bottom: 16px;
}

.trw-cast-account-section .trw-cast-page-section-heading h2 {
	font-size: 20px;
}

.trw-cast-account-section .trw-cast-page-section-heading p {
	color: #969696;
	font-size: 12px;
	line-height: 1.7;
}


/* ==================================================
 * 13-05. 通知内の余白
 * ==================================================
 */

.trw-cast-account-notice p {
	margin: 0;
}


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

@media (max-width: 700px) {

	.trw-cast-account-back {
		margin-bottom: 22px;
	}

	.trw-cast-account-summary {
		margin-bottom: 34px;
	}

	.trw-cast-account-summary-row {
		display: block;
		padding: 15px 16px;
	}

	.trw-cast-account-summary-row span {
		display: block;
		margin-bottom: 4px;
	}

	.trw-cast-account-summary-row strong {
		display: block;
		font-size: 13px;
	}

	.trw-cast-account-section {
		margin-top: 34px;
	}

	.trw-cast-account-section + .trw-cast-account-section {
		margin-top: 42px;
	}
}



/* ==================================================
 * 14. ログイン画面 補助リンク
 * ==================================================
 */


/* ==================================================
 * 14-01. リンク間隔
 * ==================================================
 */

.trw-cast-account-links p {
	margin: 8px 0;
	line-height: 1.6;
}


/* ==================================================
 * 14-02. IDを忘れた場合の案内
 * ==================================================
 */

.trw-cast-account-id-help {
	margin-top: 14px !important;
	color: #969696;
	font-size: 11px !important;
	line-height: 1.7 !important;
}