@import url("/css/reset.css");

body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
	color: #111;
}

img {
	width: 100%;
}

/* common */
/* ============================================ */
:root {
	--admin-bg: #f6f7fb;
	--admin-surface: #ffffff;
	--admin-border: #e6e8f0;
	--admin-text: #1f2533;
	--admin-muted: #667085;
	--admin-accent: #3b82f6;
	--admin-accent-weak: rgba(59, 130, 246, 0.12);
	--admin-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
	--admin-radius: 14px;
}

body {
	background: var(--admin-bg);
	color: var(--admin-text);
}

.page_title {
	margin: 10px 0 14px;
}

.page_title h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0.02em;
}

.contents_header.admin-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
	box-shadow: var(--admin-shadow);
}

.admin-header__title {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.admin-header__shop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--admin-muted);
	font-size: 14px;
	white-space: nowrap;
}

.admin-header__shop-label {
	color: var(--admin-muted);
}

.admin-header__select {
	min-width: 220px;
}

.admin-nav {
	display: flex;
	justify-content: center;
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
	box-shadow: var(--admin-shadow);
	padding: 10px 12px;
}

.admin-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.admin-nav__item {
	border-radius: 12px;
	overflow: visible;
	min-width: 220px;
/*	min-width: 130px; */
	flex: 0 0 auto;
	position: relative;
	cursor: pointer;
}

.admin-nav__item.has-sub:hover > .admin-nav__sub{
	grid-template-rows: 1fr;
}

.admin-nav__link,
.admin-nav__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--admin-text);
	font-weight: 700;
	font-size: 14px;
	border-radius: 12px;
	transition:
		background 0.15s ease,
		color 0.15s ease;
	white-space: nowrap;
}

.admin-nav__link:hover {
	background: rgba(15, 23, 42, 0.06);
	color: var(--admin-text);
	text-decoration: none;
}

.admin-nav__item.has-sub > .admin-nav__label {
	position: relative;
	padding-right: 32px;
/*	cursor: default; */
}

.admin-nav__item.has-sub > .admin-nav__label::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--admin-muted);
	border-bottom: 2px solid var(--admin-muted);
	transform: translateY(-50%) rotate(45deg);
	opacity: 0.9;
}

.admin-nav__sub {
	list-style: none;
	margin: 41px 0 0 0;
	padding: 8px;
/*	display: flex; */
	flex-direction: column;
	gap: 6px;
/*	background: rgba(15, 23, 42, 0.03); */
	background: rgba(247, 248, 248);
	border: 1px solid var(--admin-border);
	border-radius: 12px;
	min-width: 220px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
	overflow: hidden;
}

.admin-nav__sublink {
	display: flex;
	align-items: center;
	padding: 9px 10px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--admin-muted);
	font-weight: 600;
	font-size: 13px;
	transition:
		background 0.15s ease,
		color 0.15s ease;
	white-space: nowrap;
}

.admin-nav__sublink:hover {
/*	background: rgba(15, 23, 42, 0.06); */
	background: rgba(233, 234, 235);
	color: var(--admin-text);
	text-decoration: none;
}

.admin-nav__link.is-active,
.admin-nav__sublink.is-active {
	background: var(--admin-accent-weak);
	color: var(--admin-accent);
}

@media (max-width: 992px) {
	.admin-nav__item {
		min-width: 160px;
	}
	.admin-nav__sub {
		min-width: 200px;
	}
}

@media (max-width: 576px) {
	.admin-nav {
		padding: 8px 10px;
	}

	.admin-nav__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 8px;
		padding-bottom: 6px;
	}

	.admin-nav__item {
		min-width: 240px;
	}

	.admin-nav__sub {
		min-width: 220px;
	}

	.admin-nav__list::-webkit-scrollbar {
		height: 8px;
	}
	.admin-nav__list::-webkit-scrollbar-thumb {
		background: rgba(15, 23, 42, 0.16);
		border-radius: 999px;
	}
	.admin-nav__list::-webkit-scrollbar-track {
		background: rgba(15, 23, 42, 0.06);
		border-radius: 999px;
	}
}

/* =====================================
  Admin Login
===================================== */

.admin_contents.container {
	max-width: 520px;
	margin: 60px auto;
	padding: 0 16px;
	box-sizing: border-box;
}

.admin_contents.container > h2 {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0.02em;
	color: var(--admin-text, #1f2533);
}

.admin_contents.container .login_form {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 16px;
}

.admin_contents.container .login_form > form > div:first-child {
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 800;
	color: var(--admin-muted, #667085);
}

.admin_contents.container .input-group-text {
	margin-bottom: 3px;
	padding: 0 5px;
	border: none;
	background: none;
	color: var(--admin-muted, #667085);
	font-weight: 900;
	font-size: 13px;
	white-space: nowrap;
}

.admin_contents.container .form-control {
	height: 42px;
	width: 100%;
	padding: 10px 12px;
	border-radius: 12px !important;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: #fff;
	color: var(--admin-text, #1f2533);
	font-weight: 800;
	font-size: 14px;
	box-sizing: border-box;
}

.admin_contents.container .form-control:focus {
	outline: none;
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.admin_contents.container .form-control::placeholder {
	color: #b9b9b9;
}

.admin_contents.container .input-group label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
}

.admin_contents.container .input-group label input[type="checkbox"] {
	transform: translateY(1px);
}

.admin_contents.container .btn.btn-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 18px;
	border-radius: 12px;
	border: 0;
	cursor: pointer;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	box-shadow: 0 10px 22px rgba(59, 130, 246, 0.22);
	transition:
		transform 0.08s ease,
		filter 0.15s ease;
}

.admin_contents.container .btn.btn-info:hover {
	filter: brightness(1.02);
}

.admin_contents.container .btn.btn-info:active {
	transform: translateY(1px);
}

.admin_contents.container ul {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	list-style: disc;
	list-style-position: inside;
	border: 1px solid rgba(239, 68, 68, 0.25);
	background: rgba(239, 68, 68, 0.08);
	color: #b91c1c;
	font-weight: 800;
}

.admin_contents.container ul li {
	margin: 4px 0;
}

.admin_contents.container form > div:empty {
	display: none;
}

@media (max-width: 420px) {
	.admin_contents.container {
		margin: 32px auto;
	}

	.admin_contents.container .input-group-text {
		min-width: 92px;
	}
}

/* HOME */
/* ============================================ */
#home {
	max-width: 1280px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

/* cast-list */
/* ============================================ */
#cast {
	max-width: 1200px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#cast > div:nth-of-type(2) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 12px;
	padding: 12px 14px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
}

#cast > div:nth-of-type(2) > span:first-child {
	font-weight: 800;
	color: var(--admin-text, #1f2533);
	margin-right: auto;
}

#cast > div:nth-of-type(2) a {
	min-width: 110px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	box-shadow: 0 10px 22px rgba(59, 130, 246, 0.22);
	transition:
		transform 0.08s ease,
		filter 0.15s ease;
	white-space: nowrap;
}

#cast > div:nth-of-type(2) a:hover {
	filter: brightness(1.02);
	text-decoration: none;
}

#cast > div:nth-of-type(2) a:active {
	transform: translateY(1px);
}

#cast > div:nth-of-type(2) button {
	min-width: 110px;
	text-align: center;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	border-radius: 12px;
	padding: 9px 12px;
	font-weight: 900;
	font-size: 14px;
	transition:
		background 0.15s ease,
		transform 0.08s ease,
		opacity 0.15s ease;
	white-space: nowrap;
}

#cast > div:nth-of-type(2) button:hover {
	background: rgba(15, 23, 42, 0.06);
}

#cast > div:nth-of-type(2) button:active {
	transform: translateY(1px);
}

#cast > div:nth-of-type(2) .delete_count button {
	background: rgba(225, 29, 72, 0.1);
	border-color: rgba(225, 29, 72, 0.22);
}

#cast > div:nth-of-type(2) .delete_count button span {
	font-weight: 1000;
}

#cast > div:nth-of-type(2) button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

#cast .cast_box .delete_box,
#cast .move_count,
#cast .move_cancel,
#cast .delete_count,
#cast .delete_cancel {
	display: none;
}

#cast .cast_list {
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}

#cast .cast_box {
	position: relative;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	overflow: hidden;
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 7px;
}

#cast .cast_box.role_type_event {
	background: rgb(185, 235, 211);
}

#cast .cast_box.role_type_dammy {
	background: rgb(223, 185, 235);
}

#cast .cast_box.passive {
	background: rgb(180, 180, 180);
}

#cast .cast_box .images {
	aspect-ratio: 3 / 4;
	background: rgba(15, 23, 42, 0.04);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

#cast .cast_box .images img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

#cast .cast_box .name {
	padding: 5px;
}

#cast .cast_box .name span {
	display: block;
	font-weight: 1000;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

#cast .cast_box .edit {
	padding: 5px 0;
	display: flex;
	gap: 8px;
	align-items: center;
}

#cast .cast_box .edit > span {
	flex: 1 1 auto;
}

#cast .cast_box .edit a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 5px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	text-decoration: none;
	font-weight: 900;
	font-size: 13px;
	transition:
		background 0.15s ease,
		transform 0.08s ease;
}

#cast .cast_box .edit a:hover {
	background: rgba(15, 23, 42, 0.06);
	text-decoration: none;
}

#cast .cast_box .edit a:active {
	transform: translateY(1px);
}

#cast .cast_box .edit .visible button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 5px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	font-weight: 900;
	font-size: 13px;
	transition:
		background 0.15s ease,
		transform 0.08s ease;
}

