/* =========================================================
   Night Portal — メインスタイル（スマホ優先・黒基調）
   ========================================================= */

:root {
	--np-bg: #fff5f9;           /* ほんのりピンクの白 */
	--np-surface: #ffffff;      /* カードは純白 */
	--np-surface-2: #fff0f6;    /* やわらかいピンク */
	--np-text: #5a4650;         /* やさしい黒（プラム） */
	--np-muted: #b58da0;        /* くすみピンクの補助文字 */
	--np-accent: #ff7eb3;       /* メインのピンク */
	--np-accent-dark: #ff5fa0;  /* 濃いピンク（ホバー） */
	--np-border: #ffd6e7;       /* 淡いピンクの枠線 */
	--np-radius: 16px;          /* まるみを強めに */
	--np-shadow: 0 6px 20px rgba(255, 126, 179, 0.18);
	--np-available: #51c98a;    /* 空きあり：グリーン */
	--np-busy: #ffb454;         /* 混雑中：オレンジ */
	--np-full: #ff7088;         /* 満席：レッドピンク */
}

/* 飲食店ページ：白×黒テーマ */
body.np-theme-mono {
	--np-bg: #ffffff;
	--np-surface: #ffffff;
	--np-surface-2: #f4f4f4;
	--np-text: #1a1a1a;
	--np-muted: #767676;
	--np-accent: #111111;
	--np-accent-dark: #000000;
	--np-border: #dddddd;
	--np-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* ログイン画面：白基調のシンプルテーマ */
body.np-login-plain {
	--np-bg: #ffffff;
	--np-surface: #ffffff;
	--np-surface-2: #f7f7f7;
	--np-text: #222222;
	--np-muted: #888888;
	--np-accent: #2b2b2b;
	--np-accent-dark: #000000;
	--np-border: #e5e5e5;
	--np-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
body.np-login-plain .np-auth {
	max-width: 400px;
}
body.np-login-plain .np-auth__form,
body.np-login-plain .np-login-account {
	border: 1px solid #ececec;
	box-shadow: none;
}

/* ホスト関連ページ：薄水色テーマ */
body.np-host {
	--np-bg: #f1fafe;           /* ほんのり水色の白 */
	--np-surface: #ffffff;
	--np-surface-2: #e7f5fc;    /* やわらかい水色 */
	--np-text: #3a4a52;         /* やさしいブルーグレー */
	--np-muted: #8db2c4;        /* くすみ水色の補助文字 */
	--np-accent: #4fb6dd;       /* メインの水色 */
	--np-accent-dark: #2f9ec9;  /* 濃い水色（ホバー） */
	--np-border: #cdebf7;       /* 淡い水色の枠線 */
	--np-shadow: 0 6px 20px rgba(79, 182, 221, 0.18);
}

/* ホスト：固定ピンクのグラデーション要素を薄水色に統一 */
body.np-host .np-pointinfo,
body.np-host .np-gift,
body.np-host .np-stat-card--rank,
body.np-host .np-member-cta__box,
body.np-host .np-stats__member-box {
	background: linear-gradient( 135deg, #e7f5fc 0%, #d7eefb 100% );
}

/* ホスト：ホバー時などの固定ピンクの影を薄水色に */
body.np-host .np-card:hover,
body.np-host .np-store-card:hover,
body.np-host .np-slider-card:hover {
	box-shadow: 0 10px 26px rgba(79, 182, 221, 0.28);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--np-bg);
	color: var(--np-text);
	font-family: "M PLUS Rounded 1c", "Quicksand", -apple-system, BlinkMacSystemFont,
		"Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--np-accent);
	text-decoration: none;
}

a:hover {
	opacity: 0.85;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.np-container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ---------- ヘッダー ---------- */
.np-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--np-border);
}

.np-header__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.np-header__logo {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.np-header__logo a {
	color: var(--np-text);
}

.np-header__nav {
	display: flex;
	align-items: center;
	gap: 14px;
}

.np-header__nav a {
	font-size: 0.9rem;
	color: var(--np-muted);
}

.np-header__nav a.np-header__dash {
	color: #fff;
	background: var(--np-accent);
	padding: 7px 14px;
	border-radius: 999px;
	font-weight: 700;
}

.np-header__nav a.np-header__dash:hover {
	background: var(--np-accent-dark);
	opacity: 1;
}

/* ハンバーガーボタン（スマホのみ表示） */
.np-header__toggle {
	display: none;
}

@media (max-width: 768px) {
	.np-header__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 42px;
		height: 42px;
		padding: 9px;
		background: none;
		border: none;
		cursor: pointer;
	}

	.np-header__toggle span {
		display: block;
		width: 100%;
		height: 2px;
		background: var(--np-text);
		border-radius: 2px;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.np-header__toggle.is-open span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.np-header__toggle.is-open span:nth-child(2) {
		opacity: 0;
	}

	.np-header__toggle.is-open span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	.np-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--np-surface);
		border-bottom: 1px solid var(--np-border);
		box-shadow: var(--np-shadow);
		padding: 6px 16px 14px;
	}

	.np-header__nav.is-open {
		display: flex;
	}

	.np-header__nav a {
		padding: 13px 4px;
		border-bottom: 1px solid var(--np-border);
		font-size: 0.95rem;
		color: var(--np-text);
	}

	.np-header__nav a.np-header__dash {
		margin-top: 10px;
		text-align: center;
		border-bottom: none;
	}
	.np-header__nav a.np-header__dash--left {
		text-align: left;
		align-self: flex-start;
		display: inline-block;
		width: auto;
		margin-top: 10px;
	}
}

/* ---------- メイン ---------- */
.np-main {
	padding: 24px 0 56px;
}

.np-section-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 8px 0 20px;
	padding-left: 12px;
	border-left: 4px solid var(--np-accent);
}

.np-empty {
	color: var(--np-muted);
	text-align: center;
	padding: 32px 0;
}

/* ---------- サイト紹介文 ---------- */
.np-intro {
	padding: 16px 0 0;
}

.np-intro__text {
	font-size: 0.82rem;
	line-height: 1.8;
	color: var(--np-muted);
	margin: 0;
}

/* ---------- 地域タイル ---------- */
.np-regions {
	padding: 16px 0;
}

.np-region-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

@media (min-width: 600px) {
	.np-region-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.np-region-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--np-surface-2);
	background-size: cover;
	background-position: center;
	box-shadow: var(--np-shadow);
}

.np-region-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35) );
}

.np-region-tile__name {
	position: relative;
	width: 100%;
	text-align: center;
	padding: 6px 4px;
	background: var(--np-accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.78rem;
}

@media (min-width: 600px) {
	.np-region-tile__name {
		font-size: 0.92rem;
	}
}

.np-region-tile__name small {
	display: block;
	font-size: 0.66rem;
	font-weight: 400;
	opacity: 0.95;
}

.np-region-tile--qr {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #fff;
}

.np-region-tile--qr::before {
	display: none;
}

.np-region-tile--qr img {
	width: 64%;
	height: auto;
	border-radius: 6px;
}

/* ---------- 掲載数 ---------- */
.np-stats {
	padding: 8px 0 16px;
}

.np-stats__box {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	justify-content: center;
	align-items: center;
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	padding: 16px 24px;
	box-shadow: var(--np-shadow);
	font-size: 0.95rem;
}

.np-stats__box strong {
	color: var(--np-accent);
	font-size: 1.3rem;
	margin: 0 2px;
}

.np-stats__member-box {
	margin-top: 12px;
	background: linear-gradient( 135deg, #fff0f6 0%, #ffe3ef 100% );
}
.np-stats__member {
	font-weight: 700;
	font-size: 1.05rem;
	text-align: center;
}
.np-stats__member strong {
	color: var(--np-accent);
	font-size: 1.6rem;
}

/* ---------- メイン＋サイドバー ---------- */
.np-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding-top: 8px;
	padding-bottom: 24px;
}

@media (min-width: 900px) {
	.np-layout {
		grid-template-columns: 1fr;
	}
}

.np-region-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
}

.np-region-tab {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--np-border);
	background: var(--np-surface);
	color: var(--np-text);
	font-size: 0.85rem;
	font-weight: 600;
}

.np-region-tab.is-active,
.np-region-tab:hover {
	background: var(--np-accent);
	color: #fff;
	border-color: transparent;
	opacity: 1;
}

/* エリアタブ */
.np-area-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.np-area-tab {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--np-border);
	background: var(--np-surface);
	color: var(--np-text);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.np-area-tab.is-active {
	background: var(--np-accent);
	color: #fff;
	border-color: transparent;
}

.np-area-panel[hidden] {
	display: none;
}

/* 横スライダー */
.np-slider {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	padding-bottom: 10px;
}

.np-slider .np-card {
	flex: 0 0 150px;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.np-slider .np-card {
		flex-basis: 180px;
	}
}

.np-more {
	text-align: right;
	margin: 6px 0 24px;
}

.np-more a {
	font-weight: 700;
	font-size: 0.9rem;
}

.np-side-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 12px;
	padding-left: 10px;
	border-left: 4px solid var(--np-accent);
}

.np-poplist {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	box-shadow: var(--np-shadow);
	overflow: hidden;
}

.np-poplist li + li {
	border-top: 1px solid var(--np-border);
}

.np-poplist a {
	display: block;
	padding: 11px 14px;
	color: var(--np-text);
	font-size: 0.9rem;
}

.np-poplist a:hover {
	background: var(--np-surface-2);
	opacity: 1;
}

.np-poplist span {
	color: var(--np-muted);
	font-size: 0.82rem;
}

/* ---------- 人気キャストランキング ---------- */
.np-rank {
	padding: 8px 0 4px;
}

.np-rankcard {
	position: relative;
	flex: 0 0 130px;
	scroll-snap-align: start;
	display: block;
	color: var(--np-text);
	text-align: center;
}

@media (min-width: 600px) {
	.np-rankcard {
		flex-basis: 150px;
	}
}

