.qm-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;

	padding: 20px;

	background: rgba(18, 18, 20, 0.97);
	color: #ffffff;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"Helvetica Neue",
		Arial,
		sans-serif;

	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);

	/* 開閉アニメーション */
	transform: translateY(110%);
	opacity: 0;

	transition:
		transform 0.4s ease,
		opacity 0.3s ease;
}

.qm-cookie-banner.is-open {
	transform: translateY(0);
	opacity: 1;
}

.qm-cookie-banner[hidden] {
	display: none !important;
	pointer-events: none !important;
}

.qm-cookie-banner:not([hidden]) {
	pointer-events: auto;
}


.qm-cookie-inner {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px;
}


.qm-cookie-text h2 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 500;
}


.qm-cookie-text p {
	margin: 5px 0;
	max-width: 850px;

	font-size: 13px;
	line-height: 1.7;

	color: rgba(255, 255, 255, 0.82);
}


.qm-cookie-ja {
	color: rgba(255, 255, 255, 0.65) !important;
}


.qm-cookie-policy {
	display: inline-block;
	margin-top: 8px;

	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;

	text-decoration: underline;
}


.qm-cookie-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;

	margin-top: 18px;
}


.qm-cookie-btn {
	min-width: 110px;

	padding: 10px 18px;

	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.5);

	font-size: 13px;

	cursor: pointer;

	transition:
		background 0.2s ease,
		color 0.2s ease,
		border 0.2s ease,
		opacity 0.2s ease;
}


.qm-cookie-accept {
	background: #ffffff;
	color: #151515;
	border-color: #ffffff;
}


.qm-cookie-reject,
.qm-cookie-settings {
	background: transparent;
	color: #ffffff;
}


.qm-cookie-btn:hover {
	opacity: 0.85;
}


/* =========================
   詳細設定
========================= */

.qm-cookie-detail {
	margin-top: 20px;
	padding-top: 15px;

	border-top: 1px solid rgba(255, 255, 255, 0.2);
}


.qm-cookie-category {
	display: flex;
	justify-content: space-between;
	align-items: center;

	gap: 30px;

	padding: 14px 0;

	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}


.qm-cookie-category strong {
	font-size: 14px;
	font-weight: 500;
}


.qm-cookie-category p {
	margin: 5px 0 0;

	font-size: 12px;
	line-height: 1.5;

	color: rgba(255, 255, 255, 0.65);
}


.qm-cookie-always {
	white-space: nowrap;

	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
}


.qm-cookie-detail-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 10px;

	margin-top: 18px;
}


.qm-cookie-save {
	background: #ffffff;
	color: #151515;
}


/* =========================
   Toggle
========================= */

.qm-switch {
	position: relative;

	width: 46px;
	min-width: 46px;
	height: 24px;
}


.qm-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}


.qm-slider {
	position: absolute;

	inset: 0;

	cursor: pointer;

	background: #555;

	border-radius: 30px;

	transition: 0.2s;
}


.qm-slider::before {
	content: "";

	position: absolute;

	width: 18px;
	height: 18px;

	left: 3px;
	top: 3px;

	border-radius: 50%;

	background: #ffffff;

	transition: 0.2s;
}


.qm-switch input:checked + .qm-slider {
	background: #aaa;
}


.qm-switch input:checked + .qm-slider::before {
	transform: translateX(22px);
}


/* =========================
   Mobile
========================= */

@media (max-width: 700px) {

	body.qm-cookie-open {
		overflow: hidden;
	}

	.qm-cookie-banner {
		top: auto;

		padding: 16px;

		max-height: 70dvh;

		overflow: hidden;

		padding-bottom:
			max(16px, env(safe-area-inset-bottom));
	}


	.qm-cookie-inner {
		width: 100%;

		max-height: calc(70dvh - 32px);

		overflow-y: auto;
		overscroll-behavior: contain;

		-webkit-overflow-scrolling: touch;
	}


	.qm-cookie-actions,
	.qm-cookie-detail-buttons {
		flex-direction: column;
	}


	.qm-cookie-btn {
		width: 100%;
	}


	.qm-cookie-category {
		gap: 15px;
	}
}


/* =========================
   再設定Button
========================= */

.cookie-settings-link {
	border: 0;
	padding: 2em 0 0 0;

	background: transparent;
	color: #666;

	font-size: 0.7em;
	text-decoration: underline;

	cursor: pointer;
}