/* =====================================================================
   よくある質問（FAQ）ウィジェット  — assets/js/faq-widget.js と対で使う
   右下の「よくある質問」ボタンを押すと、会話風の窓が開く。
   ・位置は PAGE TOP ボタンの真上（faq-widget.js が実際の位置を測って決める）
   ・z-index はティッカー(10000)・MENUボタン(10001)・MENUパネル(10002)より手前
   ・サイト共通CSS（main.css / my-bootstrap.css）の影響を受けないよう、
     すべて .dkg-faq 配下に限定し、必要な箇所は明示的に上書きしている
   ===================================================================== */

.dkg-faq {
	--faq-accent: #7b5ea7;
	--faq-accent-dark: #634890;
	--faq-ink: #2b2b33;
	--faq-ink2: #62626d;
	--faq-line: #e6e0ec;
	--faq-bg: #ffffff;
	--faq-bot: #f3eff8;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--faq-ink);
}

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

/* ---------- 起動ボタン ----------
   位置は faq-widget.js が PAGE TOP ボタンの実際の位置を測って上書きする。
   ここの値は、測れなかった場合の予備（PAGE TOP の上端より上になる値）。 */
.dkg-faq__launcher {
	position: fixed;
	right: 20px;
	bottom: 150px;
	z-index: 10050;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	height: 52px;
	padding: 0 1.2em 0 1em;
	border: 2px solid #ffffff;
	border-radius: 999px;
	background: var(--faq-accent);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.04em;
	box-shadow: 0 6px 18px rgba(40, 20, 70, 0.28);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

	.dkg-faq__launcher:hover {
		background: var(--faq-accent-dark);
		transform: translateY(-1px);
	}

	.dkg-faq__launcher:focus-visible {
		outline: 3px solid #f9d56e;
		outline-offset: 2px;
	}

	.dkg-faq__launcher svg {
		width: 22px;
		height: 22px;
		flex: 0 0 auto;
	}

	.dkg-faq.is-open .dkg-faq__launcher {
		display: none;
	}

/* ---------- 窓 ---------- */
.dkg-faq__panel {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 10050;
	display: flex;
	flex-direction: column;
	width: 380px;
	max-width: calc(100vw - 40px);
	height: min(620px, calc(100vh - 40px));
	border-radius: 16px;
	background: var(--faq-bg);
	box-shadow: 0 16px 48px rgba(40, 20, 70, 0.3);
	overflow: hidden;
}

	.dkg-faq__panel[hidden] {
		display: none !important;
	}

.dkg-faq__header {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.85em 0.9em 0.85em 1.1em;
	background: var(--faq-accent);
	color: #ffffff;
}

	.dkg-faq__title {
		flex: 1 1 auto;
		margin: 0;
		font-size: 1.05em;
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: 0.06em;
		color: #ffffff;
		text-transform: none;
	}

	.dkg-faq__close {
		flex: 0 0 auto;
		width: 36px;
		height: 36px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.16);
		color: #ffffff;
		font: inherit;
		font-size: 22px;
		line-height: 36px;
		box-shadow: none;
		cursor: pointer;
	}

		.dkg-faq__close:hover {
			background: rgba(255, 255, 255, 0.3);
		}

		.dkg-faq__close:focus-visible {
			outline: 3px solid #f9d56e;
			outline-offset: 1px;
		}

/* 会話部分 */
.dkg-faq__log {
	flex: 1 1 auto;
	padding: 1em;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fbfafd;
}

.dkg-faq__msg {
	display: flex;
	margin: 0 0 0.75em;
}

	.dkg-faq__msg--user {
		justify-content: flex-end;
	}