.np-rankcard__num {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
	background: var(--np-accent);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.np-rankcard__num.np-rank-1 {
	background: #e6b422; /* 金 */
	color: #5a4650;
}

.np-rankcard__num.np-rank-2 {
	background: #b9bcc4; /* 銀 */
	color: #5a4650;
}

.np-rankcard__num.np-rank-3 {
	background: #cd7f32; /* 銅 */
}

.np-rankcard__thumb {
	aspect-ratio: 3 / 4;
	background: var(--np-surface-2);
	border-radius: var(--np-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
	box-shadow: var(--np-shadow);
}

.np-rankcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-rankcard__name {
	margin: 0;
	font-size: 0.88rem;
	font-weight: 700;
}

.np-rankcard__pt {
	margin: 2px 0 0;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--np-accent);
}

.np-rankcard__store {
	margin: 2px 0 0;
	font-size: 0.74rem;
	color: var(--np-muted);
}

/* ---------- 広告枠（TOP） ---------- */
.np-ads {
	padding: 20px 0 4px;
}

.np-ads__label {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	color: var(--np-muted);
	margin: 0 0 8px;
}

.np-ads__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 720px) {
	.np-ads__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.np-ad {
	display: block;
	border-radius: var(--np-radius);
	overflow: hidden;
	box-shadow: var(--np-shadow);
	transition: transform 0.15s ease;
}

.np-ad:hover {
	transform: translateY(-2px);
	opacity: 1;
}

.np-ad img {
	width: 100%;
	aspect-ratio: 16 / 5;
	object-fit: cover;
	display: block;
}

/* キャストダッシュボードの広告：余白＋中央寄せ */
.np-ads--cast {
	max-width: none;
	margin: 24px 0;
	padding: 0;
}

.np-ads--cast .np-ads__label {
	text-align: center;
}

.np-ads--cast .np-ads__grid {
	grid-template-columns: 1fr;
}

/* ---------- ヒーロー（トップ） ---------- */
.np-hero {
	padding: 56px 0;
	text-align: center;
	background: radial-gradient(120% 100% at 50% 0%, #ffe3ef 0%, var(--np-bg) 70%);
	border-bottom: 1px solid var(--np-border);
}

.np-hero__title {
	font-size: 1.8rem;
	margin: 0 0 12px;
	letter-spacing: 0.06em;
}

.np-hero__lead {
	color: var(--np-muted);
	margin: 0 0 24px;
}

.np-hero__btn {
	display: inline-block;
	padding: 12px 32px;
	background: var(--np-accent);
	color: #fff;
	font-weight: 700;
	border-radius: 999px;
	box-shadow: var(--np-shadow);
}

.np-hero__btn:hover {
	background: var(--np-accent-dark);
	opacity: 1;
}

/* 郵便番号の自動入力 */
.np-zip-group {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.np-zip-group input {
	flex: 1;
	min-width: 120px;
	padding: 10px;
	background: var(--np-bg);
	border: 1px solid var(--np-border);
	border-radius: 8px;
	color: var(--np-text);
	font-size: 1rem;
}

.np-zip-status {
	display: block;
	margin-top: 4px;
}

/* ---------- お店検索フォーム ---------- */
.np-search {
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	padding: 16px;
	margin-bottom: 18px;
	box-shadow: var(--np-shadow);
}

.np-search__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 640px) {
	.np-search__row {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

.np-search__field {
	display: block;
}

.np-search__field > span {
	display: block;
	font-size: 0.8rem;
	color: var(--np-muted);
	margin-bottom: 4px;
}

.np-search__field select,
.np-search__field input {
	width: 100%;
	padding: 10px;
	background: var(--np-bg);
	border: 1px solid var(--np-border);
	border-radius: 8px;
	color: var(--np-text);
	font-size: 1rem;
}

.np-search__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 14px;
}

.np-search__count {
	color: var(--np-muted);
	font-size: 0.88rem;
	margin: 0 0 14px;
}

/* 行きたい！ボタン */
.np-want-form {
	margin: 12px 0 4px;
}

.np-want-btn {
	background: var(--np-surface);
	color: var(--np-accent);
	border: 2px solid var(--np-accent);
	box-shadow: none;
}

.np-want-btn.is-on {
	background: var(--np-accent);
	color: #fff;
}

.np-want-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.np-want-form--card {
	margin: 6px 0 0;
	text-align: center;
}

.np-want-form--card .np-want-btn,
.np-rest-cell .np-want-ajax {
	width: 100%;
	font-size: 0.82rem;
	padding: 8px;
}

.np-rest-cell .np-want-ajax {
	margin-top: 20px;
}

/* このエリアの飲食店 */
.np-rest-area {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px dashed var(--np-border);
}

.np-rest-area__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.np-rest-area__head .np-section-title {
	margin: 0;
}

.np-rest-area__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.np-dist {
	color: var(--np-accent);
	font-weight: 700;
}

/* ---------- 店舗カードのグリッド ---------- */
.np-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

@media (min-width: 720px) {
	.np-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

.np-card {
	display: block;
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	overflow: hidden;
	color: var(--np-text);
	box-shadow: var(--np-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.np-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(255, 126, 179, 0.28);
	opacity: 1;
}

.np-card__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--np-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.np-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-card__noimg {
	color: var(--np-muted);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
}

.np-card__body {
	padding: 10px 12px 14px;
}

.np-card__title {
	font-size: 0.98rem;
	margin: 0 0 4px;
	line-height: 1.4;
}

.np-card__area {
	margin: 0;
	font-size: 0.8rem;
	color: var(--np-muted);
}

/* ---------- 混雑バッジ ---------- */
.np-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	color: #fff;
	background: var(--np-muted);
}

.np-card__thumb .np-badge {
	position: absolute;
	top: 8px;
	left: 8px;
}

.np-card__working {
	position: absolute;
	bottom: 8px;
	left: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	color: #fff;
	background: rgba(90, 70, 80, 0.78);
}

.np-store__working {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--np-text);
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
}

.np-badge.is-available {
	background: var(--np-available);
}

.np-badge.is-busy {
	background: var(--np-busy);
}

.np-badge.is-full {
	background: var(--np-full);
}

.np-badge.is-last {
	background: #3a3a44;
}

.np-badge.is-prep {
	background: #3f8fd0;
}

/* ---------- 店舗詳細 ---------- */
.np-store__header {
	margin-bottom: 20px;
}

.np-store__thumb {
	border-radius: var(--np-radius);
	overflow: hidden;
	margin-bottom: 16px;
}

.np-store__head-body {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.np-store__title {
	font-size: 1.5rem;
	margin: 0;
}

.np-store__updated {
	font-size: 0.78rem;
	color: var(--np-muted);
}

.np-store__section {
	margin: 28px 0;
}

.np-store__h2 {
	font-size: 1.1rem;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--np-border);
}

/* 情報テーブル */
.np-info {
	width: 100%;
	border-collapse: collapse;
}

.np-info th,
.np-info td {
	text-align: left;
	padding: 10px 8px;
	border-bottom: 1px solid var(--np-border);
	vertical-align: top;
}

.np-info th {
	width: 30%;
	color: var(--np-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* 月別ポイントの合計行 */
.np-monthpt__total th,
.np-monthpt__total td {
	border-top: 2px solid var(--np-border);
	border-bottom: none;
	color: var(--np-accent, #e91e8c);
	font-weight: 700;
}

/* エリア配下の都道府県カード絞り込み */
.np-pref-cards {
	margin: 6px 0 14px;
}
.np-pref-cards__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--np-muted);
	margin-bottom: 8px;
}
.np-pref-cards__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.np-pref-card {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	color: var(--np-text);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.15s ease;
}
.np-pref-card:hover {
	border-color: var(--np-accent);
	color: var(--np-accent-dark);
}
.np-pref-card.is-active {
	background: var(--np-accent);
	border-color: var(--np-accent);
	color: #fff;
}

/* 画像つきの都道府県カード */
.np-pref-card--img {
	position: relative;
	width: 130px;
	height: 80px;
	padding: 0;
	border-radius: 12px;
	overflow: hidden;
	background-color: #f3f3f3;
	display: block;
}
.np-pref-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.np-pref-card--img .np-pref-card__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 4px 4px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	text-align: center;
}
.np-pref-card--img:hover {
	transform: none;
	box-shadow: var(--np-shadow);
}
.np-pref-card--img.is-active {
	outline: 3px solid var(--np-accent);
	outline-offset: 1px;
}

/* 料金の補足 */
.np-price-note {
	margin-top: 10px;
	padding: 12px 14px;
	background: var(--np-surface-2);
	border-radius: 12px;
	font-size: 0.88rem;
	line-height: 1.8;
	color: var(--np-text);
}

/* イベント */
.np-events {
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.np-events__item {
	flex: 0 0 auto;
	width: min(90%, 400px);
	scroll-snap-align: start;
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	overflow: hidden;
	box-shadow: var(--np-shadow);
}

/* イベントが1件だけのときは横幅いっぱいに */
.np-events__item:only-child {
	width: 100%;
}

.np-events__thumb {
	margin: 0;
	border-radius: 0;
	overflow: hidden;
}
.np-events__thumb img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.np-events__text {
	padding: 14px 16px;
}

.np-events__title {
	margin: 0 0 6px;
	font-size: 1.05rem;
}

.np-events__date {
	margin: 8px 0 0;
	font-size: 0.85rem;
	color: var(--np-accent);
}

.np-events__countdown {
	display: inline-block;
	margin: 0 0 8px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--np-accent);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}
.np-events__countdown strong {
	font-size: 1.05rem;
	margin: 0 2px;
}
.np-events__countdown--upcoming {
	background: #6c8cff;
}

/* 出勤予定 週カレンダー */
.np-week-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
	margin-bottom: 14px;
}

.np-week-tab {
	flex: 0 0 auto;
	min-width: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 10px;
	border: 1px solid var(--np-border);
	border-radius: 12px;
	background: var(--np-surface);
	color: var(--np-text);
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}

.np-week-tab small {
	font-weight: 400;
	font-size: 0.7rem;
	color: var(--np-muted);
}

.np-week-tab.is-active {
	background: var(--np-accent);
	color: #fff;
	border-color: transparent;
}

.np-week-tab.is-active small {
	color: rgba(255, 255, 255, 0.9);
}

.np-week-panel[hidden] {
	display: none;
}

/* キャストグリッド */
.np-cast-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

@media (min-width: 720px) {
	.np-cast-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.np-cast-card {
	display: block;
	color: var(--np-text);
	text-align: center;
}

.np-cast-card__thumb {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--np-surface-2);
	border-radius: var(--np-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}

.np-cast-card__badge {
	position: absolute;
	top: 6px;
	left: 6px;
	font-size: 0.68rem;
	padding: 2px 8px;
}

.np-badge-new {
	background: #ff3d7f;
}

.np-rankcard__new {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	font-size: 0.66rem;
	padding: 2px 7px;
}

.np-cast-card__new {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 0.68rem;
	padding: 2px 8px;
}

.np-cast-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-cast-card__name {
	margin: 0;
	font-size: 0.85rem;
}

.np-cast-card__hearts {
	margin: 1px 0 0;
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--np-accent);
}

/* エンジニア：増減ボタン */
.np-eng-adjust {
	display: flex;
	gap: 10px;
}

.np-eng-adjust .np-btn {
	flex: 1;
}

/* ハート（いいね）ボタン */
.np-heart {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.np-heart-btn {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--np-accent);
	background: var(--np-surface);
	color: var(--np-accent);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.1s ease, background 0.15s ease;
}

.np-heart-btn:hover {
	transform: scale(1.08);
}

.np-heart-btn.is-done {
	background: var(--np-accent);
	color: #fff;
	cursor: default;
}

.np-heart-count {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--np-accent);
}

/* ---------- キャスト詳細 ---------- */
.np-cast__thumb {
	border-radius: var(--np-radius);
	overflow: hidden;
	margin-bottom: 16px;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--np-surface-2);
}
.np-cast__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-cast__head-body {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.np-cast__title {
	font-size: 1.5rem;
	margin: 0;
}

.np-cast__section {
	margin: 24px 0;
}

/* ---------- SNS・ほしいものリスト ボタン ---------- */
.np-sns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.np-sns__btn {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	color: #fff;
	box-shadow: var(--np-shadow);
}

.np-sns__btn--ig {
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.np-sns__btn--tt {
	background: #111;
}

.np-sns__btn--az {
	background: #ff9900;
	color: #1a1a1a;
}

/* ---------- キャストのフォトギャラリー（公開） ---------- */
.np-cast-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.np-cast-gallery__item {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--np-radius);
	overflow: hidden;
	background: var(--np-surface-2);
}

.np-cast-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-cast-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
}