#cast .cast_box .edit .visible button:hover {
	background: rgba(15, 23, 42, 0.06);
}

#cast .cast_box .edit .visible button:active {
	transform: translateY(1px);
}

#cast .cast_box .date {
	color: var(--admin-muted, #667085);
	font-size: 12px;
	font-weight: 800;
}

#cast .cast_box .delete_box {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 3;
}

#cast .cast_box .delete_box label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(6px);
	cursor: pointer;
	user-select: none;
}

#cast .cast_box .delete_box input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--admin-accent, #3b82f6);
}

#cast .cast_box:has(.delete_box input[type="checkbox"]:checked) {
	outline: 3px solid rgba(59, 130, 246, 0.22);
	border-color: rgba(59, 130, 246, 0.35);
}

#cast
	.cast_box:has(.delete_box input[type="checkbox"]:checked)
	.delete_box
	label {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.35);
}

@media (max-width: 1200px) {
	#cast .cast_list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 992px) {
	#cast .cast_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 576px) {
	#cast > div:nth-of-type(2) {
		gap: 8px;
	}
	#cast > div:nth-of-type(2) > span:first-child {
		width: 100%;
		margin-right: 0;
	}
	#cast > div:nth-of-type(2) a,
	#cast > div:nth-of-type(2) button {
		width: 100%;
		justify-content: center;
	}
	#cast .cast_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* cast-detail */
/* ============================================ */
#cast-detail {
	max-width: 1200px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#cast-detail .cast_edit_table {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 14px;
}

#cast-detail .cast_edit_table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

#cast-detail .cast_edit_table tr + tr th,
#cast-detail .cast_edit_table tr + tr td {
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#cast-detail .cast_edit_table th {
	width: 240px;
	padding: 12px 12px;
	vertical-align: top;
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
	background: rgba(15, 23, 42, 0.02);
}

#cast-detail .cast_edit_table td {
	padding: 12px 12px;
	vertical-align: top;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	background: #fff;
}

#cast-detail .cast_edit_table th[colspan="2"] {
	width: auto;
	background: rgba(59, 130, 246, 0.1);
	color: var(--admin-text, #1f2533);
	font-weight: 900;
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#cast-detail .cast_edit_table th span {
	color: #e11d48;
	font-weight: 900;
	margin-left: 6px;
}

#cast-detail input[type="text"],
#cast-detail input[type="number"],
#cast-detail input[type="date"],
#cast-detail select,
#cast-detail textarea {
	width: min(720px, 100%);
	max-width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	padding: 9px 10px;
	background: #fff;
	color: var(--admin-text, #1f2533);
	font-size: 14px;
	line-height: 1.35;
	outline: none;
}

#cast-detail input[type="text"]:focus,
#cast-detail input[type="number"]:focus,
#cast-detail input[type="date"]:focus,
#cast-detail select:focus,
#cast-detail textarea:focus {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#cast-detail select {
	padding-right: 34px;
}

#cast-detail textarea {
	min-height: 140px;
	resize: vertical;
}

#cast-detail input[type="checkbox"],
#cast-detail input[type="radio"] {
	transform: translateY(1px);
}

#cast-detail label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 14px;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
}

#cast-detail .image_box {
	padding-top: 14px;
	padding-bottom: 14px;
}

#cast-detail .image_box .images {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	width: min(900px, 100%);
}

#cast-detail .image_box .image_item {
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

#cast-detail .image_box .image_top {
	position: relative;
	aspect-ratio: 3 / 4;
	background: rgba(15, 23, 42, 0.04);
	overflow: hidden;
}

#cast-detail .image_box .image_top img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#cast-detail .image_box .image_delete {
	position: absolute;
	right: 8px;
	top: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.72);
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	backdrop-filter: blur(6px);
	cursor: pointer;
	user-select: none;
}

#cast-detail .image_box .image_delete:hover {
	background: rgba(225, 29, 72, 0.85);
}

#cast-detail .image_box .image_item > div:last-child {
	padding: 10px 10px;
	border-top: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
}

#cast-detail .image_box .drop {
	width: min(900px, 100%);
}

#cast-detail .image_box .drop span {
	color: var(--admin-text, #1f2533);
	font-weight: 800;
	font-size: 13px;
	display: block;
	margin-bottom: 10px;
}

#cast-detail .image_box .drop input[type="file"] {
	width: 100%;
	max-width: 100%;
	border: 2px dashed #cbcbcb;
	border-radius: 14px;
	padding: 16px 12px;
	background: #fff;
}

#cast-detail .image_box .drop input[type="file"]:hover {
	cursor: pointer;
}

#cast-detail .image_box .drop[hidden],
#cast-detail .image_box .drop.hidden {
	display: none !important;
}

#cast-detail .comment {
	width: min(720px, 100%);
	max-width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

#cast-detail .edit {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#cast-detail .edit button {
	min-width: 110px;
	text-align: center;
	border: 0;
	border-radius: 12px;
	padding: 10px 18px;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	box-shadow: 0 10px 22px rgba(59, 130, 246, 0.22);
	transition:
		transform 0.08s ease,
		filter 0.15s ease;
}

#cast-detail .edit button:hover {
	filter: brightness(1.02);
}

#cast-detail .edit button:active {
	transform: translateY(1px);
}

#cast-detail .admin-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.02);
	cursor: pointer;
	user-select: none;
	font-weight: 700;
}

#cast-detail .admin-check:hover {
	background: rgba(15, 23, 42, 0.06);
}

#cast-detail .admin-check input {
	width: 18px;
	height: 18px;
	accent-color: var(--admin-accent, #3b82f6);
}

@media (max-width: 992px) {
	#cast-detail .cast_edit_table th {
		width: 200px;
	}
	#cast-detail .image_box .images {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	#cast-detail .cast_edit_table {
		padding: 10px;
	}

	#cast-detail .cast_edit_table table,
	#cast-detail .cast_edit_table tbody,
	#cast-detail .cast_edit_table tr,
	#cast-detail .cast_edit_table th,
	#cast-detail .cast_edit_table td {
		display: block;
		width: 100%;
	}

	#cast-detail .cast_edit_table tr + tr th,
	#cast-detail .cast_edit_table tr + tr td {
		border-top: none;
	}

	#cast-detail .cast_edit_table tr {
		border-top: 1px solid var(--admin-border, #e6e8f0);
		padding: 10px 0;
	}

	#cast-detail .cast_edit_table th {
		background: transparent;
		padding: 0 6px 6px;
	}

	#cast-detail .cast_edit_table td {
		padding: 0 6px 6px;
	}

	#cast-detail .image_box .images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#cast-detail .image_box .drop {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* schedule */
/* ============================================ */
#schedule {
	max-width: 1600px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#schedule > div:nth-of-type(2) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 14px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
}

#schedule .find_name {
	flex: 1 1 240px;
	max-width: 360px;
}

#schedule .find_name input {
	width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	padding: 10px 12px;
	font-weight: 700;
	background: #fff;
}

#schedule .display_count select {
	min-width: 120px;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	padding: 10px 12px;
	font-weight: 800;
	background: #fff;
}

#schedule .page_navi {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

#schedule .page_navi .prev,
#schedule .page_navi .next {
	padding: 9px 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-muted, #667085);
	font-weight: 900;
	user-select: none;
}

#schedule .page_navi .prev.active,
#schedule .page_navi .next.active {
	cursor: pointer;
	color: var(--admin-text, #1f2533);
}

#schedule .page_navi .prev.active:hover,
#schedule .page_navi .next.active:hover {
	background: rgba(15, 23, 42, 0.06);
}

#schedule .page_navi .page ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#schedule .page_navi .page li {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	font-weight: 900;
	color: var(--admin-text, #1f2533);
	cursor: pointer;
	user-select: none;
}

#schedule .page_navi .page li:hover {
	background: rgba(15, 23, 42, 0.06);
}

#schedule .page_navi .page li.active {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.25);
	color: var(--admin-accent, #3b82f6);
	cursor: default;
}

#schedule .week_navi_box {
	margin-top: 12px;
	display: flex;
	justify-content: center;
}

#schedule .week_navi {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 999px;
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
}

#schedule .week_navi span {
	padding: 9px 14px;
	border-radius: 999px;
	font-weight: 1000;
	color: var(--admin-text, #1f2533);
	user-select: none;
	border: 1px solid transparent;
}

#schedule .week_navi .prev_week,
#schedule .week_navi .next_week {
	cursor: pointer;
	background: rgba(15, 23, 42, 0.02);
	border-color: var(--admin-border, #e6e8f0);
}

#schedule .week_navi .prev_week:hover,
#schedule .week_navi .next_week:hover {
	background: rgba(15, 23, 42, 0.06);
}

#schedule .week_navi .this_week {
	opacity: 0.55;
}

#schedule .week_navi .this_week.active {
	opacity: 1;
	cursor: pointer;
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.25);
	color: var(--admin-accent, #3b82f6);
}

/* ===========================
   schedule_list (ここから作り直し)
=========================== */

/* 外枠（角丸・影・枠線）※ overflowは付けない（stickyのため） */
#schedule .schedule_list {
	position: relative;
	margin-top: 14px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
}

/* スクロールは「window」に任せる（＝ここではスクロールさせない） */
#schedule .schedule_scroller {
	overflow: visible;
}

.schedule_scroller table tbody tr:nth-of-type(odd) th,
.schedule_scroller table tbody tr:nth-of-type(odd) td {
	background-color: #f5f5f5 !important;
}

/* テーブル基本 */
#schedule .schedule_scroller table {
	width: max-content; /* 列数が多い時に横に広がる */
	min-width: 100%; /* 少ない時は枠いっぱい */
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

