@charset "UTF-8";

/* ============================================================
 * 共通
 * ============================================================ */
:root {
	--mng-primary: #3a4a6b;
	--mng-primary-light: #eef;
	--mng-label-bg: #f0f2f8;
	--mng-page-bg: #f8f8f8;
	--mng-danger: #e53935;
	--mng-tag-active: #2979ff;
	--mng-tag-inactive: #e0e0e0;
	--mng-text: #333;
	--mng-text-sub: #666;
	--mng-border: #ddd;
	--mng-content-max: 700px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background: var(--mng-page-bg);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 14px;
	color: var(--mng-text);
	line-height: 1.6;
}

a {
	color: #1565c0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: var(--mng-danger);
}

/* ============================================================
 * ヘッダー
 * ============================================================ */
.mng-header {
	background: var(--mng-primary);
	color: #fff;
	padding: 10px 20px;
	text-align: center;
}

.mng-header__status {
	font-size: 11px;
	opacity: 0.8;
}

.mng-header__title {
	font-size: 18px;
	font-weight: bold;
	margin-top: 2px;
}

/* ダッシュボード「ようこそ」カード内の公開ページ導線リンク */
.mng-welcome-links {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 16px;
	font-size: 13px;
}
.mng-welcome-links a {
	color: var(--mng-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mng-welcome-links a:hover {
	color: var(--mng-link-hover, var(--mng-primary));
	opacity: 0.85;
}

/* ============================================================
 * ナビゲーション
 * ============================================================ */
.mng-nav {
	max-width: var(--mng-content-max);
	margin: 16px auto;
	padding: 0 12px;
}

.mng-nav__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	background: var(--mng-border);
	border: 1px solid #ccc;
}

.mng-nav__item {
	display: block;
	background: #fff;
	padding: 12px;
	text-align: center;
	font-size: 14px;
	color: var(--mng-text);
	text-decoration: none;
}

.mng-nav__item:hover {
	background: #f5f5f5;
	text-decoration: none;
	color: var(--mng-text);
}

.mng-nav__item--active {
	background: var(--mng-primary-light);
	font-weight: bold;
}

.mng-nav__item--logout {
	color: #999;
}

/* ============================================================
 * コンテンツエリア
 * ============================================================ */
.mng-content {
	max-width: var(--mng-content-max);
	margin: 0 auto 20px;
	padding: 0 12px;
}

/* ============================================================
 * セクション見出し
 * ============================================================ */
.mng-section-title {
	background: var(--mng-primary);
	color: #fff;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: bold;
}

.mng-section-title__sub {
	font-size: 11px;
	font-weight: normal;
	opacity: 0.8;
}

/* ============================================================
 * カード
 * ============================================================ */
.mng-card {
	background: #fff;
	border: 1px solid var(--mng-border);
	border-top: 0;
	padding: 20px;
}

/* ============================================================
 * フォーム行
 * ============================================================ */
.mng-form-section {
	background: #fff;
	border: 1px solid var(--mng-border);
	border-top: 0;
}

.mng-form-row {
	display: flex;
	border-bottom: 1px solid #eee;
}

.mng-form-row:last-child {
	border-bottom: none;
}

.mng-form-label {
	width: 160px;
	flex-shrink: 0;
	background: var(--mng-label-bg);
	padding: 10px 12px;
	font-size: 13px;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 4px;
}

.mng-form-label--danger {
	background: var(--mng-danger);
	color: #fff;
}

.mng-form-value {
	flex: 1;
	padding: 10px 12px;
	font-size: 13px;
}

.mng-req {
	color: var(--mng-danger);
	font-size: 11px;
}

/* ============================================================
 * 入力要素
 * ============================================================ */
.mng-input {
	width: 100%;
	max-width: 320px;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

.mng-input--short {
	max-width: 80px;
}

.mng-input--medium {
	max-width: 200px;
}

.mng-textarea {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	min-height: 80px;
	resize: vertical;
}

.mng-select {
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

.mng-note {
	font-size: 11px;
	color: #999;
	margin-top: 4px;
}

/* ============================================================
 * チェックボックス・ラジオグリッド
 * ============================================================ */
.mng-checkbox-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.mng-checkbox-grid label,
.mng-radio-group label {
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}

.mng-radio-group label {
	margin-right: 12px;
	display: inline-flex;
}

/* ============================================================
 * ボタン
 * ============================================================ */
.mng-btn {
	display: inline-block;
	background: var(--mng-primary);
	color: #fff;
	border: none;
	padding: 10px 32px;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.mng-btn:hover {
	opacity: 0.85;
	color: #fff;
	text-decoration: none;
}

.mng-btn--outline {
	background: transparent;
	color: var(--mng-primary);
	border: 1px solid var(--mng-primary);
}

.mng-btn--outline:hover {
	color: var(--mng-primary);
}

.mng-btn--danger {
	background: var(--mng-danger);
}

.mng-btn-group {
	text-align: center;
	margin: 24px 0;
}

.mng-btn-group .mng-btn + .mng-btn {
	margin-left: 8px;
}

/* ============================================================
 * メッセージ
 * ============================================================ */
.mng-message {
	background: #fff;
	border: 1px solid var(--mng-border);
	padding: 32px 20px;
	text-align: center;
}

.mng-message--error {
	color: var(--mng-danger);
}

.mng-message p {
	font-size: 16px;
	margin: 0 0 12px;
}

.mng-message a {
	font-size: 14px;
}

/* ============================================================
 * エラーメッセージ（インライン）
 * ============================================================ */
.mng-error {
	color: var(--mng-danger);
	font-size: 13px;
	margin-top: 3px;
}

/* ============================================================
 * エリア管理: セレクト
 * ============================================================ */
.mng-area-select {
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	background: var(--mng-primary);
	color: #fff;
}

.mng-area-select option {
	background: #fff;
	color: var(--mng-text);
}

.mng-area-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* ============================================================
 * 繁華街タグ
 * ============================================================ */
.mng-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 14px;
	font-size: 12px;
	margin: 3px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	user-select: none;
}

.mng-tag--active {
	background: var(--mng-tag-active);
	color: #fff;
}

.mng-tag--inactive {
	background: var(--mng-tag-inactive);
	color: #666;
}

/* ============================================================
 * アクセス統計
 * ============================================================ */
.mng-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}

.mng-stat-card {
	background: #fff;
	border: 1px solid var(--mng-border);
	border-radius: 4px;
	padding: 16px;
	text-align: center;
}

.mng-stat-card__label {
	font-size: 12px;
	color: #999;
}

.mng-stat-card__value {
	font-size: 28px;
	font-weight: bold;
	color: var(--mng-primary);
}

.mng-stat-card__value--danger {
	color: var(--mng-danger);
}

.mng-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 0;
}

.mng-tab {
	padding: 8px 20px;
	background: #eee;
	border: 1px solid #ccc;
	border-bottom: none;
	font-size: 13px;
	color: #666;
	text-decoration: none;
}

.mng-tab:hover {
	background: #e0e0e0;
	color: #666;
	text-decoration: none;
}

.mng-tab--active {
	background: #fff;
	font-weight: bold;
	color: var(--mng-text);
	border-bottom: 1px solid #fff;
}

.mng-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	background: #fff;
	border: 1px solid #ccc;
}