.np-photo-like {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	border: none;
	border-radius: 999px;
	background: rgba( 0, 0, 0, 0.5 );
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	line-height: 1;
}
.np-photo-like__icon { color: #ff9bc4; }
.np-photo-like.is-done { background: var(--np-accent); cursor: default; }
.np-photo-like.is-done .np-photo-like__icon { color: #fff; }
.np-photo-like[disabled] { cursor: default; }

/* ---------- ギャラリー編集（ダッシュボード） ---------- */
.np-gallery-edit {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 8px 0 12px;
}

.np-gallery-edit__item {
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	padding: 6px;
	text-align: center;
}

.np-gallery-edit__item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
}

.np-gallery-edit__del {
	display: block;
	font-size: 0.78rem;
	color: var(--np-muted);
	margin-top: 4px;
}

.np-gallery-input {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	color: var(--np-text);
	font-size: 0.9rem;
}

/* ---------- QRコード・URLコピー ---------- */
.np-qr {
	text-align: center;
	margin: 12px 0;
}

.np-qr img {
	display: inline-block;
	background: #fff;
	padding: 8px;
	border-radius: var(--np-radius);
	border: 1px solid var(--np-border);
}

.np-copy {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.np-copy input {
	flex: 1;
	min-width: 160px;
	padding: 10px;
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	border-radius: 8px;
	color: var(--np-text);
	font-size: 0.85rem;
}

.np-copy .np-btn {
	flex-shrink: 0;
	padding: 10px 18px;
}

/* ---------- ページネーション ---------- */
.np-pagination {
	margin-top: 32px;
	text-align: center;
}

.np-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 3px;
	border: 1px solid var(--np-border);
	border-radius: 8px;
	color: var(--np-text);
}

.np-pagination .page-numbers.current {
	background: var(--np-accent);
	color: #fff;
	border-color: var(--np-accent);
}

/* ---------- ボタン共通 ---------- */
.np-btn {
	display: inline-block;
	padding: 12px 28px;
	background: var(--np-accent);
	color: #fff;
	font-weight: 700;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font-size: 1rem;
	box-shadow: var(--np-shadow);
}

.np-btn:hover {
	background: var(--np-accent-dark);
}

.np-btn--block {
	display: block;
	width: 100%;
}

/* ---------- ログイン画面 ---------- */
.np-auth {
	max-width: 420px;
}

.np-auth__title {
	font-size: 1.4rem;
	text-align: center;
	margin: 8px 0 24px;
}

.np-auth__form {
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	padding: 24px 20px;
	display: grid;
	gap: 16px;
	box-shadow: var(--np-shadow);
}

.np-field {
	display: block;
}

.np-field__label {
	display: block;
	font-size: 0.85rem;
	color: var(--np-muted);
	margin-bottom: 6px;
}

.np-field input,
.np-auth__form input[type="text"],
.np-auth__form input[type="password"] {
	width: 100%;
	padding: 12px;
	background: var(--np-bg);
	border: 1px solid var(--np-border);
	border-radius: 8px;
	color: var(--np-text);
	font-size: 1rem;
}

.np-field input:focus {
	outline: none;
	border-color: var(--np-accent);
}

.np-auth__remember {
	font-size: 0.85rem;
	color: var(--np-muted);
	display: flex;
	align-items: center;
	gap: 8px;
}

.np-auth__error {
	background: #ffe9ee;
	border: 1px solid var(--np-full);
	color: #d6336c;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 0.9rem;
}

/* ---------- ダッシュボード ---------- */
.np-dash-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.np-dash-head__links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.np-logout {
	font-size: 0.85rem;
	color: var(--np-muted);
}

.np-dash-welcome {
	color: var(--np-muted);
	margin: 0 0 20px;
}

.np-dash-card {
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	padding: 20px;
	box-shadow: var(--np-shadow);
}

.np-dash-todo {
	margin: 8px 0 0;
	padding-left: 20px;
}

.np-dash-todo li {
	margin: 6px 0;
}

.np-cast-id {
	display: inline-block;
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.9rem;
	margin: 0 0 12px;
}

.np-cast-id strong {
	color: var(--np-accent);
	letter-spacing: 0.05em;
}

/* ---------- ダッシュボード（操作系） ---------- */
.np-notice {
	background: #eafaf2;
	border: 1px solid var(--np-available);
	color: #1f9d6b;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 0.9rem;
}

.np-muted {
	color: var(--np-muted);
	font-size: 0.88rem;
}

.np-dash .np-dash-card {
	margin-bottom: 18px;
}

.np-dash-card__title {
	font-size: 1.05rem;
	margin: 0 0 10px;
}

/* 開閉できるカード（アコーディオン） */
.np-collapsible .np-card-toggle {
	cursor: pointer;
	position: relative;
	padding-right: 26px;
	user-select: none;
}

.np-collapsible .np-card-toggle::after {
	content: '▾';
	position: absolute;
	right: 4px;
	top: 0;
	color: var(--np-accent);
	transition: transform 0.2s ease;
}

.np-collapsible.is-collapsed .np-card-toggle {
	margin-bottom: 0;
}

.np-collapsible.is-collapsed .np-card-toggle::after {
	transform: rotate(-90deg);
}

.np-collapsible.is-collapsed .np-card-body-collapse {
	display: none;
}

/* 混雑状況ボタン */
.np-cong-btns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.np-cong-btn {
	position: relative;
	padding: 18px 8px;
	border: 2px solid var(--np-border);
	border-radius: var(--np-radius);
	background: var(--np-surface-2);
	color: var(--np-text);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.np-cong-btn.is-current {
	color: #fff;
	border-color: transparent;
}

.np-cong-btn.is-current.is-available {
	background: var(--np-available);
}

.np-cong-btn.is-current.is-busy {
	background: var(--np-busy);
}

.np-cong-btn.is-current.is-full {
	background: var(--np-full);
}

.np-cong-btn.is-current.is-last {
	background: #3a3a44;
}

.np-cong-btn.is-current.is-prep {
	background: #3f8fd0;
}

.np-cong-btns {
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}

.np-cong-btn__now {
	display: block;
	font-size: 0.7rem;
	font-weight: 400;
	margin-top: 4px;
	opacity: 0.9;
}

/* 定休日カレンダー */
.np-cal {
	display: inline-block;
	vertical-align: top;
	width: 48%;
	max-width: 230px;
	margin: 6px 0 10px;
}
.np-cal:first-of-type {
	margin-right: 3%;
}

.np-cal__head {
	font-weight: 700;
	font-size: 0.82rem;
	margin-bottom: 4px;
}

.np-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.np-cal__wd {
	text-align: center;
	font-size: 0.6rem;
	color: var(--np-muted);
	padding: 1px 0;
}

.np-cal__blank {
	display: block;
}

.np-cal__day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--np-border);
	border-radius: 4px;
	font-size: 0.66rem;
	cursor: pointer;
}

.np-cal__day input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.np-cal__day:has( input:checked ) {
	background: var(--np-full);
	color: #fff;
	border-color: transparent;
	font-weight: 700;
}

/* 出勤リスト */
.np-attend-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.np-attend-item {
	border-bottom: 1px solid var(--np-border);
}

.np-attend-item label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 4px;
	cursor: pointer;
}

.np-attend-item input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* 出勤スケジュール（店長：表） */
.np-sched-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 16px;
}

.np-sched {
	border-collapse: collapse;
	width: 100%;
	min-width: 480px;
}

.np-sched th,
.np-sched td {
	border: 1px solid var(--np-border);
	padding: 8px 6px;
	text-align: center;
	font-size: 0.82rem;
	white-space: nowrap;
}

.np-sched thead th {
	background: var(--np-surface-2);
}

.np-sched__name {
	text-align: left;
	position: sticky;
	left: 0;
	background: var(--np-surface);
	font-weight: 700;
	z-index: 1;
}

.np-sched thead .np-sched__name {
	background: var(--np-surface-2);
}

.np-sched__cell {
	display: flex;
	justify-content: center;
	cursor: pointer;
}

.np-sched__cell input[type="checkbox"] {
	width: 20px;
	height: 20px;
}

/* 出勤予定（キャスト・公開：チップ） */
/* グリッドフォーム内で出勤予定欄が横に伸びないようにする */
.np-event-form > .np-field,
.np-event-form > .np-field > .np-sched-days {
	min-width: 0;
}

/* 折りたたみラッパーが横に伸びてはみ出さないようにする */
.np-card-body-collapse {
	min-width: 0;
	max-width: 100%;
}
.np-card-body-collapse .np-field,
.np-card-body-collapse .np-sched-days {
	min-width: 0;
	max-width: 100%;
}

/* フォーム内の入力欄が枠からはみ出さないように */
.np-event-form input,
.np-event-form select,
.np-event-form textarea {
	max-width: 100%;
	box-sizing: border-box;
}
.np-event-form input[type="file"] {
	width: 100%;
}

.np-sched-days {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding-bottom: 10px;
}

/* スライドバー（スクロールバー）を見えるように */
.np-sched-days::-webkit-scrollbar {
	height: 8px;
}
.np-sched-days::-webkit-scrollbar-track {
	background: var(--np-border);
	border-radius: 999px;
}
.np-sched-days::-webkit-scrollbar-thumb {
	background: var(--np-accent);
	border-radius: 999px;
}
.np-sched-days {
	scrollbar-color: var(--np-accent) var(--np-border);
	scrollbar-width: thin;
}

.np-sched-day {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.np-sched-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 12px;
	border: 1px solid var(--np-border);
	border-radius: 12px;
	background: var(--np-surface-2);
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}

.np-sched-day input {
	width: 18px;
	height: 18px;
}

.np-sched-days--view .np-sched-day {
	cursor: default;
}

.np-sched-day small {
	font-weight: 400;
	font-size: 0.72rem;
	color: var(--np-muted);
}

.np-sched-day.is-on {
	background: var(--np-available);
	border-color: transparent;
	color: #fff;
}

.np-sched-day.is-holiday {
	background: var(--np-surface-2);
	color: var(--np-muted);
	cursor: not-allowed;
}

.np-sched-day.is-holiday small {
	color: var(--np-full);
	font-weight: 700;
}

.np-week-tab.is-holiday small {
	color: var(--np-full);
	font-weight: 700;
}

.np-week-tab.is-active.is-holiday small {
	color: rgba(255, 255, 255, 0.9);
}

.np-sched-day.is-on small {
	color: rgba(255, 255, 255, 0.9);
}

/* イベントフォーム */
.np-event-form {
	display: grid;
	gap: 12px;
	margin-bottom: 8px;
}

.np-event-form input[type="text"],
.np-event-form input[type="date"],
.np-event-form textarea {
	width: 100%;
	padding: 10px;
	background: var(--np-bg);
	border: 1px solid var(--np-border);
	border-radius: 8px;
	color: var(--np-text);
	font-size: 1rem;
	font-family: inherit;
}

.np-sep {
	border: none;
	border-top: 1px dashed var(--np-border);
	margin: 18px 0;
}

.np-event-new summary {
	cursor: pointer;
	color: var(--np-accent);
	padding: 8px 0;
	font-weight: 600;
}

.np-event-new[open] summary {
	margin-bottom: 12px;
}