#schedule .schedule_scroller thead th {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #fff;
	border-bottom: 1px solid var(--admin-border, #e6e8f0);
	padding: 10px 10px;
	font-weight: 1000;
	font-size: 12px;
	color: var(--admin-text, #1f2533);
	text-align: center;
	white-space: nowrap;
	vertical-align: bottom;
}

#schedule .schedule_scroller thead th:first-child,
#schedule .schedule_scroller tbody th.cast_header {
	width: 150px;
	min-width: 150px;
	max-width: 150px;
}

#schedule .schedule_scroller thead th:not(:first-child),
#schedule .schedule_scroller tbody td.schedule_input {
	width: 200px;
	min-width: 200px;
	max-width: 200px;
}

#schedule .schedule_scroller tbody th.cast_header {
	vertical-align: top;
	padding: 10px 10px;
	background: #fff;
	border-right: 1px solid var(--admin-border, #e6e8f0);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

#schedule .schedule_scroller tbody th.cast_header .images {
	width: 86px;
	height: 114px;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(15, 23, 42, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
}

#schedule .schedule_scroller tbody th.cast_header .images img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

#schedule .schedule_scroller tbody th.cast_header .name {
	max-width: 130px;
	font-weight: 1000;
	font-size: 13px;
	color: var(--admin-text, #1f2533);
	text-align: center;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#schedule .schedule_scroller tbody td.schedule_input {
	padding: 10px;
	vertical-align: top;
	background: #fff;
}

/* ===========================
   schedule_input (中身整形)
=========================== */

#schedule .schedule_scroller tbody td.schedule_input {
	padding: 12px;
	vertical-align: top;
}

#schedule .schedule_scroller td.schedule_input .time {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto; /* start | ～ | end | up */
	gap: 3px;
	align-items: center;
}

#schedule .schedule_scroller td.schedule_input .time > div:nth-child(2) {
	font-weight: 900;
	color: var(--admin-muted, #667085);
}

#schedule .schedule_scroller td.schedule_input .time input[type="text"] {
	width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	padding: 5px;
	background: #fff;
	font-weight: 900;
	font-size: 13px;
	text-align: center;
	outline: none;
}

#schedule .schedule_scroller td.schedule_input .time input[type="text"]:focus {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#schedule .schedule_scroller td.schedule_input .time .up {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 5px 3px;
	border-radius: 10px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	white-space: nowrap;
}

#schedule .schedule_scroller td.schedule_input .time .up p {
	margin: 0;
	font-weight: 900;
	font-size: 12px;
	color: var(--admin-text, #1f2533);
}

#schedule
	.schedule_scroller
	td.schedule_input
	.time
	.up
	input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--admin-accent, #3b82f6);
}

#schedule .schedule_scroller td.schedule_input .comment {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 40px 1fr; /* type | body */
	gap: 3px;
	align-items: start;
}

#schedule .schedule_scroller td.schedule_input .comment .type {
	width: 35px;
	height: 35px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	display: flex;
	align-items: center;
	justify-content: center;
}

#schedule .schedule_scroller td.schedule_input .comment .type button {
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--admin-text, #1f2533);
	cursor: pointer;
}

#schedule .schedule_scroller td.schedule_input .comment select,
#schedule .schedule_scroller td.schedule_input .comment input[type="text"] {
	width: 100%;
	height: 35px;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	padding: 0 12px;
	background: #fff;
	font-weight: 800;
	font-size: 13px;
	outline: none;
}

#schedule .schedule_scroller td.schedule_input .comment select:focus,
#schedule
	.schedule_scroller
	td.schedule_input
	.comment
	input[type="text"]:focus {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#schedule .schedule_scroller td.schedule_input .edit {
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* copy / paste / destroy */
	gap: 8px;
}

#schedule .schedule_scroller td.schedule_input .edit button {
	height: 36px;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	font-weight: 900;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

#schedule .schedule_scroller td.schedule_input .edit button:hover {
	background: rgba(15, 23, 42, 0.06);
}

#schedule .schedule_scroller td.schedule_input .edit button:active {
	transform: translateY(1px);
}

@media (max-width: 576px) {
	#schedule .schedule_scroller td.schedule_input .time {
		grid-template-columns: 1fr auto 1fr; /* upは下段へ */
	}

	#schedule .schedule_scroller td.schedule_input .time .up {
		grid-column: 1 / -1;
		justify-content: center;
	}
}

#schedule .schedule_scroller tbody tr + tr th.cast_header,
#schedule .schedule_scroller tbody tr + tr td {
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#schedule .schedule_scroller thead tr th:first-child {
	border-top-left-radius: var(--admin-radius, 14px);
	background: #fff;
}
#schedule .schedule_scroller thead tr th:last-child {
	border-top-right-radius: var(--admin-radius, 14px);
}
#schedule .schedule_scroller tbody tr:last-child th.cast_header {
	border-bottom-left-radius: var(--admin-radius, 14px);
}
#schedule .schedule_scroller tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--admin-radius, 14px);
}

#schedule .schedule_scroller tbody tr.cast_box.passive th.cast_header {
	background: rgb(180, 180, 180)!important;
}
#schedule .schedule_scroller tbody tr.cast_box.role_type_event th.cast_header {
	background: rgb(185, 235, 211)!important;
}
#schedule .schedule_scroller tbody tr.cast_box.role_type_dammy th.cast_header {
	background: rgb(223, 185, 235)!important;
}

@media (max-width: 768px) {
	#schedule .schedule_scroller thead th:first-child,
	#schedule .schedule_scroller tbody th.cast_header {
		width: 130px;
		min-width: 130px;
		max-width: 130px;
	}

	#schedule .schedule_scroller thead th:not(:first-child),
	#schedule .schedule_scroller tbody td.schedule_input {
		width: 200px;
		min-width: 200px;
		max-width: 200px;
	}

	#schedule .schedule_scroller tbody th.cast_header .images {
		width: 76px;
		height: 100px;
	}
}

#schedule .pop_message,
#schedule .pop_message_paste {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.85);
	color: #fff;
	font-weight: 1000;
	font-size: 13px;
	z-index: 999;
	opacity: 0;
	pointer-events: none;
}

#schedule .pop_message,
#schedule .pop_message_paste {
	display: none;
	position: absolute;
	width: 120px;
	height: 30px;
	line-height: 30px;
	background-color: #4169e1;
	color: #fff;
	top: 20px;
	left: 0px;
	margin: auto;
	text-align: center;
	border-radius: 5px;
}

#schedule .pop_message.is-show,
#schedule .pop_message_paste.is-show {
	opacity: 1;
}

/* ===========================
  time-list（時刻候補ドロップダウン）
=========================== */

#schedule .schedule_list {
	position: relative;
}

#schedule .time-list {
	display: none;
	position: absolute;
	width: 140px;
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(16, 24, 40, 0.14);
	z-index: 200;
}

#schedule .time-list li {
	padding: 8px 12px;
	font-weight: 800;
	font-size: 13px;
	line-height: 1;
	color: var(--admin-text, #1f2533);
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

#schedule .time-list li:hover {
	background: rgba(59, 130, 246, 0.1);
}

#schedule .time-list li[data-time=""] {
	display: none;
}

@media (max-width: 992px) {
	#schedule > div:nth-of-type(2) {
		gap: 8px;
	}

	#schedule .page_navi {
		width: 100%;
		justify-content: flex-start;
		margin-left: 0;
	}

	#schedule .schedule_list tbody th.cast_header {
		width: 170px;
	}
}

@media (max-width: 576px) {
	#schedule .find_name {
		max-width: none;
		width: 100%;
	}

	#schedule .display_count {
		width: 100%;
	}

	#schedule .display_count select {
		width: 100%;
	}

	#schedule .page_navi {
		overflow-x: auto;
		padding-bottom: 4px;
	}

	#schedule td.schedule_input .time {
		grid-template-columns: 1fr auto 1fr;
	}

	#schedule td.schedule_input .time .up {
		grid-column: 1 / -1;
		margin-left: 0;
		justify-content: center;
	}
}

#schedule .page_navi .prev.active:hover,
#schedule .page_navi .next.active:hover,
#schedule .page_navi .page li:hover {
	background: #f5f5f5;
	cursor: pointer;
}

#schedule .page_navi .page li.active {
	background: #f5f5f5;
}

#schedule .page_navi .page li.active:hover {
	cursor: auto;
}

#schedule .week_navi .this_week.active:hover,
#schedule .week_navi .prev_week:hover,
#schedule .week_navi .next_week:hover {
	background: #f5f5f5;
	cursor: pointer;
}

/* ==========================
  画面が狭い時だけ：ページ全体スクロール + 日付ヘッダー追従
========================== */
@media (max-width: 1200px) {
	/* sticky を殺す overflow を解除 */
	#schedule .schedule_list {
		overflow: visible;
	}

	/* 横スクロールを body 側に任せる */
	#schedule .schedule_scroller {
		overflow: visible;
	}

	/* 日付ヘッダーを追従 */
	#schedule .schedule_scroller thead th {
		position: sticky;
		top: 0;
		z-index: 20;
		background: #fff;
	}

	/* 左上セル＆左列も固定したい場合（不要なら消してOK） */
	#schedule .schedule_scroller thead th:first-child {
		position: sticky;
		left: 0;
		z-index: 30;
		background: #fff;
	}

	#schedule .schedule_scroller tbody th.cast_header {
		position: sticky;
		left: 0;
		z-index: 10;
		background: #fff;
	}
}

/* schedule-comment */
/* ============================================ */

