/* おひさまアンケート — フロント
   テーマ側の指定に巻き込まれないよう .ohs 配下は明示的に指定する */

.ohs {
	--ohs-sky: #4a9fd8;
	--ohs-sun: #ffb84d;
	--ohs-ink: #24303a;
	--ohs-mute: #6b7a86;
	--ohs-line: #e3e8ec;
	--ohs-bg: #ffffff;

	box-sizing: border-box;
	color: var(--ohs-ink);
	background: var(--ohs-bg);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
}

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

/* 右下に出るカード */
.ohs--card {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99990;
	width: 360px;
	max-width: calc(100vw - 24px);
	max-height: min(78vh, 620px);
	overflow-y: auto;
	padding: 18px 18px 16px;
	border: 1px solid var(--ohs-line);
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(36, 48, 58, .18);
	transform: translateY(16px);
	opacity: 0;
	transition: transform .24s ease, opacity .24s ease;
}

.ohs--card.is-in { transform: translateY(0); opacity: 1; }
.ohs--card.is-out { transform: translateY(16px); opacity: 0; }

/* 本文に埋め込む形 */
.ohs--embed {
	padding: 20px;
	border: 1px solid var(--ohs-line);
	border-radius: 14px;
	margin: 24px 0;
}

.ohs-embed--done {
	padding: 16px 20px;
	border-radius: 14px;
	background: #f5f9fc;
	color: #46606f;
	margin: 24px 0;
}

/* 見出し */
.ohs__head {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 6px;
}

.ohs__title {
	flex: 1;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .01em;
	border: 0;
}

.ohs__title::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--ohs-sun);
	box-shadow: 0 0 0 3px rgba(255, 184, 77, .25);
	vertical-align: 1px;
}