/* 写真編集 */
.np-photo-edit {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.np-photo-edit__current {
	width: 170px;
	aspect-ratio: 4 / 3;
	background: var(--np-surface-2);
	border-radius: var(--np-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* 縦アイキャッチのプレビューは縦長で表示 */
.np-photo-edit__current--portrait {
	width: 120px;
	aspect-ratio: 3 / 4;
}

/* ロゴのプレビューは正方形・余白あり（透過PNG向け） */
.np-photo-edit__current--logo {
	width: 130px;
	aspect-ratio: 1 / 1;
	background: #f3f3f3;
	padding: 8px;
}
.np-photo-edit__current--logo img {
	object-fit: contain;
}

/* 店舗ページのロゴ（店舗ロゴ＋運営グループロゴ） */
.np-store__logos {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 8px;
}
.np-store__logo img {
	max-width: 220px;
	max-height: 90px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.np-store__group-logo {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.np-store__group-label {
	font-size: 0.68rem;
	color: var(--np-muted);
}
.np-store__group-logo img {
	max-width: 140px;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.np-photo-edit__current img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-photo-edit .np-field {
	flex: 1;
	min-width: 180px;
}

.np-photo-edit input[type="file"] {
	width: 100%;
	color: var(--np-text);
	font-size: 0.9rem;
}

/* 店長アカウント一覧 */
.np-mgr-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.np-mgr-list li {
	padding: 10px 4px;
	border-bottom: 1px solid var(--np-border);
	font-size: 0.92rem;
}

.np-mgr-store {
	display: block;
	margin-top: 2px;
	font-size: 0.8rem;
	color: var(--np-accent);
	font-weight: 700;
}

.np-mgr-item__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.np-mgr-item__move {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.np-mgr-item__move select {
	padding: 8px 10px;
	background: var(--np-bg);
	border: 1px solid var(--np-border);
	border-radius: 8px;
	color: var(--np-text);
	font-size: 0.88rem;
}

.np-btn--sm {
	padding: 8px 14px;
	font-size: 0.85rem;
	box-shadow: none;
}

.np-link-danger {
	background: none;
	border: none;
	color: var(--np-full);
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	padding: 8px 4px;
	text-decoration: underline;
}

.np-event-del {
	margin-top: 6px;
}

/* 会社ダッシュボード：店舗の折りたたみ編集 */
.np-store-edit {
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	margin-bottom: 12px;
	overflow: hidden;
}

.np-store-edit > summary {
	cursor: pointer;
	padding: 14px 16px;
	background: var(--np-surface-2);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
}

/* デフォルトの三角を消す（Safari/Chrome） */
.np-store-edit > summary::-webkit-details-marker {
	display: none;
}

/* 右側に開閉用の▼を表示し、開いたら回転 */
.np-store-edit > summary::after {
	content: '▼';
	margin-left: auto;
	color: var(--np-accent-dark);
	font-size: 0.8rem;
	transition: transform 0.2s ease;
}
.np-store-edit[open] > summary::after {
	transform: rotate(180deg);
}

.np-store-edit[open] > summary {
	border-bottom: 1px solid var(--np-border);
}

.np-store-edit .np-event-form {
	padding: 16px;
}

.np-store-edit__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.np-link-sub {
	font-size: 0.85rem;
	color: var(--np-muted);
}

.np-tag-warn {
	font-size: 0.72rem;
	font-weight: 700;
	color: #1a1a1a;
	background: var(--np-busy);
	padding: 2px 8px;
	border-radius: 999px;
}

.np-req {
	font-size: 0.7rem;
	color: var(--np-full);
	margin-left: 6px;
}

.np-dash .np-event-form select,
.np-store-edit select {
	width: 100%;
	padding: 10px;
	background: var(--np-bg);
	border: 1px solid var(--np-border);
	border-radius: 8px;
	color: var(--np-text);
	font-size: 1rem;
}

.np-hint {
	display: block;
	margin-top: 4px;
	font-size: 0.75rem;
	color: var(--np-muted);
}

/* イベント追加者ラベル */
.np-event-author {
	margin: 0 0 4px;
	font-size: 0.78rem;
	color: var(--np-accent);
	font-weight: 600;
}

.np-event-meta {
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--np-muted);
}

/* ---------- フッター ---------- */
.np-footer {
	border-top: 1px solid var(--np-border);
	padding: 24px 0;
	margin-top: 40px;
}

.np-footer__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 16px;
	text-align: center;
}

.np-footer__copy {
	margin: 0;
	color: var(--np-muted);
	font-size: 0.82rem;
}

/* ===== 集計ボックスのカテゴリ表記（上の行に表示） ===== */
.np-stats__cat {
	flex: 0 0 100%;
	width: 100%;
	text-align: center;
	font-weight: 700;
	color: var(--np-accent-dark);
	padding-bottom: 8px;
	margin-bottom: 2px;
	border-bottom: 2px solid var(--np-border);
}

/* ===== TOPバナースライダー ===== */
.np-banner-slider {
	position: relative;
	width: calc(100% - 32px);
	max-width: 1100px;
	margin: 18px auto 8px;
	border-radius: var(--np-radius);
	overflow: hidden;
	box-shadow: var(--np-shadow);
	background: #fce7f0;
}
.np-banner-slider__track {
	display: flex;
	transition: transform 0.5s ease;
	will-change: transform;
}
.np-banner-slide {
	flex: 0 0 100%;
	min-width: 100%;
	aspect-ratio: 16 / 9;
}
.np-banner-slide a,
.np-banner-slide {
	display: block;
}
.np-banner-slide a { width: 100%; height: 100%; }
.np-banner-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.np-banner-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	color: var(--np-accent-dark);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: background 0.15s ease;
}
.np-banner-slider__arrow:hover { background: #fff; }
.np-banner-slider__arrow--prev { left: 12px; }
.np-banner-slider__arrow--next { right: 12px; }
.np-banner-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.np-banner-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.np-banner-slider__dot.is-active {
	background: var(--np-accent);
	transform: scale(1.2);
}
@media ( max-width: 600px ) {
	.np-banner-slider { margin: 10px auto 4px; border-radius: 10px; }
	.np-banner-slider__arrow { width: 32px; height: 32px; font-size: 1.3rem; }
}

/* ===== 会員登録CTA（TOP） ===== */
.np-member-cta {
	margin: 28px 0;
}
.np-member-cta__box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, #fff0f6, #ffe3ee);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	box-shadow: var(--np-shadow);
	padding: 22px 26px;
}
.np-member-cta__lead {
	margin: 0 0 6px;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--np-text);
	line-height: 1.5;
}
.np-member-cta__sub {
	margin: 0;
	font-size: 0.9rem;
	color: var(--np-muted);
}
.np-member-cta__btn {
	white-space: nowrap;
	font-size: 1.05rem;
	padding: 14px 28px;
}
.np-member-cta__login {
	margin: 10px 0 0;
	text-align: right;
	font-size: 0.88rem;
	color: var(--np-muted);
}
.np-member-cta__login a {
	color: var(--np-accent-dark);
	font-weight: 700;
}
.np-only-sp { display: none; }
@media ( max-width: 600px ) {
	.np-member-cta__box { flex-direction: column; align-items: stretch; text-align: center; }
	.np-member-cta__btn { width: 100%; text-align: center; }
	.np-member-cta__login { text-align: center; }
	.np-only-sp { display: inline; }
}

/* ===== お気に入りボタン ===== */
.np-store__fav,
.np-cast__fav {
	margin-top: 10px;
}
.np-fav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border: 2px solid var(--np-accent);
	background: var(--np-surface);
	color: var(--np-accent-dark);
	font-size: 0.95rem;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 999px;
	transition: all 0.15s ease;
	text-decoration: none;
	line-height: 1;
}
.np-fav:hover { background: var(--np-surface-2); }
.np-fav.is-active {
	background: var(--np-accent);
	color: #fff;
}
.np-fav__icon { font-size: 1.1rem; }
.np-fav--guest {
	border-color: var(--np-border);
	color: var(--np-accent-dark);
	font-size: 0.88rem;
}
.np-fav[disabled] { opacity: 0.6; cursor: default; }

/* ===== マイページ ===== */
.np-mypage__head { margin: 20px 0 10px; }
.np-mypage__titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.np-logout-link {
	font-size: 0.82rem;
	color: var(--np-muted);
	text-decoration: underline;
	white-space: nowrap;
}
.np-logout-link:hover { color: var(--np-accent-dark); }
.np-mypage__section { margin: 28px 0; }
.np-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
.np-btn--ghost {
	background: transparent;
	border: 2px solid var(--np-border);
	color: var(--np-accent-dark);
}
.np-btn--ghost:hover { background: var(--np-surface-2); }

/* ===== 写真アップロード（アイキャッチ／店内写真） ===== */
.np-photo-subtitle {
	font-size: 1rem;
	font-weight: 700;
	color: var(--np-text);
	margin: 6px 0 2px;
}
.np-photo-hint {
	font-size: 0.82rem;
	margin: 0 0 10px;
}
.np-photo-divider {
	border: none;
	border-top: 1px dashed var(--np-border);
	margin: 20px 0 16px;
}
.np-interior-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}
.np-interior-item {
	display: block;
	border: 1px solid var(--np-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--np-surface);
	cursor: pointer;
}
.np-interior-item img {
	display: block;
	width: 100%;
	height: 90px;
	object-fit: cover;
}
.np-interior-del {
	display: block;
	text-align: center;
	font-size: 0.78rem;
	padding: 4px 0;
	color: var(--np-accent-dark);
	background: var(--np-surface-2);
}

/* ===== 店舗詳細：店内写真ギャラリー ===== */
.np-store-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.np-store-gallery__item {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--np-shadow);
}
.np-store-gallery__item img {
	display: block;
	width: 100%;
	height: 130px;
	object-fit: cover;
	transition: transform 0.2s ease;
}
.np-store-gallery__item {
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}
.np-store-gallery__item:hover img {
	transform: scale(1.05);
}

/* ===== 会社プロフィール メイン画像スライダー ===== */
.np-company-slider {
	width: 100%;
	max-width: none;
	margin: 4px 0 18px;
}

/* ===== 会社プロフィール ===== */
.np-company__header {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin: 10px 0 18px;
}
.np-company__logo img {
	max-width: 160px;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.np-company__title {
	margin: 0 0 4px;
	font-size: 1.6rem;
}
.np-company__area,
.np-company__site {
	margin: 2px 0;
	font-size: 0.9rem;
	color: var(--np-muted);
}
.np-company__site a {
	color: var(--np-accent-dark);
	font-weight: 700;
}

/* ===== 会社ダッシュボード 店舗の営業ステータス ===== */
.np-company-cong {
	margin: 4px 0 14px;
	padding: 12px;
	background: var(--np-surface-2, #fff7fb);
	border: 1px solid var(--np-border);
	border-radius: 12px;
}
.np-company-cong .np-field__label {
	margin-bottom: 8px;
}

/* ===== お知らせ 掲載先 店舗選択 ===== */
.np-news-store-pick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}
.np-news-store-pick__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--np-border);
	border-radius: 999px;
	background: var(--np-surface);
	cursor: pointer;
	font-size: 0.88rem;
}
.np-news-store-pick__item input {
	width: 16px;
	height: 16px;
	margin: 0;
}

/* ===== お知らせ 横スライダー ===== */
.np-news-slider {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding-bottom: 12px;
	scrollbar-color: var(--np-accent) var(--np-border);
	scrollbar-width: thin;
}
.np-news-slider::-webkit-scrollbar { height: 8px; }
.np-news-slider::-webkit-scrollbar-track { background: var(--np-border); border-radius: 999px; }
.np-news-slider::-webkit-scrollbar-thumb { background: var(--np-accent); border-radius: 999px; }
.np-news-card {
	flex: 0 0 auto;
	width: min(85%, 300px);
	scroll-snap-align: start;
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	border-radius: var(--np-radius);
	overflow: hidden;
	box-shadow: var(--np-shadow);
}
.np-news-card__thumb img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}
.np-news-card__body {
	padding: 12px 14px;
}
.np-news-card__date {
	margin: 0 0 4px;
	font-size: 0.78rem;
	color: var(--np-accent);
}
.np-news-card__title {
	margin: 0 0 6px;
	font-size: 1rem;
}
.np-news-card__text {
	font-size: 0.85rem;
	color: var(--np-text);
}

/* イベントの開催店舗ラベル */
.np-events__store-label {
	display: inline-block;
	margin: 0 0 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--np-accent-dark);
}

/* ===== 店舗 電話・地図 ===== */
.np-tel-btn {
	display: inline-block;
	font-size: 1.05rem;
	padding: 12px 24px;
	margin-bottom: 12px;
}
.np-store__addr-line {
	margin: 0 0 10px;
	color: var(--np-text);
	font-size: 0.95rem;
}
.np-store-map {
	border-radius: var(--np-radius);
	overflow: hidden;
	box-shadow: var(--np-shadow);
	line-height: 0;
}
.np-store-map iframe {
	display: block;
	width: 100%;
}

/* ===== 店内写真 ライトボックス ===== */
.np-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
	padding: 20px;
}
.np-lightbox[hidden] { display: none; }
.np-lightbox__figure {
	margin: 0;
	max-width: 90vw;
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.np-lightbox__img {
	max-width: 90vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	background: #111;
}
.np-lightbox__count {
	color: #fff;
	font-size: 0.9rem;
	margin-top: 12px;
	letter-spacing: 0.05em;
}
.np-lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}
.np-lightbox__close:hover { background: rgba(255, 255, 255, 0.3); }
.np-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 2.2rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.np-lightbox__nav:hover { background: rgba(255, 255, 255, 0.3); }
.np-lightbox__nav--prev { left: 16px; }
.np-lightbox__nav--next { right: 16px; }
@media ( max-width: 600px ) {
	.np-lightbox__nav { width: 40px; height: 40px; font-size: 1.7rem; }
	.np-lightbox__nav--prev { left: 6px; }
	.np-lightbox__nav--next { right: 6px; }
	.np-lightbox__close { top: 8px; right: 8px; }
}