#schedule-comment {
	max-width: 1200px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#schedule-comment .comment_area {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 14px;
	align-items: start;
}

#schedule-comment .comment_list {
	width: 500px;
	flex-wrap: wrap;
	min-height: 100px;
	line-height: 30px;
	margin-right: 30px;
	padding: 12px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
}

#schedule-comment .comment_item {
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 14px;
	background: rgba(15, 23, 42, 0.02);
	padding: 10px 12px;
	margin-bottom: 10px;
	cursor: grab;
	user-select: none;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		transform 0.08s ease;
}

#schedule-comment .comment_item:active {
	cursor: grabbing;
}

#schedule-comment .comment_item:hover {
	background: rgba(15, 23, 42, 0.06);
}

#schedule-comment .comment_item:last-child {
	margin-bottom: 0;
}

#schedule-comment .comment_item .title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

#schedule-comment .comment_item .title span:first-child {
	font-weight: 900;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	line-height: 1.3;
}

#schedule-comment .comment_item .delete {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(6px);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.15s ease,
		transform 0.08s ease,
		border-color 0.15s ease;
	cursor: pointer;
}

#schedule-comment .comment_item .delete:hover {
	background: rgba(225, 29, 72, 0.1);
	border-color: rgba(225, 29, 72, 0.22);
}

#schedule-comment .comment_item .delete:active {
	transform: translateY(1px);
}

#schedule-comment .comment_area {
	display: flex;
}

#schedule-comment .comment_item {
	border-radius: 6px;
}

#schedule-comment .comment_item .title {
	display: flex;
	justify-content: space-between;
	padding: 2px 5px;
}

#schedule-comment .comment_item .delete {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(255, 255, 255, 0.9);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		transform 0.08s ease;
}

#schedule-comment .comment_item .delete:hover {
	background: rgba(225, 29, 72, 0.12);
	border-color: rgba(225, 29, 72, 0.35);
}

#schedule-comment .comment_item .delete:active {
	transform: translateY(1px);
}

/* × マーク（線2本で描画） */
#schedule-comment .comment_item .delete::before,
#schedule-comment .comment_item .delete::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 2px;
	background: #e11d48;
	border-radius: 2px;
}

#schedule-comment .comment_item .delete::before {
	transform: rotate(45deg);
}

#schedule-comment .comment_item .delete::after {
	transform: rotate(-45deg);
}

#schedule-comment .comment_edit {
	width: 500px;
	position: sticky;
	top: 12px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 12px;
}

#schedule-comment .comment_edit > div:first-child {
	font-weight: 1000;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	margin-bottom: 10px;
}

#schedule-comment .comment_edit .add {
	display: flex;
	gap: 10px;
	align-items: center;
}

#schedule-comment .comment_edit input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	padding: 10px 12px;
	font-weight: 700;
	background: #fff;
}

#schedule-comment .comment_edit input[type="text"]:focus {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#schedule-comment .comment_edit button {
	min-width: 110px;
	text-align: center;
	flex: 0 0 auto;
	border: 0;
	border-radius: 12px;
	padding: 10px 14px;
	font-weight: 1000;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	box-shadow: 0 10px 22px rgba(59, 130, 246, 0.22);
	transition:
		transform 0.08s ease,
		filter 0.15s ease;
	white-space: nowrap;
}

#schedule-comment .comment_edit button:hover {
	filter: brightness(1.02);
}

#schedule-comment .comment_edit button:active {
	transform: translateY(1px);
}

#schedule-comment .sortable_area .ui-sortable-placeholder {
	border: 2px dashed rgba(59, 130, 246, 0.35);
	background: rgba(59, 130, 246, 0.08);
	border-radius: 14px;
	visibility: visible !important;
	min-height: 48px;
	margin-bottom: 10px;
}

#schedule-comment .sortable_area .ui-sortable-helper {
	box-shadow: 0 18px 44px rgba(16, 24, 40, 0.18);
	transform: rotate(0.2deg);
}

@media (max-width: 992px) {
	#schedule-comment .comment_area {
		grid-template-columns: 1fr;
	}
	#schedule-comment .comment_edit {
		position: static;
	}
}

/* media-banner */
/* ============================================ */
/* #media-banner .banner_area{
  display: flex;
}

#media-banner .banner_list{
  width: 70%;
}

#media-banner .banner_edit{
  width: 30%;
}

#media-banner .image_item{
  position: relative;
}

#media-banner .image_item img{
  width: auto;
  max-width: 100%;
  cursor: grab;
}

#media-banner .image_item .image_delete{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  display: none;
  cursor: pointer;
  color: #ff0000;
  background: rgba( 255, 255, 255, 0.7 );
}

#media-banner .banner_edit div.drop{
  position: relative;
  border: 1px dashed #000;
  border-radius: 10px;
  max-width: 100%;
  min-width: 180px;
  min-height: 240px;
}

#media-banner .banner_edit div.drop:hover{
  background: rgba( 255, 255, 240, 0.5 );
}

#media-banner .banner_edit div.drop input{
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#media-banner .banner_edit div.drop input::file-selector-button{
  width: 0;
  padding: 0;
  border: none;
}

#media-banner [class^=group_],
#media-banner .not_set{
  display: flex;
  flex-wrap: wrap;
  min-height: 100px;
  border: 1px solid #000;
  border-radius: 8px;
  padding: 15px;
}

#media-banner .image_item .switch{
  font-size: 20px;
  font-weight: bold;
  height: 30px;
  color: #000;
  position: relative;
}

#media-banner .image_item .switch::before{
  position: absolute;
  font-family: 'Font Awesome 5 Free';
  content: '\f13a';
  font-weight: 900;
  right: 10px;
  transition: 0.3s;
}

#media-banner .image_item .switch.open::before{
  transform: rotate(180deg);
} */

/* profile */
/* ============================================ */
#profile {
	max-width: 1600px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#profile .profile_area {
	display: grid;
	grid-template-columns: 1fr 360px 420px;
	gap: 14px;
	align-items: start;
}

/* 左：グループ1〜5 */
#profile .profile_area > .profile_list:first-child {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 12px;

	display: grid;
	gap: 12px;
}

#profile .profile_area > .profile_list:nth-child(2) {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 12px;
}

#profile .profile_edit {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 12px;
	display: grid;
	gap: 12px;
	/* position: sticky;
	top: 14px; */
}

#profile .profile_list > p,
#profile .profile_edit > p {
	margin: 0 0 5px;
	font-weight: 1000;
	font-size: 13px;
	color: var(--admin-text, #1f2533);
}

#profile .profile_area > .profile_list:first-child > p {
	margin-top: 2px;
}

#profile .sortable_area {
	min-height: 50px;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	display: grid;
	gap: 8px;
}

/* グループの薄い色分け */
#profile .group_1,
#profile .group_6 {
	background: rgba(59, 130, 246, 0.06);
}
#profile .group_2,
#profile .group_7 {
	background: rgba(16, 185, 129, 0.06);
}
#profile .group_3,
#profile .group_8 {
	background: rgba(245, 158, 11, 0.06);
}
#profile .group_4,
#profile .group_9 {
	background: rgba(168, 85, 247, 0.06);
}
#profile .group_5,
#profile .group_10 {
	background: rgba(239, 68, 68, 0.06);
}

#profile .sortable_area.is-over {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

#profile .profile_item {
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
	overflow: hidden;
}

#profile .profile_item .title {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 48px 10px 12px;
	font-size: 13px;
	font-weight: 1000;
	color: var(--admin-text, #1f2533);
	user-select: none;
}

#profile .profile_item .title:hover {
	cursor: grab;
}

#profile .profile_item .switch {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#profile .profile_item .switch::before {
	font-family: "Font Awesome 5 Free";
	content: "\f13a";
	font-weight: 900;
	font-size: 18px;
	color: var(--admin-muted, #667085);
	transition: transform 0.18s ease;
}

#profile .profile_item .switch.open::before {
	transform: rotate(180deg);
}

#profile .profile_item .detail {
	display: none;
	padding: 12px;
	border-top: 1px dashed var(--admin-border, #e6e8f0);
	background: #f9fafb;
}

#profile .profile_item .switch.open ~ .detail {
	display: block;
}

#profile .profile_item:hover {
	border-color: rgba(59, 130, 246, 0.28);
	box-shadow: 0 10px 22px rgba(16, 24, 40, 0.1);
}

#profile .profile_item .detail .delete {
	margin-top: 5px;
}

#profile .profile_item .detail > div {
	background: #fff;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	padding: 10px 12px;
}

#profile .profile_item .detail > div:not(.member_select):not(.delete) {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	align-items: center;
}

#profile .profile_item .detail > div > span,
#profile .profile_item .detail .member_select > div > span {
	font-size: 12px;
	font-weight: 900;
	color: var(--admin-muted, #667085);
	white-space: nowrap;
}

#profile .profile_item .detail select,
#profile .profile_item .detail input[type="text"] {
	width: 100%;
	height: 38px;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	padding: 0 12px;
	background: #fff;
	font-weight: 800;
	font-size: 13px;
	outline: none;
	color: var(--admin-text, #1f2533);
}

#profile .profile_item .detail select:focus,
#profile .profile_item .detail input[type="text"]:focus {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#profile .profile_item .detail .member_select {
	background: rgba(15, 23, 42, 0.02);
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: 12px;
	padding: 10px;
	display: grid;
	gap: 8px;
	margin-top: 5px;
}

#profile .profile_item .detail .member_select > div {
	background: #fff;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	padding: 10px 12px;
}

#profile .profile_item .detail .member_select > div:has(> span) {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	align-items: center;
}