.mng-table th {
	background: var(--mng-label-bg);
	padding: 8px 10px;
	text-align: left;
	border-bottom: 1px solid var(--mng-border);
	font-weight: bold;
}

.mng-table td {
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
}

.mng-table th.text-center,
.mng-table td.text-center {
	text-align: center;
}

.mng-table th.text-right,
.mng-table td.text-right {
	text-align: right;
}

.mng-access-bar {
	height: 14px;
	background: linear-gradient(90deg, #5c7cba, var(--mng-primary));
	border-radius: 2px;
	min-width: 2px;
}

/* ============================================================
 * ログイン画面
 * ============================================================ */
.mng-login {
	max-width: 420px;
	margin: 60px auto;
	padding: 0 16px;
}

.mng-login__title {
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: var(--mng-primary);
	margin-bottom: 24px;
}

.mng-login__form {
	background: #fff;
	border: 1px solid var(--mng-border);
	border-radius: 8px;
	padding: 32px 24px;
}

.mng-login__field {
	margin-bottom: 16px;
}

.mng-login__field label {
	display: block;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 4px;
}

.mng-login__field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

.mng-login__btn {
	width: 100%;
	padding: 12px;
	margin-top: 8px;
}

/* ============================================================
 * フッター
 * ============================================================ */
.mng-footer {
	text-align: center;
	padding: 16px;
	font-size: 12px;
	color: #999;
	border-top: 1px solid #eee;
	margin-top: 32px;
}

/* ============================================================
 * エリア編集: 都道府県・市区町村
 * ============================================================ */
.mng-pref-group {
	margin-bottom: 12px;
}

.mng-pref-name {
	font-weight: bold;
	padding: 4px 8px;
	background: var(--mng-primary-light);
	display: inline-block;
	margin-bottom: 4px;
	border-radius: 3px;
	font-size: 13px;
}

/* ============================================================
 * 確認画面
 * ============================================================ */
.mng-confirm-notice {
	padding: 12px 0;
	font-size: 14px;
}

/* ============================================================
 * いまスグ対応
 * ============================================================ */
.mng-standby {
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
}

.mng-standby__row {
	margin-bottom: 16px;
}

.mng-standby__label {
	display: block;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 6px;
}

.mng-standby__timer {
	background: var(--mng-primary);
	color: #fff;
	padding: 16px;
	border-radius: 4px;
	margin-bottom: 16px;
	font-size: 14px;
}

.mng-standby__timer strong {
	font-size: 32px;
	font-family: "Courier New", monospace;
	letter-spacing: 2px;
}

/* ============================================================
 * レスポンシブ（768px以下）
 * ============================================================ */
@media (max-width: 768px) {
	/* ナビ: 1列 */
	.mng-nav__grid {
		grid-template-columns: 1fr;
	}

	/* フォーム: 縦積み */
	.mng-form-row {
		flex-direction: column;
	}

	.mng-form-label {
		width: 100%;
	}

	.mng-form-value {
		padding: 8px 12px;
	}

	/* 入力フィールド: フル幅 */
	.mng-input {
		max-width: 100%;
	}

	/* ボタン: フル幅 */
	.mng-btn-group .mng-btn {
		display: block;
		width: 100%;
	}

	.mng-btn-group .mng-btn + .mng-btn {
		margin-left: 0;
		margin-top: 8px;
	}

	/* アクセス統計テーブル: 横スクロール */
	.mng-table-wrap {
		overflow-x: auto;
	}

	/* エリアセレクト */
	.mng-area-row {
		flex-direction: column;
		gap: 4px;
	}

	.mng-area-select {
		width: 100%;
	}

	/* 統計カード */
	.mng-stat-grid {
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}

	.mng-stat-card__value {
		font-size: 22px;
	}

	/* ヘッダー */
	.mng-header__title {
		font-size: 16px;
	}

	/* タブ */
	.mng-tab {
		padding: 8px 12px;
		font-size: 12px;
	}

	/* ログイン */
	.mng-login {
		margin: 30px auto;
	}

	.mng-login__form {
		padding: 24px 16px;
	}

	/* いまスグ対応 */
	.mng-standby__timer strong {
		font-size: 28px;
	}
}