.dkg-faq__bubble {
	max-width: 88%;
	padding: 0.65em 0.9em;
	border-radius: 14px;
	white-space: pre-line;
	word-break: break-word;
	font-size: 0.95em;
	line-height: 1.7;
}

	.dkg-faq__msg--bot .dkg-faq__bubble {
		background: var(--faq-bot);
		border-top-left-radius: 4px;
		color: var(--faq-ink);
	}

	.dkg-faq__msg--user .dkg-faq__bubble {
		background: var(--faq-accent);
		border-top-right-radius: 4px;
		color: #ffffff;
	}

	.dkg-faq__bubble a {
		color: var(--faq-accent-dark);
		font-weight: 700;
		border-bottom: 1px solid currentColor;
		text-decoration: none;
	}

	.dkg-faq__more {
		display: inline-block;
		margin-top: 0.45em;
	}

/* 質問の選択肢 */
.dkg-faq__choices {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	margin: 0 0 0.9em;
	padding: 0;
	list-style: none;
}

	.dkg-faq__choices li {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.dkg-faq__choice {
		display: block;
		width: 100%;
		height: auto;
		padding: 0.55em 0.85em;
		border: 1px solid var(--faq-line);
		border-radius: 10px;
		background: #ffffff;
		color: var(--faq-ink);
		font: inherit;
		font-size: 0.92em;
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: 0.02em;
		text-align: left;
		text-transform: none;
		white-space: normal;
		box-shadow: none;
		cursor: pointer;
	}

		.dkg-faq__choice:hover {
			border-color: var(--faq-accent);
			background: #f7f3fb;
			color: var(--faq-ink);
		}

		.dkg-faq__choice:focus-visible {
			outline: 2px solid var(--faq-accent);
			outline-offset: 1px;
		}

	.dkg-faq__choice--sub {
		width: auto;
		display: inline-block;
		border-color: transparent;
		background: transparent;
		color: var(--faq-accent-dark);
		font-weight: 700;
	}

/* 入力欄 */
/* サイト共通CSS（main.css）の「form { flex-wrap: wrap; width: calc(100% + 3rem); margin: -1.5rem … }」を
   打ち消す（そのままだと窓より48px広くなり、送信ボタンが右端で切れる） */
.dkg-faq__form {
	display: flex;
	flex-wrap: nowrap;
	width: auto;
	gap: 0.5em;
	margin: 0;
	padding: 0.7em;
	border-top: 1px solid var(--faq-line);
	background: #ffffff;
}

	.dkg-faq__input {
		flex: 1 1 auto;
		width: auto; /* サイト共通CSSの width:100% を打ち消す */
		min-width: 0;
		height: 42px;
		margin: 0;
		padding: 0 0.8em;
		border: 1px solid var(--faq-line);
		border-radius: 999px;
		background: #ffffff;
		color: var(--faq-ink);
		font: inherit;
		font-size: 16px; /* 16px未満だとiPhoneで入力時に画面が拡大される */
		line-height: 42px;
		box-shadow: none;
	}

		.dkg-faq__input:focus {
			border-color: var(--faq-accent);
			outline: none;
			box-shadow: 0 0 0 3px rgba(123, 94, 167, 0.18);
		}

	.dkg-faq__send {
		flex: 0 0 auto;
		height: 42px;
		padding: 0 1.1em;
		border: 0;
		border-radius: 999px;
		background: var(--faq-accent);
		color: #ffffff;
		font: inherit;
		font-weight: 700;
		line-height: 42px;
		letter-spacing: 0.04em;
		text-transform: none;
		box-shadow: none;
		cursor: pointer;
	}

		.dkg-faq__send:hover {
			background: var(--faq-accent-dark);
			color: #ffffff;
		}

.dkg-faq__note {
	margin: 0;
	padding: 0 0.9em 0.6em;
	background: #ffffff;
	font-size: 0.72em;
	line-height: 1.5;
	color: var(--faq-ink2);
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 736px) {
	.dkg-faq__launcher {
		height: 48px;
		font-size: 14px;
	}

	.dkg-faq__panel {
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 85vh;
		height: 85dvh;
		border-radius: 16px 16px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dkg-faq__launcher {
		transition: none;
	}
}