#profile .profile_item .detail .member_select > div:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

#profile .profile_item .detail .member_select label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 900;
	font-size: 12px;
	color: var(--admin-muted, #667085);
	white-space: nowrap;
}

#profile .profile_item .detail .member_select input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--admin-accent, #3b82f6);
}

#profile .profile_item .detail .member_select > div:last-child {
	font-weight: 900;
	font-size: 12px;
	color: var(--admin-muted, #667085);
}

#profile .profile_item .detail .member_select > div:last-child select {
	width: 220px;
	max-width: 100%;
}

#profile .profile_item .detail .delete {
	background: transparent;
	border: 0;
	padding: 0;
	text-align: right;
}

#profile .profile_item .detail .delete button {
	width: 100%;
	max-width: 100px;
	height: 40px;
	border-radius: 12px;
	border: 1px solid rgba(239, 68, 68, 0.35);
	background: rgba(239, 68, 68, 0.1);
	font-weight: 1000;
	cursor: pointer;
	text-align: center;
	color: var(--admin-text, #1f2533);
}

#profile .profile_item .detail .delete button:hover {
	background: rgba(239, 68, 68, 0.16);
}

@media (max-width: 576px) {
	#profile .profile_item .detail > div:not(.member_select):not(.delete) {
		grid-template-columns: 1fr;
	}

	#profile .profile_item .detail .member_select > div:has(> span) {
		grid-template-columns: 1fr;
	}

	#profile .profile_item .detail .member_select > div:last-child select {
		width: 100%;
	}
}

#profile .profile_edit .create,
#profile .profile_edit .member_create {
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 14px;
	padding: 12px;
	background: #fff;
	display: grid;
	gap: 10px;
}

#profile .profile_edit .create > div:first-child,
#profile .profile_edit .member_create > div:first-child {
	font-weight: 1000;
	color: var(--admin-text, #1f2533);
}

#profile .profile_edit .profile_grid {
	display: grid;
	/* grid-template-columns: 110px 1fr; */
	gap: 10px;
	align-items: center;
}

#profile .profile_edit .member_detail_add {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	align-items: flex-start;
}

/* #profile .profile_edit .create > div:not(:first-child),
#profile .profile_edit .member_create > div:not(:first-child){
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	align-items: center;
} */

#profile .profile_edit span {
	font-weight: 900;
	font-size: 13px;
	color: var(--admin-muted, #667085);
}

#profile .profile_edit input[type="text"],
#profile .profile_edit select {
	width: 100%;
	height: 40px;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	padding: 0 12px;
	font-weight: 800;
	font-size: 13px;
	background: #fff;
	outline: none;
}

#profile .profile_edit input[type="text"]:focus,
#profile .profile_edit select:focus {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#profile .profile_edit button {
	width: 100%;
	max-width: 110px;
	height: 40px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	font-weight: 1000;
	color: var(--admin-text, #1f2533);
	cursor: pointer;
	text-align: center;
	margin-left: auto;
}

#profile .profile_edit .add {
	text-align: right;
}

#profile .profile_edit .add button {
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	margin-left: auto;
}

#profile .profile_edit button:active {
	transform: translateY(1px);
}

#profile .profile_edit .member_title {
	align-items: start;
}

#profile .profile_edit .member_title .edit {
	display: none;
}

#profile .profile_edit .member_title .edit .edit_buttons {
	text-align: right;
}

#profile .profile_edit .member_title .edit .delete {
	border-color: rgba(239, 68, 68, 0.35);
	background: rgba(239, 68, 68, 0.1);
}

#profile .profile_edit .member_detail_list ul {
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.02);
	min-height: 80px;
	display: grid;
	gap: 6px;
}

#profile .profile_edit .member_detail_list li {
	display: grid;
	background: #fff;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	padding: 8px 10px;
	font-weight: 900;
	font-size: 13px;
	color: var(--admin-text, #1f2533);
	cursor: grab;
}

#profile .profile_edit .member_detail_list li span {
	display: block;
	margin-bottom: 3px;
	color: var(--admin-text, #1f2533);
	padding: 5px 10px;
}

#profile .profile_edit .member_detail_list li button {
	border-color: rgba(239, 68, 68, 0.35);
	background: rgba(239, 68, 68, 0.1);
}

@media (max-width: 1400px) {
	#profile .profile_area {
		grid-template-columns: 1fr 320px 380px;
	}
}

@media (max-width: 1100px) {
	#profile .profile_area {
		grid-template-columns: 1fr;
	}
	#profile .profile_edit {
		position: static;
	}
}

@media (max-width: 576px) {
	#profile .profile_edit .create > div:not(:first-child),
	#profile .profile_edit .member_create > div:not(:first-child) {
		grid-template-columns: 1fr;
	}
	#profile .profile_edit span {
		color: var(--admin-text, #1f2533);
	}
}

/* topics */
/* ============================================ */
#topics {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
	box-sizing: border-box;
}

/* =====================================
   Topics (match Schedule UI parts)
===================================== */

/* 上部操作エリア（scheduleの2段目カードと同じ） */
#topics .topics_toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 14px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
}

/* 新規登録ボタン：カード上に置く想定（HTML変えないなら後述の代替もあり） */
#topics .topics_toolbar .create a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(59, 130, 246, 0.25);
	background: rgba(59, 130, 246, 0.12);
	color: var(--admin-accent, #3b82f6);
	font-weight: 900;
	text-decoration: none;
	user-select: none;
}

#topics .topics_toolbar .create a:hover {
	background: rgba(59, 130, 246, 0.18);
}

#topics .page_navi_wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 14px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
}

#topics .page_navi {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

#topics .page_navi .prev,
#topics .page_navi .next {
	padding: 9px 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-muted, #667085);
	font-weight: 900;
	user-select: none;
}

#topics .page_navi .prev.active,
#topics .page_navi .next.active {
	cursor: pointer;
	color: var(--admin-text, #1f2533);
}

#topics .page_navi .prev.active:hover,
#topics .page_navi .next.active:hover {
	background: rgba(15, 23, 42, 0.06);
}

#topics .page_navi .page ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#topics .page_navi .page li {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	font-weight: 900;
	color: var(--admin-text, #1f2533);
	cursor: pointer;
	user-select: none;
}

#topics .page_navi .page li:hover {
	background: rgba(15, 23, 42, 0.06);
}

#topics .page_navi .page li.active {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.25);
	color: var(--admin-accent, #3b82f6);
	cursor: default;
}

#topics .page_navi_wrap .register a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	transition:
		transform 0.08s ease,
		filter 0.15s ease;
	white-space: nowrap;
}

#topics .page_navi_wrap .register a:hover {
	filter: brightness(1.02);
	text-decoration: none;
}

#topics .page_navi_wrap .register a:active {
	transform: translateY(1px);
}

#topics .topics_list {
	margin-top: 12px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	overflow: hidden;
}

#topics .topics_list table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed; /* 列幅を指定通りに効かせる */
}

/* 列幅（thとtd両方に効かせる） */
#topics .topics_list th:nth-child(1),
#topics .topics_list td:nth-child(1) {
	width: 180px; /* 掲載開始日：日付+時間の想定 */
	white-space: nowrap;
}

#topics .topics_list th:nth-child(2),
#topics .topics_list td:nth-child(2) {
	width: 180px; /* 掲載終了日：日付+時間の想定 */
	white-space: nowrap;
}

#topics .topics_list th:nth-child(4),
#topics .topics_list td:nth-child(4) {
	width: 220px; /* 編集/削除：ボタン2つ分 */
	white-space: nowrap;
}

/* タイトル（残り幅を使う / 折り返しOK） */
#topics .topics_list th:nth-child(3),
#topics .topics_list td:nth-child(3) {
	width: auto;
	white-space: normal;
	word-break: break-word; /* 長い英数字も折る */
	overflow-wrap: anywhere; /* さらに安全 */
}

#topics .topics_list thead th {
	padding: 12px 14px;
	text-align: left;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 900;
	background: rgba(15, 23, 42, 0.02);
	border-bottom: 1px solid var(--admin-border, #e6e8f0);
}

#topics .topics_list tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--admin-border, #e6e8f0);
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	vertical-align: middle;
}

#topics .topics_list tbody tr.passive {
	background: rgb(180, 180, 180);
}

#topics .topics_list td:last-child {
	white-space: nowrap;
	text-align: right;
}

#topics .topics_list td:last-child > span {
	display: inline-flex;
	margin-left: 10px;
}

#topics .topics_list td:last-child a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	font-weight: 900;
	text-decoration: none;
}

#topics .topics_list td:last-child a:hover {
	background: rgba(15, 23, 42, 0.06);
}

/* 削除ボタン（赤系） */
#topics .topics_list td:last-child .delete button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid rgba(239, 68, 68, 0.25);
	background: rgba(239, 68, 68, 0.08);
	/* color: #ef4444; */
	font-weight: 900;
	cursor: pointer;
}

#topics .topics_list td:last-child .delete button:hover {
	background: rgba(239, 68, 68, 0.12);
}

/* news */
/* ============================================ */
#news {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
	box-sizing: border-box;
}

#news .page_navi_wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 14px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
}

#news .page_navi {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

#news .page_navi .prev,
#news .page_navi .next {
	padding: 9px 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-muted, #667085);
	font-weight: 900;
	user-select: none;
}

#news .page_navi .prev.active,
#news .page_navi .next.active {
	cursor: pointer;
	color: var(--admin-text, #1f2533);
}

#news .page_navi .prev.active:hover,
#news .page_navi .next.active:hover {
	background: rgba(15, 23, 42, 0.06);
}