/* ===== 会社プロフィール ライブプレビュー ===== */
.np-profile-preview {
	margin: 6px 0 16px;
}
.np-preview-box {
	border: 2px dashed var(--np-border);
	border-radius: var(--np-radius);
	padding: 18px 20px;
	background: var(--np-bg);
	transition: background-color 0.15s ease;
}
.np-preview-name {
	margin: 0 0 6px;
	font-size: 1.3rem;
}
.np-preview-area,
.np-preview-site {
	margin: 2px 0;
	font-size: 0.9rem;
	color: var(--np-muted);
}
.np-preview-desc {
	margin-top: 10px;
	font-size: 0.95rem;
	line-height: 1.7;
}

/* ===== 入力ロック（許可制）オーバーレイ ===== */
.np-lockable {
	position: relative;
}
.np-lockable.is-locked {
	pointer-events: none;
}
.np-lockable__cover {
	position: absolute;
	inset: -4px;
	z-index: 5;
	background: rgba( 255, 255, 255, 0.55 );
	border-radius: 12px;
	cursor: not-allowed;
}
.np-lockable.is-locked input,
.np-lockable.is-locked textarea,
.np-lockable.is-locked select,
.np-lockable.is-locked button {
	opacity: 0.6;
}

.np-notice--warn {
	background: #fff6e5;
	border: 1px solid #ffd9a0;
	color: #8a5a00;
	padding: 10px 14px;
	border-radius: 10px;
}

/* ===== ダッシュボード 背景色ピッカー ===== */
.np-bg-field {
	background: var(--np-surface-2, #fff7fb);
	border: 1px solid var(--np-border);
	border-radius: 12px;
	padding: 14px 16px;
}
.np-bg-enable {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 12px;
	font-weight: 700;
	cursor: pointer;
}
.np-bg-enable input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 0;
}
.np-bg-color-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.np-bg-color-row input[type="color"] {
	width: 56px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--np-border);
	border-radius: 8px;
	cursor: pointer;
	flex: 0 0 auto;
}
.np-bg-color-row span {
	font-size: 0.85rem;
	color: var(--np-muted);
}
.np-bg-note {
	margin: 12px 0 0;
	font-size: 0.8rem;
}

/* ===== 飲食店 営業時間設定（曜日ごと） ===== */
.np-hours-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 0;
	border-bottom: 1px solid var(--np-border);
}
.np-hours-row__day {
	font-weight: 700;
	width: 1.8em;
	text-align: center;
}
.np-hours-row__closed {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.85rem;
}
.np-hours-row select {
	padding: 6px 8px;
}

/* ===== 飲食店ダッシュボード 日付ごとの時間枠チェック ===== */
.np-slotday {
	border: 1px solid var(--np-border);
	border-radius: 10px;
	padding: 8px 10px;
	margin-bottom: 8px;
	background: var(--np-surface);
}
.np-slotday__label {
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 6px;
}
.np-slotday__times {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	min-width: 0;
	max-width: 100%;
}
.np-slotday { max-width: 100%; overflow: hidden; }
.np-slotchk { flex: 0 0 auto; cursor: pointer; }
.np-slotchk input { position: absolute; opacity: 0; pointer-events: none; }
.np-slotchk span {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid var(--np-border);
	border-radius: 8px;
	font-size: 0.8rem;
	white-space: nowrap;
	background: var(--np-bg);
}
.np-slotchk input:checked + span {
	background: var(--np-accent);
	color: #fff;
	border-color: transparent;
}

/* ===== 飲食店 予約フォーム（時間枠スライド） ===== */
.np-book-form { margin-top: 14px; }
.np-slot-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding: 4px 0 10px;
	margin-bottom: 8px;
}
.np-slot {
	flex: 0 0 auto;
	scroll-snap-align: start;
	cursor: pointer;
}
.np-slot input { position: absolute; opacity: 0; pointer-events: none; }
.np-slot span {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--np-border);
	border-radius: 999px;
	background: var(--np-surface);
	font-weight: 700;
	white-space: nowrap;
}
.np-slot input:checked + span {
	background: var(--np-accent);
	color: #fff;
	border-color: transparent;
}
.np-resv-login { margin: 10px 0; }

/* ===== 予約アイテム（ダッシュボード・会員一覧） ===== */
.np-resv-list { display: flex; flex-direction: column; gap: 10px; }
.np-resv-item {
	border: 1px solid var(--np-border);
	border-left: 4px solid var(--np-muted);
	border-radius: 10px;
	padding: 12px 14px;
	background: var(--np-surface);
	margin-bottom: 10px;
}
.np-resv-item--pending { border-left-color: #ffb454; }
.np-resv-item--confirmed { border-left-color: #51c98a; }
.np-resv-item--cancelled { border-left-color: #ccc; opacity: 0.7; }
.np-resv-item__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.np-resv-item__date { font-weight: 700; font-size: 1.05rem; }
.np-resv-badge--pending { background: #ffb454; }
.np-resv-badge--confirmed { background: #51c98a; }
.np-resv-badge--cancelled { background: #aaa; }
.np-resv-item__actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.np-resv-cast-tag {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	color: var(--np-accent-dark);
	font-size: 0.82rem;
	font-weight: 700;
}
.np-resv-cancel-reason {
	margin: 8px 0 0;
	padding: 8px 10px;
	background: #fdecec;
	border-radius: 8px;
	font-size: 0.85rem;
	color: #a33;
}

/* ===== 飲食店 予約受付状況（10日分） ===== */
.np-resv-days {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0;
}
.np-resv-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 58px;
	padding: 8px 6px;
	border-radius: 10px;
	border: 1px solid var(--np-border);
	background: var(--np-surface);
	font-size: 0.78rem;
}
.np-resv-day__mark { font-size: 1.2rem; font-weight: 700; line-height: 1; }
.np-resv-day.is-ok { border-color: #51c98a; }
.np-resv-day.is-ok .np-resv-day__mark { color: #2fa86a; }
.np-resv-day.is-ng { background: #f4f4f4; color: #999; }
.np-resv-day.is-ng .np-resv-day__mark { color: #c0392b; }

/* ===== 飲食店 メイン画像は16:9固定 ===== */
.np-theme-mono .np-store__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--np-surface-2, #f0f0f0);
}
.np-theme-mono .np-store__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== 飲食店 ジャンルタイル ===== */
.np-genre-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
	margin: 8px 0 22px;
}
.np-genre-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--np-radius);
	overflow: hidden;
	background: var(--np-surface-2, #eee) center/cover no-repeat;
	text-decoration: none;
	box-shadow: var(--np-shadow);
	border: 2px solid transparent;
}
.np-genre-tile.is-active {
	border-color: var(--np-accent);
}
.np-genre-tile__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: rgba(0, 0, 0, 0.38);
	color: #fff;
	text-align: center;
}
.np-genre-tile__icon { font-size: 1.6rem; line-height: 1; }
.np-genre-tile__name { font-weight: 700; font-size: 0.95rem; }
.np-genre-tile__body small { font-size: 0.72rem; opacity: 0.9; }

/* ===== 行きたいお店カードと「行きたい！」ボタンの間隔 ===== */
.np-rest-cell {
	display: flex;
	flex-direction: column;
}
.np-rest-cell .np-want-btn,
.np-rest-cell .np-want-form,
.np-rest-cell .np-want-ajax {
	margin-top: 20px;
}

/* ===== キャストダッシュボード 上部メニュー（アイコンボタン） ===== */
.np-dash-menu {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 4px 0 16px;
}
.np-dash-menu__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 6px;
	border: 1px solid var(--np-border);
	border-radius: 12px;
	background: var(--np-surface);
	color: var(--np-text);
	font-size: 1.3rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
}
.np-dash-menu__btn span {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--np-text);
}
.np-dash-menu__btn:hover { background: var(--np-surface-2); }
.np-dash-menu__btn.is-unread {
	border-color: var(--np-accent);
	background: var(--np-surface-2);
}
.np-dash-menu__badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: #e0245e;
	color: #fff !important;
	font-size: 0.72rem !important;
	text-align: center;
}
@media ( max-width: 600px ) {
	.np-dash-menu { grid-template-columns: repeat(2, 1fr); }
}

/* ===== キャストダッシュボード 集計カード ===== */
.np-stat-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 0 16px;
}
.np-stat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 6px;
	border-radius: 12px;
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	text-align: center;
}
.np-stat-card__label {
	font-size: 0.72rem;
	color: var(--np-muted);
}
.np-stat-card__value {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--np-accent-dark);
}

/* ===== ヘッダーの新着バッジ ===== */
.np-header__badge {
	display: inline-block;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #e0245e;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
}

/* ===== 未読メッセージの表示 ===== */
.np-notice--unread {
	background: #fff3cd;
	border: 1px solid #ffd76a;
	color: #8a5a00;
	font-weight: 700;
}
.np-notice--unread a { color: var(--np-accent-dark); }
.np-btn.np-has-unread {
	background: var(--np-accent);
	color: #fff;
	position: relative;
	animation: np-unread-pulse 1.2s ease-in-out infinite;
}
@keyframes np-unread-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,126,179,0.6); }
	50% { box-shadow: 0 0 0 6px rgba(255,126,179,0); }
}

/* ===== 会員ランクカード ===== */
.np-stat-card--rank {
	background: linear-gradient( 135deg, #fff0f6, #ffe0ee );
}
.np-stat-card--rank .np-stat-card__value {
	color: var(--np-accent);
}

/* ===== チャット解放ポイント設定 ===== */
.np-chatmin-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.95rem;
	margin: 6px 0;
}
.np-chatmin-row input[type="number"] {
	width: 80px;
	text-align: center;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 8px;
	border: 2px solid var(--np-accent);
	border-radius: 10px;
}
.np-chatmin-row strong { color: var(--np-accent-dark); }

/* ===== 本指名予約 ===== */
.np-member-likes {
	margin: 6px 0 0;
	font-size: 0.95rem;
	color: var(--np-accent-dark);
}
.np-nom-item {
	border: 1px solid var(--np-border);
	border-left: 4px solid var(--np-accent);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 12px;
	background: var(--np-surface);
}
.np-nom-item__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}
.np-nom-item__date { font-weight: 700; font-size: 1.05rem; }
.np-nom-item__member {
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	border-radius: 999px;
	padding: 2px 12px;
	font-weight: 700;
	font-size: 0.85rem;
}
.np-nom-more { margin-top: 8px; }
.np-nom-more__btn {
	cursor: pointer;
	list-style: none;
	display: inline-block;
	color: var(--np-accent);
	font-weight: 700;
	font-size: 0.9rem;
	padding: 6px 0;
}
.np-nom-more__btn::-webkit-details-marker { display: none; }
.np-nom-more__btn::after { content: " ▼"; font-size: 0.8em; }
.np-nom-more[open] .np-nom-more__btn::after { content: " ▲"; }
.np-nom-more__body { padding-top: 6px; }
.np-nom-profile {
	background: var(--np-surface-2);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 6px 0;
	font-size: 0.88rem;
}
.np-nom-profile__row { margin: 2px 0; }
.np-nom-profile__row span { color: var(--np-muted); }
.np-nom-item__note { margin: 6px 0; font-size: 0.88rem; }
.np-nom-item__points {
	margin: 4px 0;
	font-size: 0.9rem;
	color: var(--np-accent-dark);
}
.np-nom-item__points strong { color: var(--np-accent); }
.np-nom-item__like { margin-top: 6px; }
.np-nom-like-box {
	margin-top: 8px;
	padding: 10px 12px;
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	border-radius: 10px;
}
.np-nom-like-box__title { margin: 0 0 6px; font-weight: 700; font-size: 0.88rem; }
.np-nom-like-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.np-nom-like-form input[type="number"] {
	width: 80px;
	text-align: center;
	font-weight: 700;
	padding: 8px;
	border: 2px solid var(--np-accent);
	border-radius: 10px;
}
.np-nom-form { margin-top: 10px; }
.np-nom-del { margin-top: 10px; text-align: right; }
.np-cc-del { margin-top: 8px; text-align: right; }

