/* Simple FAQ Chatbot — フロントエンド(テーマ非依存) */

.sfc-root {
	--sfc-color: #2271b1;
	--sfc-bottom-clearance: max(env(safe-area-inset-bottom, 0px), var(--sfc-bottom-offset, 0px));
	position: fixed;
	bottom: calc(16px + var(--sfc-bottom-clearance));
	z-index: 99999;
	font-size: 14px;
	line-height: 1.6;
}

.sfc-pos-right { right: calc(16px + env(safe-area-inset-right, 0px)); }
.sfc-pos-left { left: calc(16px + env(safe-area-inset-left, 0px)); }
.sfc-pos-right.sfc-avoid-page-top { right: calc(72px + env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
	.sfc-pos-right.sfc-avoid-page-top {
		right: var(--sfc-desktop-right, 72px);
		bottom: var(--sfc-desktop-bottom, 16px);
	}
	.sfc-pos-right.sfc-avoid-page-top .sfc-launcher:hover { transform: none; }
}
.sfc-yotsuba-root { z-index: 1900; }
/* Hide the widget while the site's header menu is expanded. */
body:has(.mega-toggle-animated[aria-controls="mega-menu-global-nav"][aria-expanded="true"]) .sfc-yotsuba-root {
	visibility: hidden;
}

.sfc-window, .sfc-window *, .sfc-launcher { box-sizing: border-box; }
.sfc-window button, .sfc-window input, .sfc-window .sfc-link-btn, .sfc-launcher { font-family: inherit; }
.sfc-window :focus-visible, .sfc-launcher:focus-visible {
	outline: 2px solid #16784b;
	outline-offset: 2px;
}

/* 起動ボタン */
.sfc-launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: none;
	border-radius: 50%;
	background: var(--sfc-color);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
	padding: 0;
}
@media (hover: hover) and (pointer: fine) {
	.sfc-launcher:hover { transform: translateY(-2px); }
}

/* ウィンドウ */
.sfc-window {
	--sfc-color: #2271b1;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #dce6e1;
	border-radius: 20px;
	box-shadow: 0 14px 45px rgba(23, 45, 32, 0.18);
	overflow: hidden;
}
.sfc-window-floating {
	position: absolute;
	bottom: 70px;
	width: min(390px, calc(100vw - 32px));
	height: 540px;
	max-height: calc(100vh - 120px - var(--sfc-bottom-offset, 0px));
	max-height: calc(100dvh - 112px - var(--sfc-bottom-clearance));
}
.sfc-pos-right .sfc-window-floating { right: 0; }
.sfc-pos-left .sfc-window-floating { left: 0; }

.sfc-window-inline {
	position: relative;
	width: 100%;
	max-width: 560px;
	height: 520px;
	margin: 1em auto;
	border: 1px solid #e0e0e0;
	font-size: 14px;
	line-height: 1.6;
}

.sfc-root, .sfc-window-inline {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
}

.sfc-hidden { display: none; }

/* ヘッダー */
.sfc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--sfc-color);
	color: #fff;
	gap: 10px;
	padding: 8px 12px 8px 16px;
	font-weight: 600;
}
.sfc-header-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sfc-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 10px;
}

/* メッセージ領域 */
.sfc-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px;
	background: #f5f6f8;
}

.sfc-row { display: flex; margin-bottom: 10px; }
.sfc-row-bot { justify-content: flex-start; }
.sfc-row-user { justify-content: flex-end; }

.sfc-bubble {
	max-width: 85%;
	padding: 9px 13px;
	border-radius: 14px;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: break-word;
}
.sfc-bubble-bot {
	background: #fff;
	border: 1px solid #e3e5e8;
	border-bottom-left-radius: 4px;
	color: #1e1e1e;
}
.sfc-bubble-user {
	background: var(--sfc-color);
	color: #fff;
	border-bottom-right-radius: 4px;
}

/* ローディング */
.sfc-loading span {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 2px;
	border-radius: 50%;
	background: #a8adb5;
	animation: sfc-blink 1.2s infinite both;
}
.sfc-loading span:nth-child(2) { animation-delay: 0.2s; }
.sfc-loading span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sfc-blink {
	0%, 80%, 100% { opacity: 0.25; }
	40% { opacity: 1; }
}

/* 選択肢 */
.sfc-choices { margin: 4px 0 12px; }
.sfc-choices-title {
	font-size: 12px;
	color: #666;
	margin-bottom: 6px;
}
.sfc-choice {
	display: block;
	width: 100%;
	text-align: left;
	margin-bottom: 6px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid var(--sfc-color);
	color: var(--sfc-color);
	border-radius: 8px;
	cursor: pointer;
	min-height: 44px;
	font-size: 14px;
	line-height: 1.5;
	transition: background 0.15s ease, color 0.15s ease;
}
.sfc-choice:hover:not(:disabled) {
	background: var(--sfc-color);
	color: #fff;
}
.sfc-choice:disabled { opacity: 0.5; cursor: default; }