#news .page_navi .page ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#news .page_navi .page li {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	font-weight: 900;
	color: var(--admin-text, #1f2533);
	cursor: pointer;
	user-select: none;
}

#news .page_navi .page li:hover {
	background: rgba(15, 23, 42, 0.06);
}

#news .page_navi .page li.active {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.25);
	color: var(--admin-accent, #3b82f6);
	cursor: default;
}

#news .page_navi_wrap .register a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	box-shadow: 0 10px 22px rgba(59, 130, 246, 0.22);
	transition:
		transform 0.08s ease,
		filter 0.15s ease;
	white-space: nowrap;
}

#news .page_navi_wrap .register a:hover {
	filter: brightness(1.02);
	text-decoration: none;
}

#news .page_navi_wrap .register a:active {
	transform: translateY(1px);
}

#news .news_list {
	margin-top: 12px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	overflow: hidden;
}

#news .news_list table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

/* 列幅（thとtd両方に効かせる） */
#news .news_list th:nth-child(1),
#news .news_list td:nth-child(1) {
	width: 180px; /* 掲載開始日：日付+時間の想定 */
	white-space: nowrap;
}

#news .news_list th:nth-child(2),
#news .news_list td:nth-child(2) {
	width: 180px; /* 掲載終了日：日付+時間の想定 */
	white-space: nowrap;
}

#news .news_list th:nth-child(4),
#news .news_list td:nth-child(4) {
	width: 220px; /* 編集/削除：ボタン2つ分 */
	white-space: nowrap;
}

/* タイトル（残り幅を使う / 折り返しOK） */
#news .news_list th:nth-child(3),
#news .news_list td:nth-child(3) {
	width: auto;
	white-space: normal;
	word-break: break-word; /* 長い英数字も折る */
	overflow-wrap: anywhere; /* さらに安全 */
}

#news .news_list thead th {
	padding: 12px 14px;
	text-align: left;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 900;
	background: rgba(15, 23, 42, 0.02);
	border-bottom: 1px solid var(--admin-border, #e6e8f0);
}

#news .news_list tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--admin-border, #e6e8f0);
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	vertical-align: middle;
}

#news .news_list tbody tr.passive {
	background: rgb(180, 180, 180);
}

#news .news_list td:last-child {
	white-space: nowrap;
	text-align: right;
}

#news .news_list td:last-child > span {
	display: inline-flex;
	margin-left: 10px;
}

#news .news_list td:last-child a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	font-weight: 900;
	text-decoration: none;
}

#news .news_list td:last-child a:hover {
	background: rgba(15, 23, 42, 0.06);
}

/* 削除ボタン（赤系） */
#news .news_list td:last-child .delete button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid rgba(239, 68, 68, 0.25);
	background: rgba(239, 68, 68, 0.08);
	/* color: #ef4444; */
	font-weight: 900;
	cursor: pointer;
}

#news .news_list td:last-child .delete button:hover {
	background: rgba(239, 68, 68, 0.12);
}

/* =====================================
  Topics Detail (match Cast Detail)
===================================== */

#topics-detail {
	max-width: 1200px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#topics-detail .topics_edit_table {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 14px;
}

#topics-detail .topics_edit_table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

#topics-detail .topics_edit_table tr + tr th,
#topics-detail .topics_edit_table tr + tr td {
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#topics-detail .topics_edit_table th {
	width: 240px;
	padding: 12px 12px;
	vertical-align: top;
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
	background: rgba(15, 23, 42, 0.02);
}

#topics-detail .topics_edit_table td {
	padding: 12px 12px;
	vertical-align: top;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	background: #fff;
}

#topics-detail .topics_edit_table th span {
	color: #e11d48;
	font-weight: 900;
	margin-left: 6px;
}

#topics-detail input[type="text"],
#topics-detail input[type="date"],
#topics-detail input[type="time"],
#topics-detail select,
#topics-detail textarea {
	width: min(720px, 100%);
	max-width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	padding: 9px 10px;
	background: #fff;
	color: var(--admin-text, #1f2533);
	font-size: 14px;
	line-height: 1.35;
	box-sizing: border-box;
}

#topics-detail input[type="date"],
#topics-detail input[type="time"] {
	width: auto;
	min-width: 160px;
	margin-right: 10px;
}

#topics-detail input[type="checkbox"],
#topics-detail input[type="radio"] {
	transform: translateY(1px);
}

#topics-detail label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 14px;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
}

#topics-detail #editor.comment,
#topics-detail #editor {
	width: min(720px, 100%);
	max-width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	min-height: 220px;
	box-sizing: border-box;
}

#topics-detail .tox {
	border-radius: 10px !important;
	border-color: var(--admin-border, #e6e8f0) !important;
}

#topics-detail .edit {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#topics-detail .edit button {
	min-width: 110px;
	text-align: center;
	border: 0;
	border-radius: 12px;
	padding: 10px 18px;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	box-shadow: 0 10px 22px rgba(59, 130, 246, 0.22);
	transition:
		transform 0.08s ease,
		filter 0.15s ease;
	cursor: pointer;
}

#topics-detail .edit button:hover {
	filter: brightness(1.02);
}

#topics-detail .edit button:active {
	transform: translateY(1px);
}

@media (max-width: 992px) {
	#topics-detail .topics_edit_table th {
		width: 200px;
	}
}

@media (max-width: 768px) {
	#topics-detail .topics_edit_table {
		padding: 10px;
	}

	#topics-detail .topics_edit_table table,
	#topics-detail .topics_edit_table tbody,
	#topics-detail .topics_edit_table tr,
	#topics-detail .topics_edit_table th,
	#topics-detail .topics_edit_table td {
		display: block;
		width: 100%;
	}

	#topics-detail .topics_edit_table tr + tr th,
	#topics-detail .topics_edit_table tr + tr td {
		border-top: none;
	}

	#topics-detail .topics_edit_table tr {
		border-top: 1px solid var(--admin-border, #e6e8f0);
		padding: 10px 0;
	}

	#topics-detail .topics_edit_table th {
		background: transparent;
		padding: 0 6px 6px;
	}

	#topics-detail .topics_edit_table td {
		padding: 0 6px 6px;
	}

	#topics-detail input[type="date"],
	#topics-detail input[type="time"] {
		width: min(240px, 100%);
		margin-right: 10px;
		margin-bottom: 8px;
	}
}

/* =====================================
  News Detail (match Cast Detail)
===================================== */

#news-detail {
	max-width: 1200px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#news-detail .news_edit_table {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 14px;
}

#news-detail .news_edit_table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

#news-detail .news_edit_table tr + tr th,
#news-detail .news_edit_table tr + tr td {
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#news-detail .news_edit_table th {
	width: 240px;
	padding: 12px 12px;
	vertical-align: top;
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
	background: rgba(15, 23, 42, 0.02);
}

#news-detail .news_edit_table td {
	padding: 12px 12px;
	vertical-align: top;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	background: #fff;
}

#news-detail .news_edit_table th span {
	color: #e11d48;
	font-weight: 900;
	margin-left: 6px;
}

#news-detail input[type="text"],
#news-detail input[type="date"],
#news-detail input[type="time"],
#news-detail select,
#news-detail textarea {
	width: min(720px, 100%);
	max-width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	padding: 9px 10px;
	background: #fff;
	color: var(--admin-text, #1f2533);
	font-size: 14px;
	line-height: 1.35;
	box-sizing: border-box;
}

#news-detail input[type="date"],
#news-detail input[type="time"] {
	width: auto;
	min-width: 160px;
	margin-right: 10px;
}

#news-detail input[type="checkbox"],
#news-detail input[type="radio"] {
	transform: translateY(1px);
}

#news-detail label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 14px;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
}

#news-detail #editor.comment,
#news-detail #editor {
	width: min(720px, 100%);
	max-width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	min-height: 220px;
	box-sizing: border-box;
}

#news-detail .tox {
	border-radius: 10px !important;
	border-color: var(--admin-border, #e6e8f0) !important;
}

#news-detail .edit {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#news-detail .edit button {
	min-width: 110px;
	text-align: center;
	border: 0;
	border-radius: 12px;
	padding: 10px 18px;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	box-shadow: 0 10px 22px rgba(59, 130, 246, 0.22);
	transition:
		transform 0.08s ease,
		filter 0.15s ease;
	cursor: pointer;
}

#news-detail .edit button:hover {
	filter: brightness(1.02);
}

#news-detail .edit button:active {
	transform: translateY(1px);
}

@media (max-width: 992px) {
	#news-detail .news_edit_table th {
		width: 200px;
	}
}

@media (max-width: 768px) {
	#news-detail .news_edit_table {
		padding: 10px;
	}

	#news-detail .news_edit_table table,
	#news-detail .news_edit_table tbody,
	#news-detail .news_edit_table tr,
	#news-detail .news_edit_table th,
	#news-detail .news_edit_table td {
		display: block;
		width: 100%;
	}

	#news-detail .news_edit_table tr + tr th,
	#news-detail .news_edit_table tr + tr td {
		border-top: none;
	}

	#news-detail .news_edit_table tr {
		border-top: 1px solid var(--admin-border, #e6e8f0);
		padding: 10px 0;
	}

	#news-detail .news_edit_table th {
		background: transparent;
		padding: 0 6px 6px;
	}

	#news-detail .news_edit_table td {
		padding: 0 6px 6px;
	}

	#news-detail input[type="date"],
	#news-detail input[type="time"] {
		width: min(240px, 100%);
		margin-right: 10px;
		margin-bottom: 8px;
	}
}