/* ===== 折りたたみカード（details） ===== */
.np-fold {
	background: #fff;
	border: 1px solid var(--np-border);
	border-radius: 16px;
	padding: 2px 18px;
	box-shadow: 0 6px 18px rgba( 233, 30, 99, 0.06 );
}
.np-fold__summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 2px;
}
.np-fold__summary::-webkit-details-marker { display: none; }
.np-fold__title { font-weight: 700; font-size: 1.05rem; }
.np-fold__icon { color: var(--np-accent); transition: transform 0.2s ease; font-size: 0.85rem; }
.np-fold[open] .np-fold__icon { transform: rotate( 180deg ); }
.np-fold__body { padding: 0 0 18px; }

/* ===== 本指名予約の折りたたみボタン ===== */
.np-nom-fold { margin-top: 6px; }
.np-nom-fold__btn {
	list-style: none;
	cursor: pointer;
	display: block;
	text-align: center;
	background: var(--np-accent);
	color: #fff;
	font-weight: 700;
	padding: 15px;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba( 255, 126, 179, 0.35 );
	transition: filter 0.15s ease;
}
.np-nom-fold__btn:hover { filter: brightness( 1.05 ); }
.np-nom-fold__btn::-webkit-details-marker { display: none; }
.np-nom-fold__btn::after { content: " ▼"; font-size: 0.8em; }
.np-nom-fold[open] .np-nom-fold__btn { border-radius: 16px 16px 0 0; box-shadow: none; }
.np-nom-fold[open] .np-nom-fold__btn::after { content: " ▲"; }
.np-nom-fold .np-fold__body {
	padding: 16px;
	border: 1px solid var(--np-border);
	border-top: none;
	border-radius: 0 0 16px 16px;
}

/* ===== ポイントを贈る ===== */
.np-gift {
	background: linear-gradient( 135deg, #fff0f6 0%, #ffe3ef 100% );
	border: 1px solid var(--np-border);
	border-radius: 16px;
	padding: 18px 20px;
}
/* ===== 共通ログイン：アカウント種別表示 ===== */
.np-login-account {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
	text-align: center;
}
.np-login-account__label { font-size: 0.78rem; color: var(--np-muted); }
.np-login-account__value { font-size: 1.25rem; font-weight: 700; color: var(--np-accent); }
.np-login-account__id { font-size: 0.82rem; color: var(--np-muted); }

/* ===== 運営からのお知らせ（掲示板） ===== */
.np-board {
	background: linear-gradient( 135deg, #fff8e6 0%, #fff0f6 100% );
	border: 2px solid #ffd98a;
}
.np-board__item {
	padding: 12px 0;
	border-bottom: 1px dashed var(--np-border);
}
.np-board__item:last-child { border-bottom: none; padding-bottom: 0; }
.np-board__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.np-board__title { margin: 0; font-size: 1rem; font-weight: 700; }
.np-board__date { font-size: 0.8rem; color: var(--np-muted); white-space: nowrap; }
.np-board__body { margin-top: 6px; font-size: 0.92rem; line-height: 1.7; }
.np-board__body p { margin: 0 0 8px; }

/* ===== 本指名予約 詳細カレンダー ===== */
.np-nomcal-card { text-align: center; }
.np-nomcal__big { margin-bottom: 12px; }
.np-nomcal__ym { display: block; font-size: 0.95rem; color: var(--np-muted); }
.np-nomcal__day {
	display: inline-block;
	font-size: 3rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--np-accent);
}
.np-nomcal__sub { display: block; font-size: 1rem; font-weight: 700; }
.np-nomcal { width: 100%; max-width: 360px; margin: 0 auto; border-collapse: collapse; }
.np-nomcal th {
	font-size: 0.78rem;
	color: var(--np-muted);
	padding: 4px 0;
	font-weight: 600;
}
.np-nomcal td {
	height: 38px;
	text-align: center;
	font-size: 0.9rem;
	border-radius: 8px;
}
.np-nomcal td.is-target {
	background: var(--np-accent);
	color: #fff;
	font-weight: 800;
	box-shadow: 0 4px 10px rgba( 255, 126, 179, 0.4 );
}
.np-nom-item__detaillink { margin-top: 8px; }

/* 予約一覧のミニカレンダー */
.np-nomcal-list { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 14px; }
.np-nomcal-mini {
	flex: 1 1 280px;
	max-width: 360px;
	border: 1px solid var(--np-border);
	border-radius: 12px;
	padding: 10px 12px;
	background: #fff;
}
.np-nomcal-mini__title { text-align: center; font-weight: 700; margin: 0 0 8px; }
.np-nomcal td.is-booked { padding: 0; }
.np-nomcal td.is-booked a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 38px;
	text-decoration: none;
	color: #fff;
	background: var(--np-accent);
	border-radius: 8px;
	font-weight: 800;
	line-height: 1.1;
}
.np-nomcal__dot { font-size: 0.6rem; font-weight: 700; margin-top: 1px; }