.ohs__close {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ohs-mute);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.ohs__close:hover { background: #f1f5f8; }

.ohs__intro {
	margin: 0 0 14px;
	color: var(--ohs-mute);
	font-size: 13px;
}

/* 設問 */
.ohs__body { margin-top: 10px; }

.ohs-q { margin-bottom: 18px; }
.ohs-q:last-child { margin-bottom: 6px; }

.ohs-q__label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.ohs-req {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgba(74, 159, 216, .12);
	color: var(--ohs-sky);
	font-size: 11px;
	font-weight: 600;
	vertical-align: 2px;
}

.ohs-q__help {
	margin: -2px 0 8px;
	color: var(--ohs-mute);
	font-size: 12px;
}

/* 目盛り */
.ohs-scale {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ohs-scale--nps .ohs-dot { flex: 1 1 auto; min-width: 26px; }

.ohs-dot {
	min-width: 40px;
	height: 38px;
	padding: 0 4px;
	border: 1px solid var(--ohs-line);
	border-radius: 9px;
	background: #fff;
	color: var(--ohs-mute);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.ohs-dot:hover { border-color: var(--ohs-sun); color: var(--ohs-ink); }

.ohs-dot.is-on {
	border-color: transparent;
	background: linear-gradient(180deg, #ffcb74, var(--ohs-sun));
	color: #4a3510;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255, 184, 77, .38);
}

.ohs-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	color: var(--ohs-mute);
	font-size: 11px;
}

.ohs-cap {
	margin: 4px 0 0;
	min-height: 1.2em;
	color: var(--ohs-sky);
	font-size: 12px;
	font-weight: 600;
}

/* 選択肢 */
.ohs-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.ohs-opt {
	padding: 8px 13px;
	border: 1px solid var(--ohs-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ohs-ink);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.ohs-opt:hover { border-color: var(--ohs-sky); }

.ohs-opt.is-on {
	border-color: var(--ohs-sky);
	background: rgba(74, 159, 216, .12);
	color: #1d5f8a;
	font-weight: 600;
}

/* 自由記述 */
.ohs-text {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ohs-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ohs-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	resize: vertical;
}

.ohs-text:focus {
	outline: 2px solid rgba(74, 159, 216, .5);
	outline-offset: 1px;
	border-color: var(--ohs-sky);
}

/* ハニーポット（人には見せない） */
.ohs-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

/* 足元 */
.ohs__err {
	margin: 0 0 8px;
	color: #c4453c;
	font-size: 12.5px;
	min-height: 0;
}

.ohs__err:empty { margin: 0; }

.ohs__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ohs-line);
}

.ohs__send {
	flex: 1 1 auto;
	padding: 11px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--ohs-sky);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease;
}

.ohs__send:hover { filter: brightness(1.06); }
.ohs__send:disabled { opacity: .6; cursor: default; }

.ohs--embed .ohs__send { flex: 0 0 auto; min-width: 160px; }

.ohs__later {
	flex: 0 0 auto;
	padding: 11px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ohs-mute);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

.ohs__later:hover { color: var(--ohs-ink); }

/* お礼 */
.ohs.is-thanks {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
}

.ohs__thanks {
	margin: 0;
	padding: 8px 4px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

/* キーボード操作 */
.ohs button:focus-visible {
	outline: 2px solid var(--ohs-sky);
	outline-offset: 2px;
}

/* スマホ */
@media (max-width: 600px) {
	.ohs--card {
		right: 8px;
		left: 8px;
		bottom: 8px;
		width: auto;
		max-width: none;
		max-height: 80vh;
		border-radius: 18px;
		padding: 16px 14px 14px;
	}

	.ohs-dot { min-width: 34px; height: 40px; }
	.ohs-scale--nps { gap: 4px; }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
	.ohs--card,
	.ohs-dot,
	.ohs-opt,
	.ohs__send { transition: none; }
	.ohs--card { transform: none; }
}

/* ごほうび表示 ------------------------------------------------------- */

.ohs__reward {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(255, 184, 77, .18);
	color: #8a5a10;
	font-size: 12px;
	font-weight: 700;
}

.ohs__thanks-box { text-align: center; }

.ohs__got {
	margin: 8px 0 0;
	padding: 5px 12px;
	display: inline-block;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffcb74, var(--ohs-sun));
	color: #4a3510;
	font-size: 13px;
	font-weight: 700;
}

.ohs__levelup {
	margin: 6px 0 0;
	color: var(--ohs-sky);
	font-size: 12px;
	font-weight: 700;
}

/* 誘導バナー --------------------------------------------------------- */

.ohs-banner {
	--ohs-sky: #4a9fd8;
	--ohs-sun: #ffb84d;
	--ohs-ink: #24303a;
	--ohs-mute: #6b7a86;

	display: flex;
	align-items: center;
	gap: 13px;
	margin: 16px 0;
	padding: 14px 16px;
	border: 1px solid #e3e8ec;
	border-left: 4px solid var(--ohs-sun);
	border-radius: 13px;
	background: #fff;
	color: var(--ohs-ink);
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(36, 48, 58, .06);
	transition: transform .15s ease, box-shadow .15s ease;
}

.ohs-banner:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(36, 48, 58, .12);
	text-decoration: none;
}

.ohs-banner__icon { flex: 0 0 auto; font-size: 26px; line-height: 1; }
.ohs-banner__body { flex: 1 1 auto; min-width: 0; display: block; }

.ohs-banner__title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.45;
}

.ohs-banner__desc {
	display: block;
	margin-top: 2px;
	color: var(--ohs-mute);
	font-size: 12px;
	line-height: 1.5;
}

.ohs-banner__reward {
	display: inline-block;
	margin-top: 6px;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(255, 184, 77, .2);
	color: #8a5a10;
	font-size: 11.5px;
	font-weight: 700;
}

.ohs-banner__go {
	flex: 0 0 auto;
	padding: 9px 16px;
	border-radius: 9px;
	background: var(--ohs-sky);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.ohs-banner { gap: 10px; padding: 12px 13px; }
	.ohs-banner__go { padding: 8px 12px; font-size: 12px; }
	.ohs-banner__icon { font-size: 22px; }
}

/* 誘導だけするポップアップ ------------------------------------------- */

.ohs--invite { width: 320px; }
.ohs--invite .ohs__intro { margin-bottom: 10px; font-size: 13px; color: var(--ohs-ink); }
.ohs--invite .ohs__foot { margin-top: 10px; }

.ohs--invite .ohs__send {
	display: block;
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
}

.ohs--invite .ohs__send:hover { color: #fff; text-decoration: none; }