/* =====================================
  Slide Banner
===================================== */

#slide-banner {
	max-width: 1200px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#slide-banner .banner_area {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 14px;
	align-items: start;
}

#slide-banner .banner_list,
#slide-banner .banner_edit {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 14px;
}

#slide-banner .banner_list > p,
#slide-banner .banner_edit > p {
	font-size: 13px;
	font-weight: 1000;
	color: var(--admin-text, #1f2533);
}

#slide-banner .banner_list {
	display: grid;
	gap: 14px;
}

#slide-banner .banner_list > p {
	margin-top: 2px;
}

/* グループの薄い色分け */
#slide-banner .group_1 {
	background: rgba(59, 130, 246, 0.06);
}
#slide-banner .group_2 {
	background: rgba(16, 185, 129, 0.06);
}
#slide-banner .group_3 {
	background: rgba(245, 158, 11, 0.06);
}
#slide-banner .group_4 {
	background: rgba(168, 85, 247, 0.06);
}
#slide-banner .group_5 {
	background: rgba(239, 68, 68, 0.06);
}

#slide-banner .sortable_area {
	min-height: 140px;
	padding: 12px;
	border-radius: 14px;
	border: 1px dashed rgba(148, 163, 184, 0.9);
}

#slide-banner .sortable_area:empty {
	min-height: 160px;
}

#slide-banner .banner_edit {
	position: sticky;
	top: 14px;
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: 14px;
}

#slide-banner .banner_edit .drop {
	padding: 14px;
	border-radius: 14px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: #fff;
	box-shadow: 0 10px 22px rgba(16, 24, 40, 0.06);
}

#slide-banner .banner_edit .drop > span {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 900;
	color: var(--admin-muted, #667085);
}

#slide-banner .banner_edit .drop form {
	margin: 0;
}

#slide-banner .banner_edit .drop input[type="file"] {
	width: 100%;
	border: 2px dashed #cbcbcb;
	border-radius: 12px;
	padding: 10px 12px;
	background: rgba(15, 23, 42, 0.02);
	cursor: pointer;
}

#slide-banner .banner_edit .drop.is-dragover {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

#slide-banner .image_item {
	background: #fff;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#slide-banner .image_item:not(:last-of-type) {
	margin-bottom: 10px;
}

#slide-banner .image_item > div:first-child {
	border-radius: 10px;
	overflow: hidden;
	background: rgba(15, 23, 42, 0.04);
}

#slide-banner .image_item > div:first-child:hover {
	cursor: grab;
}

#slide-banner .image_item img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 300px;
	object-fit: contain;
	object-position: center;
}

#slide-banner .image_item .switch {
	width: 110px;
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	font-weight: 900;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
	transition:
		background 0.15s ease,
		transform 0.08s ease;
}

#slide-banner .image_item .switch::after {
	content: "編集";
	letter-spacing: 0.02em;
}

#slide-banner .image_item .switch:hover {
	background: rgba(15, 23, 42, 0.06);
}

#slide-banner .image_item .switch.open {
	background: rgba(15, 23, 42, 0.06);
}

#slide-banner .image_item .detail {
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
}

#slide-banner .image_item .detail > div {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 8px;
	align-items: center;
	margin-bottom: 10px;
}

#slide-banner .image_item .detail > div.image_delete {
	display: block;
	text-align: right;
}

#slide-banner .image_item .detail > div:last-child {
	margin-bottom: 0;
}

#slide-banner .image_item .detail span {
	font-size: 12px;
	font-weight: 900;
	color: var(--admin-muted, #667085);
	white-space: nowrap;
}

#slide-banner .image_item .detail input[type="text"] {
	width: 100%;
	height: 34px;
	padding: 6px 10px;
	border-radius: 10px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: #fff;
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
	box-sizing: border-box;
}

#slide-banner .image_item .detail > div:nth-child(2) {
	grid-template-columns: 52px 1fr;
	align-items: start;
}

#slide-banner .image_item .detail > div:nth-child(2) select {
	grid-column: 2 / -1;
	margin-top: 8px;
}

#slide-banner .image_item .detail select {
	height: 34px;
	padding: 6px 10px;
	border-radius: 10px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: #fff;
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
}

#slide-banner .image_item .detail input[type="text"]:focus,
#slide-banner .image_item .detail select:focus {
	outline: none;
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

#slide-banner .image_item .image_delete {
	margin-top: 10px;
	align-self: flex-end;
}

#slide-banner .image_item .image_delete span {
	width: 110px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid rgba(239, 68, 68, 0.25);
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
	font-weight: 900;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}

#slide-banner .image_item .image_delete span:hover {
	background: rgba(239, 68, 68, 0.16);
}

@media (max-width: 1060px) {
	#slide-banner .banner_area {
		grid-template-columns: 1fr;
	}

	#slide-banner .banner_edit .drop {
		position: static;
	}
}

@media (max-width: 640px) {
	#slide-banner .sortable_area {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
}

/* =====================================
  Media Banner
===================================== */

#media-banner {
	max-width: 1200px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#media-banner .banner_area {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 14px;
	align-items: start;
}

#media-banner .banner_list,
#media-banner .banner_edit {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 14px;
}

#media-banner .banner_list > p,
#media-banner .banner_edit > p {
	font-size: 13px;
	font-weight: 1000;
	color: var(--admin-text, #1f2533);
}

#media-banner .banner_list {
	display: grid;
	gap: 14px;
}

#media-banner .banner_list > p {
	margin-top: 2px;
}

/* グループの薄い色分け */
#media-banner .group_1 {
	background: rgba(59, 130, 246, 0.06);
}
#media-banner .group_2 {
	background: rgba(16, 185, 129, 0.06);
}
#media-banner .group_3 {
	background: rgba(245, 158, 11, 0.06);
}
#media-banner .group_4 {
	background: rgba(168, 85, 247, 0.06);
}
#media-banner .group_5 {
	background: rgba(239, 68, 68, 0.06);
}

#media-banner .sortable_area {
	min-height: 140px;
	padding: 12px;
	border-radius: 14px;
	border: 1px dashed rgba(148, 163, 184, 0.9);
}

#media-banner .sortable_area:empty {
	min-height: 160px;
}

#media-banner .banner_edit {
	position: sticky;
	top: 14px;
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: 14px;
}

#media-banner .banner_edit .drop {
	padding: 14px;
	border-radius: 14px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: #fff;
	box-shadow: 0 10px 22px rgba(16, 24, 40, 0.06);
	display: grid;
	gap: 10px;
}

#media-banner .banner_edit .drop form {
	margin: 0;
}

#media-banner .banner_edit .drop textarea {
	width: 100%;
	min-height: 150px;
	resize: vertical;
	border: 2px dashed #cbcbcb;
	border-radius: 12px;
	padding: 10px 12px;
	background: rgba(15, 23, 42, 0.02);
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
	box-sizing: border-box;
	outline: none;
}

#media-banner .banner_edit .drop textarea:focus {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
	background: #fff;
}

#media-banner .banner_edit .drop button {
	width: 110px;
	text-align: center;
	margin-left: auto;
	height: 34px;
	padding: 0 12px;
	border-radius: 12px;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	font-weight: 900;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
	transition:
		background 0.15s ease,
		transform 0.08s ease;
}

#media-banner .banner_edit .drop button:active {
	transform: translateY(1px);
}

#media-banner .image_item {
	background: #fff;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#media-banner .image_item:not(:last-of-type) {
	margin-bottom: 10px;
}

#media-banner .image_item div.name {
	min-height: 40px;
	padding: 10px;
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
	background: rgba(15, 23, 42, 0.04);
	border-radius: 10px;
	overflow: hidden;
}

#media-banner .image_item > div.name:hover {
	cursor: grab;
}

#media-banner .image_item img {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
}

#media-banner .image_item .switch {
	width: 110px;
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	font-weight: 900;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
	transition:
		background 0.15s ease,
		transform 0.08s ease;
}

#media-banner .image_item .switch::after {
	content: "編集";
	letter-spacing: 0.02em;
}

#media-banner .image_item .switch:hover {
	background: rgba(15, 23, 42, 0.06);
}

#media-banner .image_item .switch.open {
	background: rgba(15, 23, 42, 0.06);
}

#media-banner .image_item .detail {
	padding: 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

#media-banner .image_item .detail > div {
	width: 100%;
}

#media-banner .image_item .detail > div:first-of-type {
	margin-bottom: 10px;
}

#media-banner .image_item .detail textarea {
	width: 100%;
	height: 200px;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 12px;
	padding: 7px 12px;
	font-weight: 800;
	font-size: 13px;
	background: #fff;
	outline: none;
}

#media-banner .image_item .detail textarea:focus {
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#media-banner .image_item .detail > div:nth-of-type(2) span {
	display: block;
	margin-bottom: 10px;
}

#media-banner .image_item .detail > div:last-child {
	margin-bottom: 0;
}

#media-banner .image_item .detail .image_update {
	width: 110px;
	margin-top: 10px;
	transition:
		background 0.15s ease,
		transform 0.08s ease;
}

#media-banner .image_item .detail .image_update:hover span {
	background: rgba(15, 23, 42, 0.06);
}

#media-banner .image_item .detail .image_delete {
	width: 110px;
	margin-top: 10px;
	margin-left: 8px;
}

#media-banner .image_item .detail span {
	font-size: 12px;
	font-weight: 900;
	color: var(--admin-muted, #667085);
	white-space: nowrap;
}

#media-banner .image_item .detail input[type="text"] {
	width: 100%;
	height: 34px;
	padding: 6px 10px;
	border-radius: 10px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: #fff;
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
	box-sizing: border-box;
}