/* ===== ポイント説明 ===== */
.np-pointinfo {
	background: linear-gradient( 135deg, #fff0f6 0%, #fff7e6 100% );
	border: 2px solid var(--np-border);
	line-height: 1.7;
}
.np-pointinfo p { margin: 8px 0; }
.np-pointinfo__sub { font-weight: 700; margin-top: 12px; }
.np-pointinfo__list { margin: 4px 0 0; padding-left: 1.1em; }
.np-pointinfo__list li { margin: 4px 0; }

/* ===== ポイント履歴 ===== */
.np-pointlog { list-style: none; margin: 0; padding: 0; }
.np-pointlog__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--np-border);
}
.np-pointlog__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-pointlog__source { font-weight: 700; font-size: 0.9rem; }
.np-pointlog__note { font-size: 0.82rem; color: var(--np-muted); }
.np-pointlog__date { font-size: 0.78rem; color: var(--np-muted); }
.np-pointlog__amount { font-weight: 700; white-space: nowrap; }
.np-pointlog__amount.is-plus { color: var(--np-accent); }
.np-pointlog__amount.is-minus { color: #888; }
.np-points-card .np-btn { margin-top: 8px; }

/* ===== エリア月間No.1バナー ===== */
.np-area-banner {
	margin: 0 0 18px;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	box-shadow: 0 8px 24px rgba( 233, 30, 99, 0.12 );
}
.np-area-banner__img,
.np-area-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.np-champ-card {
	background: linear-gradient( 135deg, #fff7e6 0%, #ffe9f2 100% );
	border: 2px solid #ffcf6b;
}
/* 全国TOP5バナー（16:9スライドショー） */
.np-top5-slider {
	margin: 0 0 18px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba( 233, 30, 99, 0.12 );
}
.np-top5-slider .np-banner-slide { aspect-ratio: 16 / 9; }
.np-top5-slider .np-banner-slide a,
.np-top5-slider .np-banner-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-area-slider {
	margin: 0 0 18px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba( 233, 30, 99, 0.12 );
}
.np-area-slider .np-area-banner__img,
.np-area-slider img { width: 100%; height: 100%; object-fit: contain; display: block; }
.np-champ-card__preview {
	margin: 10px 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.np-champ-card__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-champ-card__note { margin: 12px 0 0; font-size: 0.8rem; color: var(--np-muted); line-height: 1.6; }

/* ===== エリアのポイント上位キャスト ===== */
.np-castrank { margin-top: 16px; }
.np-castrank__title { font-size: 1rem; margin: 0 0 10px; font-weight: 700; }
.np-castrank__list {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
}
.np-castrank__item {
	flex: 0 0 auto;
	width: 116px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--np-border);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}
.np-castrank__num {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.8rem;
	background: var(--np-accent);
	color: #fff;
	text-align: center;
	z-index: 2;
}
.np-castrank__num.np-rank-1 { background: #f6b73c; }
.np-castrank__num.np-rank-2 { background: #b9b9c3; }
.np-castrank__num.np-rank-3 { background: #cd8b5e; }
.np-castrank__thumb { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #f7f7f7; }
.np-castrank__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-castrank__name {
	display: block;
	padding: 6px 8px 0;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.np-castrank__pt { display: block; padding: 0 8px 8px; font-size: 0.8rem; color: var(--np-accent); font-weight: 700; }

/* ===== チャット解放の条件 ===== */
.np-chatreq { border-radius: 16px; padding: 16px 18px; }
.np-chatreq.is-ok { background: #eafaf0; border: 1px solid #b7e4c7; }
.np-chatreq.is-ng { background: var(--np-surface-2); border: 1px solid var(--np-border); }
.np-chatreq__cond { margin: 4px 0 8px; font-size: 0.92rem; line-height: 1.6; }
.np-chatreq__cond strong { color: var(--np-accent); }
.np-chatreq__row { margin: 4px 0; }
.np-chatreq__row strong { color: var(--np-accent); }
.np-chatreq__msg { margin: 8px 0 0; font-weight: 600; line-height: 1.6; }

.np-gift__balance { font-size: 1.05rem; margin: 6px 0 10px; }
.np-gift__form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-gift__form input[type="number"] {
	width: 120px;
	text-align: center;
	font-weight: 700;
	padding: 10px;
	border: 2px solid var(--np-accent);
	border-radius: 12px;
}

/* ===== 口コミ ===== */
.np-reviews { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.np-review {
	border: 1px solid var(--np-border);
	border-radius: 12px;
	padding: 12px 14px;
	background: var(--np-surface);
	margin-bottom: 10px;
}
.np-review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	flex-wrap: wrap;
}
.np-review__name { font-weight: 700; font-size: 0.9rem; }
.np-review__date { font-size: 0.75rem; color: var(--np-muted); }
.np-review__body { font-size: 0.9rem; line-height: 1.6; }
.np-review__actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* 口コミ入力欄（おしゃれ版） */
.np-review-form {
	margin-top: 16px;
	background: linear-gradient( 135deg, #fff5f9, #ffe9f2 );
	border: 1px solid var(--np-border);
	border-radius: 18px;
	padding: 16px 18px;
	box-shadow: var(--np-shadow);
}
.np-review-form__head {
	font-weight: 700;
	color: var(--np-accent-dark);
	margin-bottom: 10px;
	font-size: 0.95rem;
}
.np-review-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--np-border);
	border-radius: 14px;
	padding: 12px 14px;
	font-size: 0.95rem;
	background: #fff;
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-review-form textarea:focus {
	outline: none;
	border-color: var(--np-accent);
	box-shadow: 0 0 0 3px rgba( 255, 126, 179, 0.18 );
}
.np-review-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.np-review-form__note {
	font-size: 0.75rem;
	color: var(--np-muted);
}
.np-review-form__btn {
	padding: 10px 26px;
	border-radius: 999px;
}

/* ===== メッセージ（キャスト⇔システム管理者） ===== */
.np-msg-thread {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 360px;
	overflow-y: auto;
	padding: 8px 0;
	margin-bottom: 10px;
}
.np-msg {
	display: flex;
	flex-direction: column;
	max-width: 80%;
}
.np-msg--cast { align-self: flex-end; align-items: flex-end; }
.np-msg--admin { align-self: flex-start; align-items: flex-start; }
.np-msg__bubble {
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 0.9rem;
	line-height: 1.5;
	word-break: break-word;
}
.np-msg--cast .np-msg__bubble {
	background: var(--np-accent);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.np-msg--admin .np-msg__bubble {
	background: #eee;
	color: #333;
	border-bottom-left-radius: 4px;
}
.np-msg__meta {
	font-size: 0.7rem;
	color: var(--np-muted);
	margin-top: 2px;
}
.np-msg__bubble { position: relative; }
.np-msg__del {
	display: inline;
	margin-left: 6px;
}
.np-msg__del button {
	border: none;
	background: rgba( 0, 0, 0, 0.15 );
	color: #fff;
	width: 18px;
	height: 18px;
	line-height: 18px;
	border-radius: 50%;
	font-size: 0.8rem;
	cursor: pointer;
	padding: 0;
}
.np-msg--admin .np-msg__del button { background: rgba( 0, 0, 0, 0.2 ); color: #fff; }
.np-msg-delall { margin-top: 4px; text-align: right; }
.np-msg-form {
	display: flex;
	gap: 8px;
	align-items: flex-end;
}
.np-msg-form textarea {
	flex: 1;
	min-width: 0;
}

/* ===== キャストID（エンジニア専用表示） ===== */
.np-cast-id-badge {
	display: inline-block;
	background: #2b2b2b;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 6px;
	letter-spacing: 0.05em;
}

/* ===== SNSボタン（店舗・会社プロフィール） ===== */
.np-sns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 18px;
}
.np-sns__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--np-surface);
	border: 1px solid var(--np-border);
	color: var(--np-text);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.np-sns__btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--np-shadow);
}
.np-sns__icon {
	font-size: 1.1rem;
	line-height: 1;
}
.np-sns__btn--instagram { background: linear-gradient(45deg,#fdf497,#fd5949,#d6249f,#285AEB); color: #fff; border: none; }
.np-sns__btn--x { background: #111; color: #fff; border: none; }
.np-sns__btn--tiktok { background: #111; color: #fff; border: none; }
.np-sns__btn--line { background: #06c755; color: #fff; border: none; }
.np-sns__btn--youtube { background: #ff0000; color: #fff; border: none; }

/* ===== フォームのプレビュー＋保存ボタン ===== */
.np-form-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.np-form-actions .np-btn {
	flex: 1 1 auto;
	text-align: center;
}

/* ===== ダッシュボード 公開プロフィールリンク ===== */
.np-dash-profile-link {
	margin: 0 0 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.np-copy-url-btn.is-copied {
	background: var(--np-available);
	color: #fff;
	border-color: transparent;
}

/* ===== ダッシュボードのお気に入り集計 ===== */
.np-dash-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
}
.np-dash-stat {
	background: var(--np-surface-2);
	border: 1px solid var(--np-border);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 0.92rem;
	color: var(--np-text);
}
.np-dash-stat strong {
	color: var(--np-accent-dark);
	font-size: 1.05rem;
}
.np-cast-fav-mini {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.82rem;
	color: var(--np-accent-dark);
	font-weight: 700;
}

/* 店長ダッシュボード：時間ごとの料金の入力行（時間＝左／料金＝右） */
.np-pslot-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; max-width: 100%; }
.np-pslot-row select { flex: 0 0 120px; width: 120px; max-width: 100%; margin: 0; box-sizing: border-box; }
.np-pslot-row input[type="text"] { flex: 1 1 120px; width: auto; min-width: 0; margin: 0; box-sizing: border-box; }
.np-pslot-row .np-pslot-remove { flex: 0 0 auto; width: auto; white-space: nowrap; }

/* 店舗プロフィール：セット料金（時間ごと）のまとまり表示 */
.np-price-system { margin: 0 0 18px; }
.np-price-system__head { background: #3a3a3a; color: #fff; text-align: center; font-weight: 700; letter-spacing: .04em; padding: 13px 16px; border-radius: 999px; font-size: 15px; }
.np-price-system__list { margin-top: 8px; }
.np-price-system__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid rgba(0,0,0,.12); }
.np-price-system__row:last-child { border-bottom: none; }
.np-price-system__time { font-weight: 600; }
.np-price-system__price { font-weight: 700; }

/* 店長ダッシュボード：キャスト管理の行（メイン/サブ画像つき）を見やすく */
.np-cast-mgr-item { flex-wrap: wrap; align-items: center; row-gap: 4px; }
.np-cast-mgr-item > span:first-child { order: 1; flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.np-cast-mgr-item > .np-want-remove { order: 2; flex: 0 0 auto; margin-left: auto; }
.np-cast-mgr-item > .np-cast-img-form { order: 3; flex: 1 1 100%; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--np-border); }
.np-cast-img-form .np-muted { font-size: 0.78rem; font-weight: 700; }
.np-cast-img-form input[type="file"] { font-size: 0.8rem; }
@media ( max-width: 600px ) {
	.np-cast-img-form { gap: 6px 8px; }
	.np-cast-img-form input[type="file"] { flex: 1 1 100% !important; }
	.np-cast-img-form .np-btn { flex: 1 1 100% !important; }
}

/* 店長ダッシュボード：登録済みイベントの折りたたみ表示 */
.np-event-edit { border: 1px solid var(--np-border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.np-event-edit > .np-event-edit__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.np-event-edit > .np-event-edit__summary::-webkit-details-marker { display: none; }
.np-event-edit__title { font-weight: 700; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-event-edit__meta { font-size: 0.76rem; color: var(--np-muted); flex: 0 0 auto; }
.np-event-edit__edit { font-size: 0.78rem; font-weight: 700; color: var(--np-accent); flex: 0 0 auto; border: 1px solid currentColor; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.np-event-edit:not([open]) .np-event-edit__edit::after { content: " ▼"; }
.np-event-edit[open] .np-event-edit__edit::after { content: " ▲"; }
.np-event-edit[open] > .np-event-edit__summary { border-bottom: 1px dashed var(--np-border); margin-bottom: 8px; }
.np-event-edit > .np-event-form { padding: 0 14px; }
.np-event-edit > .np-event-del { padding: 0 14px 14px; }
@media ( max-width: 600px ) {
	.np-event-edit__meta { display: none; }
}

/* キャスト管理：発行済みアカウントの折りたたみ（PC・スマホ共通） */
.np-mgr-list .np-cast-li { border-bottom: none; padding: 0 0 8px; }
.np-cast-edit { border: 1px solid var(--np-border); border-radius: 10px; overflow: hidden; }
.np-cast-edit > .np-cast-edit__summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.np-cast-edit > .np-cast-edit__summary::-webkit-details-marker { display: none; }
.np-cast-edit__name { font-weight: 700; flex: 0 0 auto; }
.np-cast-edit__meta { font-size: 0.76rem; color: var(--np-muted); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-cast-edit__edit { font-size: 0.78rem; font-weight: 700; color: var(--np-accent); flex: 0 0 auto; border: 1px solid currentColor; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.np-cast-edit:not([open]) .np-cast-edit__edit::after { content: " ▼"; }
.np-cast-edit[open] .np-cast-edit__edit::after { content: " ▲"; }
.np-cast-edit[open] > .np-cast-edit__summary { border-bottom: 1px dashed var(--np-border); }
.np-cast-edit > .np-cast-img-form { padding: 10px 14px 0; }
.np-cast-edit > .np-want-remove { padding: 6px 14px 12px; text-align: right; }

/* 店内写真：スマホは横スライド（スワイプ）表示 */
@media ( max-width: 600px ) {
	.np-store-gallery {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding-bottom: 8px;
		scrollbar-width: thin;
	}
	.np-store-gallery__item {
		flex: 0 0 72%;
		scroll-snap-align: center;
	}
	.np-store-gallery__item img {
		height: 190px;
	}
}

/* 勤怠管理ページ */
.np-dash-timeclock-link { margin: 6px 0 14px; }
.np-tc-card.is-on { border: 2px solid #27ae60; }
.np-tc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.np-tc-name { font-size: 1.05rem; font-weight: 700; margin: 0; }
.np-tc-badge { font-size: 0.78rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--np-surface-2, #f1f1f1); color: var(--np-muted); white-space: nowrap; }
.np-tc-badge--on { background: #27ae60; color: #fff; }
.np-tc-since { font-size: 0.85rem; color: var(--np-muted); margin: 0 0 10px; }
.np-tc-actions { margin-bottom: 12px; }
.np-tc-in { background: #27ae60 !important; border-color: #27ae60 !important; color: #fff !important; }
.np-tc-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.np-tc-summary__item { flex: 1 1 28%; min-width: 90px; background: var(--np-surface-2, #faf3f6); border-radius: 10px; padding: 8px 10px; text-align: center; }
.np-tc-summary__label { display: block; font-size: 0.72rem; color: var(--np-muted); margin-bottom: 2px; }
.np-tc-summary__val { display: block; font-size: 1rem; font-weight: 700; }
.np-tc-wage { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px dashed var(--np-border); padding-top: 12px; }
.np-tc-wage__field { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; font-weight: 700; }
.np-tc-wage__field input { width: 120px; max-width: 100%; box-sizing: border-box; }

/* 広告掲載募集ページ：全エリア空き状況テーブル */
.np-slot-availability { max-width: 760px; margin: 14px auto 0; }
.np-slot-availability > summary { cursor: pointer; font-weight: 700; text-align: center; padding: 12px; background: #fff; border: 2px dashed #ff8fc8; border-radius: 14px; color: #e0307f; list-style: none; }
.np-slot-availability > summary::-webkit-details-marker { display: none; }
.np-slot-scroll { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.np-slot-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; min-width: 480px; border-radius: 10px; overflow: hidden; }
.np-slot-table th, .np-slot-table td { border: 1px solid #f0d6e2; padding: 8px 10px; text-align: center; }
.np-slot-table thead th { background: #fff0f6; color: #555; font-weight: 700; white-space: nowrap; }
.np-slot-table tbody th { background: #fafafa; text-align: left; font-weight: 700; white-space: nowrap; }
.np-slot-table tbody tr:nth-child(even) td { background: #fcfcfc; }
.np-slot-table td.is-open { color: #1a7f37; font-weight: 700; }
.np-slot-table td.is-taken { color: #aaa; background: #f4f4f4; }
.np-slot-legend { text-align: center; font-size: 12px; color: #888; margin: 8px 0 0; }
.np-slot-legend .is-open { color: #1a7f37; font-weight: 700; }
.np-slot-legend .is-taken { color: #bbb; font-weight: 700; }

/* 店舗ダッシュボード：会員紹介（アフィリエイト）カード */
.np-affiliate__count { font-size: 1.05rem; margin: 0 0 6px; }
.np-affiliate__count strong { font-size: 1.5rem; color: var(--np-accent); }
.np-affiliate__share { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 12px; }
.np-affiliate__qr { flex: 0 0 auto; text-align: center; }
.np-affiliate__qr img { display: block; border: 1px solid var(--np-border); border-radius: 10px; background: #fff; }
.np-affiliate__qr .np-link-sub { display: inline-block; margin-top: 6px; font-size: 0.8rem; }
.np-affiliate__link { flex: 1 1 240px; min-width: 0; }
.np-affiliate__url { width: 100%; box-sizing: border-box; margin: 4px 0 8px; font-size: 0.85rem; }

/* =========================================================
 * 店長ダッシュボード 新レイアウト（PC＝左サイドメニュー／スマホ＝下部タブバー）
 * ========================================================= */

/* パネルは既定で非表示。JSが対象に .np-panel-on を付けて表示（本来の display を維持） */
.np-sd-main [data-np-panel]:not( .np-panel-on ) { display: none !important; }

/* --- サイドメニュー（PC） --- */
.np-sd__side { display: none; }
.np-sd__brand { font-weight: 800; font-size: 1.05rem; padding: 16px 16px 14px; border-bottom: 1px solid var(--np-border); color: var(--np-accent-dark, #e0307f); }
.np-sd__nav { display: flex; flex-direction: column; padding: 8px; gap: 4px; }
.np-sd__navbtn { text-align: left; background: none; border: none; padding: 12px 14px; border-radius: 10px; font-size: 0.95rem; font-weight: 700; color: #555; cursor: pointer; transition: background .15s; }
.np-sd__navbtn:hover { background: var(--np-surface-2, #fdf2f7); }
.np-sd__navbtn.is-active { background: var(--np-accent, #ff5fa2); color: #fff; }
.np-sd__sidelinks { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-top: 1px solid var(--np-border); }
.np-sd__sidelinks a { padding: 10px 14px; border-radius: 8px; font-size: 0.86rem; color: #666; text-decoration: none; }
.np-sd__sidelinks a:hover { background: var(--np-surface-2, #fdf2f7); }
.np-sd__logout { color: #b32d2e !important; font-weight: 700; }

/* --- 下部タブバー（スマホ） --- */
.np-sd__tabbar { display: none; }
.np-sd__tab { flex: 1 0 64px; scroll-snap-align: center; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; padding: 7px 4px; font-size: 0.66rem; font-weight: 700; color: #9aa0a6; cursor: pointer; }
.np-sd__tabic { font-size: 1.3rem; line-height: 1; filter: grayscale(0.4); opacity: .7; }
.np-sd__tab.is-active { color: var(--np-accent-dark, #e0307f); }
.np-sd__tab.is-active .np-sd__tabic { filter: none; opacity: 1; }

/* ===== PC：左サイドメニュー＋右コンテンツ ===== */
@media ( min-width: 900px ) {
	.np-sd-main { display: flex; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 0; }
	.np-sd__side {
		display: flex; flex-direction: column;
		position: sticky; top: 10px;
		flex: 0 0 240px; width: 240px;
		max-height: calc( 100vh - 20px ); overflow-y: auto;
		background: #fff; border: 1px solid var(--np-border); border-radius: 14px;
		margin: 12px 0 12px 12px; box-shadow: var(--np-shadow);
	}
	.np-sd__content { flex: 1 1 auto; min-width: 0; max-width: 920px; }
	/* サイドメニューにある項目は本文側で重複表示しない */
	.np-sd-main .np-dash-head,
	.np-sd-main .np-dash-profile-link,
	.np-sd-main .np-dash-timeclock-link { display: none; }
}

/* ===== スマホ：下部タブバー固定 ===== */
@media ( max-width: 899px ) {
	.np-sd__tabbar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
		background: #fff; border-top: 1px solid var(--np-border);
		box-shadow: 0 -2px 10px rgba( 0, 0, 0, .06 );
		padding-bottom: env( safe-area-inset-bottom, 0 );
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}
	.np-sd__tabbar::-webkit-scrollbar { display: none; }
	.np-sd__content { padding-bottom: 80px; }
}

/* =========================================================
 * 店長ダッシュボード：概要ビュー（SaaS風）
 * ========================================================= */
.np-sd-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.np-sd-pagehead__title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.np-sd-pagehead__title strong { color: var(--np-accent-dark, #e0307f); }
.np-sd-pagehead__user { font-size: 0.85rem; color: var(--np-muted); white-space: nowrap; }

.np-sd-stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.np-sd-statcard { background: #fff; border: 1px solid var(--np-border); border-radius: 14px; padding: 16px; box-shadow: 0 4px 14px rgba( 0,0,0,.04 ); }
.np-sd-statcard__label { display: block; font-size: 0.78rem; color: var(--np-muted); margin-bottom: 8px; }
.np-sd-statcard__value { display: block; font-size: 1.7rem; font-weight: 800; color: #333; line-height: 1.1; }
.np-sd-statcard__value small { font-size: 0.9rem; font-weight: 700; color: var(--np-muted); }

.np-sd-home__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.np-sd-home__main { min-width: 0; }
.np-sd-home__side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.np-sd-widget { background: #fff; border: 1px solid var(--np-border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 4px 14px rgba( 0,0,0,.04 ); }
.np-sd-widget__title { font-size: 0.98rem; font-weight: 700; margin: 0 0 12px; }

.np-sd-news { list-style: none; margin: 0; padding: 0; }
.np-sd-news li { padding: 8px 0; border-bottom: 1px solid var(--np-border); display: flex; flex-direction: column; gap: 2px; }
.np-sd-news li:last-child { border-bottom: none; }
.np-sd-news__date { font-size: 0.72rem; color: var(--np-muted); }
.np-sd-news__title { font-size: 0.88rem; font-weight: 600; }

.np-qa-grid { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 10px; }
.np-qa { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--np-surface-2, #fdf2f7); border: 1px solid var(--np-border); border-radius: 12px; padding: 12px; cursor: pointer; }
.np-qa:hover { background: #fff; box-shadow: 0 4px 12px rgba( 0,0,0,.06 ); }
.np-qa__ic { font-size: 1.3rem; flex: 0 0 auto; }
.np-qa__tx { display: flex; flex-direction: column; min-width: 0; }
.np-qa__tx strong { font-size: 0.84rem; }
.np-qa__tx small { font-size: 0.7rem; color: var(--np-muted); }

.np-sd-support { display: flex; align-items: center; justify-content: space-between; padding: 11px 4px; border-bottom: 1px solid var(--np-border); color: #555; text-decoration: none; font-size: 0.88rem; }
.np-sd-support:last-child { border-bottom: none; }
.np-sd-support:hover { color: var(--np-accent-dark, #e0307f); }
.np-sd-support__arw { color: var(--np-muted); }

.np-sd-footer { margin-top: 24px; padding: 18px 0; border-top: 1px solid var(--np-border); text-align: center; }
.np-sd-footer__links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.np-sd-footer__links a { font-size: 0.8rem; color: var(--np-muted); text-decoration: none; }
.np-sd-footer__links a:hover { color: var(--np-accent-dark, #e0307f); }
.np-sd-footer__copy { font-size: 0.78rem; color: var(--np-muted); margin: 0; }

@media ( max-width: 720px ) {
	.np-sd-stats4 { grid-template-columns: repeat( 2, 1fr ); gap: 10px; }
	.np-sd-statcard { padding: 12px; }
	.np-sd-statcard__value { font-size: 1.4rem; }
	.np-sd-home__grid { grid-template-columns: 1fr; }
	.np-sd-pagehead__title { font-size: 1.05rem; }
}

/* =========================================================
 * リアルタイム在店ステータス（出勤中／退勤）
 * ========================================================= */
.np-presence-list { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.np-presence-item { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 10px; border:1px solid #f3d6e3; border-radius:10px; background:#fff; }
.np-presence-item.is-present { border-color:#86e0a4; background:#f1fbf4; }
.np-presence-name { font-weight:700; }
.np-presence-badge { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:#1aa251; color:#fff; font-size:12px; font-weight:700; vertical-align:middle; }
.np-presence-form { display:flex; gap:6px; }
.np-presence-in.is-current { background:#1aa251; border-color:#1aa251; color:#fff; }

/* 公開プロフィールの「現在出勤中」 */
.np-present-now .np-store__h2 { color:#1aa251; }
.np-present-now { padding:14px; border:2px solid #86e0a4; border-radius:14px; background:#f1fbf4; }

/* 会員紹介：月別テーブル */
.np-ref-months { margin-top:12px; }
.np-ref-monthly { width:100%; max-width:320px; }
/* =========================================================
 * プロフィール完成度（ドーナツチャート）
 * ========================================================= */
.np-completion__body { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.np-donut { flex:0 0 auto; }
.np-donut__svg { width:120px; height:120px; display:block; }
.np-donut__track { fill:none; stroke:#f3d6e3; stroke-width:14; }
.np-donut__fill { fill:none; stroke:#ff5fa2; stroke-width:14; stroke-linecap:round; transition:stroke-dasharray .6s ease; }
.np-donut__pct { fill:#e23a82; font-size:26px; font-weight:700; text-anchor:middle; dominant-baseline:central; }
.np-completion__list { flex:1 1 220px; min-width:200px; }
.np-completion__lead { margin:0 0 8px; font-size:14px; color:#555; }
.np-comp-items { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
.np-comp-items li { font-size:13.5px; }
.np-comp-items li.is-todo { color:#b08; opacity:.85; }
.np-comp-items li.is-done { color:#1aa251; }
@media (max-width:600px){
	.np-comp-items { grid-template-columns:1fr; }
	.np-completion__body { justify-content:center; }
}
/* メニュー項目をリンク(<a>)で使う場合の調整（chat など別ページへの導線） */
a.np-sd__navbtn, a.np-sd__tab { text-decoration: none; }
a.np-sd__navbtn { display: block; }
/* =========================================================
 * 出勤画像（Instagramストーリー用）
 * ========================================================= */
.np-story__wrap { text-align:center; margin-top:6px; }
.np-story__canvas { width:100%; max-width:300px; height:auto; border-radius:16px; box-shadow:0 6px 20px rgba(226,58,130,.22); background:#ff5fa2; }
.np-story__actions { margin-top:14px; }
/* 出勤画像：背景デザイン選択 */
.np-story__bgform { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin:6px 0 12px; }
.np-story__bgform .np-field { margin:0; flex:1 1 180px; }
.np-story__bgform select { width:100%; }
/* 出勤画像：背景・フォントの四角タッチ選択 */
.np-story__opts { margin:6px 0 14px; }
.np-story__group { margin-bottom:12px; }
.np-story__group > .np-field__label { display:block; margin-bottom:6px; }
.np-swatches { display:flex; flex-wrap:wrap; gap:10px; }
.np-swatch { position:relative; width:74px; height:74px; border-radius:12px; border:3px solid transparent; box-shadow:0 2px 6px rgba(0,0,0,.15); cursor:pointer; padding:0; overflow:hidden; }
.np-swatch span { position:absolute; left:0; right:0; bottom:0; font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.32); padding:2px 0; text-align:center; }
.np-swatch.is-active { border-color:var(--np-accent,#ff5fa2); box-shadow:0 0 0 2px #fff, 0 2px 10px rgba(226,58,130,.4); }
.np-fontswatch { width:80px; height:74px; border-radius:12px; border:3px solid #eecfdd; background:#fff; cursor:pointer; font-size:30px; line-height:1; color:#444; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.np-fontswatch small { font-size:11px; font-family:"M PLUS Rounded 1c",sans-serif; color:#777; }
.np-fontswatch.is-active { border-color:var(--np-accent,#ff5fa2); background:#fff5f9; box-shadow:0 2px 10px rgba(226,58,130,.25); }
/* 出勤画像：画像背景スウォッチ */
.np-swatch--img { background-size:cover !important; background-position:center !important; }
.np-story__opts input[type="file"] { font-size:13px; }
/* 出勤画像：文字色スウォッチ */
.np-swatch--txt { display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; border-color:#e5cdda; }
/* 出勤画像：スウォッチは横スライド */
.np-swatches { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.np-swatch, .np-fontswatch { flex:0 0 auto; scroll-snap-align:start; }
.np-swatches::-webkit-scrollbar { height:6px; }
.np-swatches::-webkit-scrollbar-thumb { background:#f0c2d6; border-radius:3px; }
/* 出勤画像：カラーピッカーのスウォッチ */
.np-swatch--color { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; background:conic-gradient(from 0deg,#ff5fa2,#ffd166,#06d6a0,#118ab2,#9b5de5,#ff5fa2); }
.np-swatch--color input[type="color"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; cursor:pointer; }
.np-swatch--color span { position:relative; font-size:11px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); pointer-events:none; }
/* キャスト画像の承認 */
.np-approve-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:10px; }
.np-approve-item { border:1px solid #f0d6e2; border-radius:12px; overflow:hidden; background:#fff; }
.np-approve-thumb { aspect-ratio:3/4; background:#f6f6f6; }
.np-approve-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.np-approve-meta { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 8px; font-size:13px; }
.np-approve-type { font-size:11px; color:#fff; background:#b486c9; border-radius:999px; padding:1px 8px; white-space:nowrap; }
.np-approve-btns { display:flex; gap:6px; padding:0 8px 8px; }
.np-nav-badge { display:inline-block; min-width:18px; padding:0 5px; border-radius:999px; background:#e23a82; color:#fff; font-size:11px; line-height:18px; text-align:center; vertical-align:middle; }