/* 誘導リンク */
.sfc-links { margin: 2px 0 12px; }
.sfc-link-btn {
	display: block;
	margin-bottom: 6px;
	padding: 10px 12px;
	background: var(--sfc-color);
	color: #fff !important;
	border-radius: 8px;
	text-decoration: none !important;
	min-height: 44px;
	font-size: 14px;
	text-align: center;
	font-weight: 600;
}
.sfc-link-btn:hover { opacity: 0.85; color: #fff; }

/* 解決確認 */
.sfc-feedback {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2px 0 14px;
	font-size: 12px;
	color: #666;
}
.sfc-feedback-btn {
	padding: 5px 14px;
	border: 1px solid #c3c4c7;
	background: #fff;
	border-radius: 999px;
	cursor: pointer;
	font-size: 12px;
}
.sfc-feedback-btn:hover:not(:disabled) {
	border-color: var(--sfc-color);
	color: var(--sfc-color);
}
.sfc-feedback-done .sfc-feedback-btn { opacity: 0.5; cursor: default; }

/* AI注記 */
.sfc-ai-notice {
	font-size: 11px;
	color: #8a8f98;
	margin: -4px 0 12px;
}

/* 入力欄 */
.sfc-footer {
	display: flex;
	gap: 8px;
	padding: 10px;
	background: #fff;
	border-top: 1px solid #e3e5e8;
}
.sfc-input {
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 16px;
	outline: none;
	background: #fff;
	color: #1e1e1e;
}
.sfc-input:focus { border-color: var(--sfc-color); }
.sfc-send {
	border: none;
	background: var(--sfc-color);
	color: #fff;
	border-radius: 8px;
	flex: 0 0 auto;
	min-width: 52px;
	min-height: 44px;
	padding: 0 12px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
}
.sfc-send:hover { opacity: 0.85; }

/* よつばのサイトの白と淡い青に、イラストの温かい色を合わせる。 */
.sfc-window.sfc-yotsuba,
.sfc-launcher.sfc-launcher-guide {
	--sfc-color: #245e8c;
	--sfc-ink: #23384b;
	--sfc-line: #d3e1ec;
	--sfc-tint: #edf5fb;
	--sfc-paper: #fffaf3;
	color: var(--sfc-ink);
}
.sfc-window.sfc-yotsuba {
	border-color: var(--sfc-line);
	border-radius: 24px;
	box-shadow: 0 16px 48px rgba(36, 67, 93, 0.17), 0 3px 10px rgba(36, 67, 93, 0.08);
}
.sfc-launcher.sfc-launcher-guide {
	gap: 9px;
	width: auto;
	height: 52px;
	max-width: calc(100vw - 36px);
	padding: 0 16px 0 7px;
	border-radius: 999px;
	border: 1px solid var(--sfc-line);
	background: #fff;
	box-shadow: 0 5px 18px rgba(36, 67, 93, 0.16);
	font-size: 14px;
	font-weight: 700;
}
.sfc-launcher.sfc-launcher-guide:hover { background: var(--sfc-tint); }
.sfc-launcher-guide .sfc-launcher-icon,
.sfc-yotsuba .sfc-avatar {
	object-fit: contain;
	border-radius: 50%;
	background: var(--sfc-paper);
}
.sfc-launcher-guide .sfc-launcher-icon {
	width: 36px;
	height: 36px;
}
.sfc-yotsuba .sfc-header {
	padding: 10px 10px 10px 14px;
	background: #fff;
	color: var(--sfc-ink);
	border-bottom: 1px solid var(--sfc-line);
}
.sfc-yotsuba .sfc-header-title {
	font-size: 16px;
	font-weight: 700;
}
.sfc-yotsuba .sfc-mascot {
	position: relative;
	flex: 0 0 52px;
	height: 52px;
}
.sfc-yotsuba .sfc-avatar {
	display: block;
	width: 100%;
	height: 100%;
}
.sfc-yotsuba .sfc-mascot::after {
	content: "";
	position: absolute;
	top: 27px;
	right: 0;
	width: 6px;
	height: 7px;
	border-block: 2px solid #a66c47;
	border-radius: 2px;
	transform: rotate(-12deg);
	opacity: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.sfc-yotsuba.sfc-speaking .sfc-mascot::after {
		animation: sfc-speech-mark 400ms ease-in-out infinite alternate;
	}
}
@keyframes sfc-speech-mark {
	from { opacity: 0.25; }
	to { opacity: 1; transform: translateX(2px) rotate(-12deg); }
}
.sfc-yotsuba .sfc-close { color: #4d6477; }
.sfc-yotsuba .sfc-close:hover { background: var(--sfc-tint); }
.sfc-yotsuba .sfc-restart {
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--sfc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--sfc-color);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.sfc-yotsuba .sfc-restart:hover { background: var(--sfc-tint); }
.sfc-yotsuba :focus-visible,
.sfc-launcher.sfc-launcher-guide:focus-visible { outline-color: var(--sfc-color); }
.sfc-yotsuba .sfc-close:focus-visible { outline-offset: -3px; }
.sfc-yotsuba .sfc-body {
	padding: 16px;
	background: linear-gradient(160deg, #f3f8fc, #fafcfe);
}
.sfc-yotsuba .sfc-bubble {
	max-width: 92%;
	padding: 11px 13px;
	color: var(--sfc-ink);
}
.sfc-yotsuba .sfc-bubble-bot { border-color: var(--sfc-line); }
.sfc-yotsuba .sfc-bubble-user { background: #dfedf7; }
.sfc-yotsuba .sfc-reply { position: relative; }
.sfc-yotsuba .sfc-reply-typing { display: grid; }
.sfc-yotsuba .sfc-reply-typing > span { grid-area: 1 / 1; min-width: 0; }
.sfc-yotsuba .sfc-reply-typing > .sfc-reply-full { opacity: 0; }
.sfc-yotsuba .sfc-reply > .sfc-bubble,
.sfc-yotsuba .sfc-reveal-actions {
	animation: sfc-reply-appear 260ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--sfc-reply-delay) both;
}
@keyframes sfc-reply-appear {
	from { visibility: hidden; opacity: 0; transform: translateY(8px); }
	to { visibility: visible; opacity: 1; transform: translateY(0); }
}
.sfc-yotsuba .sfc-typing {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 5px;
	height: 36px;
	padding: 0 13px;
	border: 1px solid var(--sfc-line);
	border-radius: 14px 14px 14px 4px;
	background: #fff;
	pointer-events: none;
	animation: sfc-typing-end var(--sfc-reply-delay) step-end both;
}
.sfc-yotsuba .sfc-typing span {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #527891;
	animation: sfc-typing-dot 480ms ease-in-out infinite;
}
.sfc-yotsuba .sfc-typing span:nth-child(2) { animation-delay: 85ms; }
.sfc-yotsuba .sfc-typing span:nth-child(3) { animation-delay: 170ms; }
@keyframes sfc-typing-dot {
	0%, 65%, 100% { opacity: 0.5; transform: translateY(0); }
	35% { opacity: 1; transform: translateY(-4px); }
}
@keyframes sfc-typing-end {
	to { visibility: hidden; }
}
.sfc-yotsuba .sfc-guide-choices .sfc-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
	padding: 10px 14px;
	border-color: var(--sfc-line);
	border-radius: 13px;
	color: var(--sfc-ink);
	font-weight: 600;
}
.sfc-yotsuba .sfc-guide-choices .sfc-choice::after {
	content: "";
	flex: 0 0 7px;
	height: 7px;
	border-top: 2px solid var(--sfc-color);
	border-right: 2px solid var(--sfc-color);
	transform: rotate(45deg);
}
.sfc-yotsuba .sfc-guide-choices .sfc-choice:hover:not(:disabled) {
	background: var(--sfc-tint);
	border-color: #8cb2cf;
}
.sfc-yotsuba .sfc-link-btn { border-radius: 13px; }
.sfc-yotsuba .sfc-footer {
	padding: 10px 12px;
	border-color: var(--sfc-line);
}
.sfc-yotsuba .sfc-input {
	background: #f8fbfe;
	border-color: #a6bdcf;
	border-radius: 12px;
}
.sfc-yotsuba .sfc-input:focus { border-color: var(--sfc-color); }
.sfc-yotsuba .sfc-input::placeholder { color: #576d80; }
.sfc-yotsuba .sfc-send { border-radius: 12px; }

/* 狭い画面では左右余白を確保し、ブラウザの表示高に合わせる。 */
@media (max-width: 480px) {
	.sfc-window-floating {
		position: fixed;
		left: max(10px, env(safe-area-inset-left, 0px)) !important;
		right: max(10px, env(safe-area-inset-right, 0px)) !important;
		bottom: calc(80px + var(--sfc-bottom-clearance));
		width: auto;
		height: min(540px, 75vh);
		height: min(540px, 78dvh);
	}
}
@media (max-width: 767px) {
	.sfc-window-floating.sfc-yotsuba {
		max-height: calc(100vh - 128px - var(--sfc-bottom-offset, 0px));
		max-height: calc(100dvh - 128px - var(--sfc-bottom-clearance));
	}
}
@media (prefers-reduced-motion: reduce) {
	.sfc-window *, .sfc-launcher { animation: none !important; transition: none !important; }
	.sfc-yotsuba .sfc-typing { display: none; }
}