#media-banner .image_item .detail select {
	height: 34px;
	padding: 6px 10px;
	border-radius: 10px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: #fff;
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
}

#media-banner .image_item .detail input[type="text"]:focus,
#media-banner .image_item .detail select:focus {
	outline: none;
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

#media-banner .image_item .detail .image_update span {
	width: 110px;
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	font-weight: 900;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
	transition:
		background 0.15s ease,
		transform 0.08s ease;
}

#media-banner .image_item .image_delete span {
	width: 110px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid rgba(239, 68, 68, 0.25);
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
	font-weight: 900;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
}

#media-banner .image_item .image_delete span:hover {
	background: rgba(239, 68, 68, 0.16);
}

@media (max-width: 1060px) {
	#media-banner .banner_area {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	#media-banner .sortable_area {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
}

/* =====================================
  Questionnaire List
===================================== */
#questionnaire {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px;
	box-sizing: border-box;
}

#questionnaire .page_navi_wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 14px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
}

#questionnaire .page_navi {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

#questionnaire .page_navi .prev,
#questionnaire .page_navi .next {
	padding: 9px 12px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-muted, #667085);
	font-weight: 900;
	user-select: none;
}

#questionnaire .page_navi .prev.active,
#questionnaire .page_navi .next.active {
	cursor: pointer;
	color: var(--admin-text, #1f2533);
}

#questionnaire .page_navi .prev.active:hover,
#questionnaire .page_navi .next.active:hover {
	background: rgba(15, 23, 42, 0.06);
}

#questionnaire .page_navi .page ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#questionnaire .page_navi .page li {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	font-weight: 900;
	color: var(--admin-text, #1f2533);
	cursor: pointer;
	user-select: none;
}

#questionnaire .page_navi .page li:hover {
	background: rgba(15, 23, 42, 0.06);
}

#questionnaire .page_navi .page li.active {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.25);
	color: var(--admin-accent, #3b82f6);
	cursor: default;
}

#questionnaire .questionnaire_list {
	margin-top: 12px;
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	overflow: hidden;
}

#questionnaire .questionnaire_list table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

#questionnaire .questionnaire_list thead th {
	padding: 12px 14px;
	text-align: left;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 900;
	background: rgba(15, 23, 42, 0.02);
	border-bottom: 1px solid var(--admin-border, #e6e8f0);
}

#questionnaire .questionnaire_list tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--admin-border, #e6e8f0);
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	vertical-align: top;
}

#questionnaire .questionnaire_list tbody tr:hover {
	background: rgba(15, 23, 42, 0.02);
}

#questionnaire .questionnaire_list thead th:nth-child(1) {
	width: 120px;
} /* 利用日 */
#questionnaire .questionnaire_list thead th:nth-child(2) {
	width: 220px;
} /* キャスト */
#questionnaire .questionnaire_list thead th:nth-child(3) {
	width: 120px;
} /* コース */
#questionnaire .questionnaire_list thead th:nth-child(5) {
	width: 220px;
} /* 承認 */
#questionnaire .questionnaire_list thead th:nth-child(6) {
	width: 110px;
} /* 操作 */

#questionnaire td:nth-child(2) .name {
	font-weight: 900;
	margin-bottom: 6px;
	line-height: 1.2;
}

#questionnaire select {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	padding: 9px 10px;
	background: #fff;
	color: var(--admin-text, #1f2533);
	font-weight: 800;
	font-size: 14px;
	box-sizing: border-box;
}

#questionnaire select:focus {
	outline: none;
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

#questionnaire td:nth-child(4) {
	white-space: normal;
	line-height: 1.6;
}

#questionnaire td.approval {
	white-space: nowrap;
}

#questionnaire td.approval button,
#questionnaire td:last-child .delete button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid var(--admin-border, #e6e8f0);
	background: rgba(15, 23, 42, 0.02);
	color: var(--admin-text, #1f2533);
	font-weight: 900;
	cursor: pointer;
	user-select: none;
}

#questionnaire td.approval button:hover,
#questionnaire td:last-child .delete button:hover {
	background: rgba(15, 23, 42, 0.06);
}

#questionnaire td.approval button[data-approval="1"] {
	border-color: rgba(34, 197, 94, 0.25);
	background: rgba(34, 197, 94, 0.1);
}

#questionnaire td.approval button[data-approval="2"] {
	border-color: rgba(239, 68, 68, 0.25);
	background: rgba(239, 68, 68, 0.08);
}

#questionnaire td.approval button[data-approval="0"] {
	border-color: rgba(59, 130, 246, 0.25);
	background: rgba(59, 130, 246, 0.1);
}

#questionnaire td.approval .approved,
#questionnaire td.approval .denied {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-weight: 900;
	font-size: 13px;
	margin-bottom: 8px;
}

#questionnaire td.approval .approved {
	color: #16a34a;
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.2);
}

#questionnaire td.approval .denied {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
}

#questionnaire td:last-child {
	text-align: right;
	white-space: nowrap;
}

#questionnaire td:last-child .delete button {
	border-color: rgba(239, 68, 68, 0.25);
	background: rgba(239, 68, 68, 0.08);
	color: #ef4444;
}

#questionnaire td:last-child .delete button:hover {
	background: rgba(239, 68, 68, 0.12);
}

#questionnaire i {
	font-size: 14px;
	line-height: 1;
}

@media (max-width: 980px) {
	#questionnaire .questionnaire_list {
		overflow-x: auto;
	}

	#questionnaire .questionnaire_list table {
		min-width: 980px;
	}
}

/* =====================================
  Shop Info
===================================== */

#shop-info {
	max-width: 1200px;
	margin: 18px auto 40px;
	padding: 0 16px;
}

#shop-info .shop_table {
	background: var(--admin-surface, #fff);
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: var(--admin-radius, 14px);
	box-shadow: var(--admin-shadow, 0 8px 24px rgba(16, 24, 40, 0.08));
	padding: 14px;
}

#shop-info .shop_table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

#shop-info .shop_table tr + tr th,
#shop-info .shop_table tr + tr td {
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#shop-info .shop_table th[colspan="2"] {
	padding: 12px 12px;
	font-size: 13px;
	font-weight: 900;
	color: var(--admin-text, #1f2533);
	background: rgba(59, 130, 246, 0.1);
	border-top: 0;
}

#shop-info .shop_table th {
	width: 240px;
	padding: 12px 12px;
	vertical-align: top;
	font-size: 13px;
	font-weight: 800;
	color: var(--admin-text, #1f2533);
	background: rgba(15, 23, 42, 0.02);
}

#shop-info .shop_table td {
	padding: 12px 12px;
	vertical-align: top;
	font-size: 14px;
	color: var(--admin-text, #1f2533);
	background: #fff;
}

#shop-info .shop_table th span {
	color: #e11d48;
	font-weight: 900;
	margin-left: 6px;
}

#shop-info input[type="text"],
#shop-info input[type="tel"],
#shop-info input[type="url"],
#shop-info select,
#shop-info textarea {
	width: min(720px, 100%);
	max-width: 100%;
	border: 1px solid var(--admin-border, #e6e8f0);
	border-radius: 10px;
	padding: 9px 10px;
	background: #fff;
	color: var(--admin-text, #1f2533);
	font-size: 14px;
	line-height: 1.35;
	box-sizing: border-box;
}

#shop-info input[type="text"]:focus,
#shop-info input[type="tel"]:focus,
#shop-info input[type="url"]:focus,
#shop-info select:focus,
#shop-info textarea:focus {
	outline: none;
	border-color: rgba(59, 130, 246, 0.45);
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

#shop-info select[name="start_time"],
#shop-info select[name="end_time"] {
	width: auto;
	min-width: 140px;
}

#shop-info textarea {
	min-height: 160px;
	resize: vertical;
}

#shop-info .edit {
	display: flex;
	justify-content: flex-end;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--admin-border, #e6e8f0);
}

#shop-info .edit button {
	min-width: 110px;
	text-align: center;
	border: 0;
	border-radius: 12px;
	padding: 10px 18px;
	font-weight: 900;
	font-size: 14px;
	color: #fff;
	background: var(--admin-accent, #3b82f6);
	box-shadow: 0 10px 22px rgba(59, 130, 246, 0.22);
	transition:
		transform 0.08s ease,
		filter 0.15s ease;
	cursor: pointer;
}

#shop-info .edit button:hover {
	filter: brightness(1.02);
}

#shop-info .edit button:active {
	transform: translateY(1px);
}

@media (max-width: 992px) {
	#shop-info .shop_table th {
		width: 200px;
	}
}

@media (max-width: 768px) {
	#shop-info .shop_table {
		padding: 10px;
	}

	#shop-info .shop_table table,
	#shop-info .shop_table tbody,
	#shop-info .shop_table tr,
	#shop-info .shop_table th,
	#shop-info .shop_table td {
		display: block;
		width: 100%;
	}

	/* ブロック化したときに「行＋線」で区切る */
	#shop-info .shop_table tr + tr th,
	#shop-info .shop_table tr + tr td {
		border-top: none;
	}

	#shop-info .shop_table tr {
		border-top: 1px solid var(--admin-border, #e6e8f0);
		padding: 10px 0;
	}

	#shop-info .shop_table th {
		background: transparent;
		padding: 0 6px 6px;
	}

	#shop-info .shop_table td {
		padding: 0 6px 6px;
	}

	#shop-info .shop_table th[colspan="2"] {
		background: rgba(59, 130, 246, 0.1);
		border-radius: 10px;
		padding: 10px 10px;
	}
}