/* リザスト☆クエスト 会員講座 — フロント表示 */
.rquest, .rquest * { box-sizing: border-box; }
.rquest {
	--rq-bg:#f4f1ec; --rq-panel:#fff; --rq-panel2:#faf8f4; --rq-ink:#2b2620; --rq-soft:#6b6357;
	--rq-line:#e6e0d6; --rq-brand:#7c5cc4; --rq-brandsoft:#ece5fb; --rq-brandink:#5b3fa0;
	--rq-green:#3f9d6d; --rq-quest:#f3efff; --rq-questline:#a487e0;
	color: var(--rq-ink);
	font-family: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
	line-height: 1.7;
}
@media (prefers-color-scheme: dark) {
	.rquest {
		--rq-bg:#15131b; --rq-panel:#1f1b28; --rq-panel2:#1a1723; --rq-ink:#ece5f2; --rq-soft:#a89fb4;
		--rq-line:#332d40; --rq-brand:#a487e0; --rq-brandsoft:#2c2340; --rq-brandink:#c3aef0;
		--rq-green:#5cc08b; --rq-quest:#241c33; --rq-questline:#6b53a0;
	}
}
.rquest .rq-loading { padding: 30px; color: var(--rq-soft); }

/* ゲート（未ログイン） */
.rquest-gate { display: flex; justify-content: center; padding: 20px; }
.rquest-gate-card {
	background: var(--rq-panel, #fff); border: 1px solid #e6e0d6; border-radius: 16px;
	padding: 32px 28px; max-width: 460px; text-align: center;
	box-shadow: 0 8px 24px rgba(40,30,15,.08);
}
.rquest-gate-mark { font-size: 40px; margin-bottom: 4px; }
.rquest-gate-card h3 { margin: 6px 0 8px; font-size: 20px; color: #2b2620; }
.rquest-gate-card h3 span { display: block; font-size: 12px; font-weight: 700; color: #5b3fa0; letter-spacing: .08em; margin-top: 3px; }
.rquest-gate-card p { margin: 6px 0; color: #6b6357; }
.rquest-gate-lead { font-size: 13.5px; line-height: 1.8; margin: 6px 0 18px; }
.rquest-btn, .rquest .rq-btn {
	display: inline-block; text-decoration: none; cursor: pointer;
	border: 1px solid #7c5cc4; background: #7c5cc4; color: #fff;
	padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: 14px;
	margin-top: 8px; text-align: center;
}
/* 新規／会員の2択カード */
.rquest-gate-choice { display: flex; gap: 12px; margin-top: 4px; text-align: center; }
@media (max-width: 480px) { .rquest-gate-choice { flex-direction: column; } }
.rquest-gate-col { flex: 1; display: flex; flex-direction: column; gap: 8px; background: #faf8f4; border: 1px solid #e6e0d6; border-radius: 14px; padding: 15px 14px; }
.rquest-gate-new { background: #ece5fb; border-color: #7c5cc4; }
.rquest-gate-badge { font-size: 12px; font-weight: 800; color: #5b3fa0; }
.rquest-gate-hint { font-size: 11px; color: #6b6357; }
.rquest-gate-note { font-size: 12px; color: #6b6357; margin-top: 12px; }
.rquest-btn.primary { background: #7c5cc4; border-color: #7c5cc4; color: #fff; margin-top: 0; }
.rquest-btn.ghost { background: #fff; color: #5b3fa0; border: 1px solid #7c5cc4; margin-top: 0; }
.rquest-btn.ghost:hover { background: #ece5fb; }
@media (prefers-color-scheme: dark) {
	.rquest-gate-card { background: #1f1b28; border-color: #332d40; }
	.rquest-gate-card h3 { color: #ece5f2; }
	.rquest-gate-col { background: #1a1723; border-color: #332d40; }
	.rquest-gate-new { background: #2c2340; border-color: #a487e0; }
	.rquest-btn.ghost { background: transparent; color: #c3aef0; }
}

/* レイアウト */
.rq-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .rq-wrap { grid-template-columns: 1fr; } }

.rq-side {
	background: var(--rq-panel); border: 1px solid var(--rq-line); border-radius: 16px;
	overflow: hidden; position: sticky; top: 16px;
}
@media (max-width: 820px) { .rq-side { position: static; } }
.rq-prog { padding: 14px 16px 12px; border-bottom: 1px solid var(--rq-line); }
.rq-prog-l { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--rq-soft); margin-bottom: 7px; }
.rq-bar { height: 8px; background: var(--rq-panel2); border-radius: 999px; overflow: hidden; }
.rq-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--rq-brand), #a487e0); border-radius: 999px; transition: width .4s ease; }
.rq-navlist { max-height: 68vh; overflow-y: auto; padding: 8px; }
/* スマホ幅：一覧はコンパクトなスクロール枠に。タップ→本文へスクロールで移動が分かりやすい */
@media (max-width: 820px) {
	.rq-navlist { max-height: 44vh; -webkit-overflow-scrolling: touch; }
	.rq-prog { padding: 12px 14px 10px; }
}

/* 「クエスト一覧にもどる」ボタン（スマホのみ表示） */
.rq-tolist { display: none; }
@media (max-width: 820px) {
	.rq-tolist { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; border: 1px solid var(--rq-line); background: var(--rq-panel2); color: var(--rq-brandink); font-weight: 700; font-size: 12.5px; padding: 7px 13px; border-radius: 999px; cursor: pointer; font-family: inherit; }
	.rq-tolist:hover { border-color: var(--rq-brand); }
}

/* スマホ幅の読みやすさ（文字サイズ・行間・余白） */
@media (max-width: 820px) {
	.rq-body { font-size: 16px; line-height: 1.95; padding: 16px 18px 22px; }
	.rq-body p { margin: 0 0 21px; }
	.rq-head { padding: 16px 18px 14px; }
	.rq-subject { font-size: 19px; line-height: 1.45; }
	.rq-quest { padding: 16px 16px; }
	.rq-quest-b { font-size: 15.5px; line-height: 1.95; }
	.rq-greet { font-size: 12.5px; }
	.rq-mission { padding: 16px 15px; }
	.rq-mission-q label { font-size: 15px; }
	.rq-actions { padding: 14px 18px; }
	.rq-gallery { padding: 6px 12px 20px; }
	.rq-gal-grid { grid-template-columns: 1fr; }
}
.rq-chaptitle { font-size: 11px; font-weight: 800; color: var(--rq-brandink); padding: 11px 10px 5px; }
.rq-chaptitle span { color: var(--rq-soft); font-weight: 600; font-size: 10px; }
.rq-navitem {
	display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
	border: 0; background: transparent; color: var(--rq-ink); padding: 8px 10px;
	border-radius: 9px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.rq-navitem:hover { background: var(--rq-panel2); }
.rq-navitem.active { background: var(--rq-brandsoft); color: var(--rq-brandink); font-weight: 700; }
.rq-dnum {
	flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
	font-size: 11px; font-weight: 800; color: var(--rq-soft);
	background: var(--rq-panel2); border: 1px solid var(--rq-line);
}
.rq-navitem.active .rq-dnum { background: var(--rq-brand); color: #fff; border-color: var(--rq-brand); }
.rq-navitem.done .rq-dnum { background: var(--rq-green); color: #fff; border-color: var(--rq-green); }
.rq-navitem.read .rq-dnum { background: var(--rq-brandsoft); color: var(--rq-brandink); border-color: var(--rq-brand); }
.rq-tt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-navmark { flex: none; font-size: 13px; margin-left: 2px; }

/* 進捗サブ表示・凡例 */
.rq-prog-sub { font-size: 11.5px; color: var(--rq-soft); margin-top: 7px; }
.rq-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: var(--rq-soft); }
.rq-legend span { display: inline-flex; align-items: center; gap: 4px; }
.rq-legend i { font-style: normal; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; font-size: 11px; line-height: 1; }
.rq-legend .lg-read { background: var(--rq-brandsoft); border: 1px solid var(--rq-brand); }
.rq-legend .lg-done { background: var(--rq-green); color: #fff; }
.rq-legend .lg-mis { background: transparent; }

/* 本文 */
.rq-main { min-width: 0; }
.rq-card { background: var(--rq-panel); border: 1px solid var(--rq-line); border-radius: 16px; overflow: hidden; }
.rq-head { padding: 20px 26px 16px; border-bottom: 1px solid var(--rq-line); background: linear-gradient(180deg, var(--rq-panel2), var(--rq-panel)); }
.rq-crumb { font-size: 12px; font-weight: 700; color: var(--rq-brandink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.rq-pill { background: var(--rq-brandsoft); padding: 3px 10px; border-radius: 999px; }
.rq-pill.rq-g { color: var(--rq-soft); background: var(--rq-panel2); border: 1px solid var(--rq-line); }
.rq-subject { font-size: 21px; font-weight: 800; line-height: 1.4; margin: 0; }
.rq-body { padding: 16px 26px 22px; font-size: 15.5px; }
.rq-body p { margin: 0 0 20px; }
.rq-greet { color: var(--rq-soft); font-size: 13px; border-bottom: 1px dashed var(--rq-line); padding-bottom: 12px; margin-bottom: 14px; }

/* 上部タブ（クエスト / 動画一覧） */
.rq-topbar { display: flex; gap: 8px; margin-bottom: 14px; }
.rq-tab { border: 1px solid var(--rq-line); background: var(--rq-panel); color: var(--rq-soft); padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.rq-tab:hover { border-color: var(--rq-brand); color: var(--rq-brandink); }
.rq-tab.on { background: var(--rq-brand); border-color: var(--rq-brand); color: #fff; box-shadow: 0 2px 10px rgba(124,92,196,.35); }

/* 動画一覧（ギャラリー） */
.rq-gallery { background: var(--rq-panel); border: 1px solid var(--rq-line); border-radius: 16px; padding: 6px 18px 22px; }
.rq-gal-head { padding: 16px 4px 6px; border-bottom: 1px solid var(--rq-line); margin-bottom: 12px; }
.rq-gal-head h2 { margin: 0 0 4px; font-size: 20px; }
.rq-gal-head p { margin: 0; color: var(--rq-soft); font-size: 13px; }
.rq-gal-chap { margin-top: 18px; }
.rq-gal-chap > h3 { font-size: 13px; font-weight: 800; color: var(--rq-brandink); margin: 0 0 10px; padding: 0 2px; }
.rq-gal-chap > h3 span { color: var(--rq-soft); font-weight: 600; font-size: 11px; }
.rq-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rq-gal-card { border: 1px solid var(--rq-line); border-radius: 12px; overflow: hidden; background: var(--rq-panel2); }
.rq-gal-player { position: relative; aspect-ratio: 16 / 9; background: #000; display: grid; place-items: center; }
.rq-gal-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rq-gal-play { width: 58px; height: 58px; border-radius: 50%; border: 0; background: rgba(124,92,196,.92); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; padding-left: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .12s; }
.rq-gal-play:hover { transform: scale(1.08); background: var(--rq-brand); }
.rq-gal-meta { padding: 11px 13px 13px; }
.rq-gal-title { font-weight: 700; font-size: 14px; line-height: 1.5; }
.rq-gal-no { display: inline-block; background: var(--rq-brandsoft); color: var(--rq-brandink); font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 7px; margin-right: 7px; }
.rq-gal-pw { font-size: 12px; color: var(--rq-soft); margin-top: 6px; }
.rq-gal-pw code { background: var(--rq-panel); border: 1px solid var(--rq-line); border-radius: 5px; padding: 1px 6px; font-size: 12px; }
.rq-gal-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--rq-accent); text-decoration: none; }
.rq-gal-link:hover { text-decoration: underline; }

/* 埋め込み動画（Vimeo / YouTube） */
.rq-video { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: 6px 0 18px; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--rq-line); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.rq-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@supports not (aspect-ratio: 1) { .rq-video { height: 0; padding-bottom: 56.25%; } }

.rq-quest { background: var(--rq-quest); border: 2px dashed var(--rq-questline); border-radius: 14px; padding: 18px 20px; margin: 16px 0; }
.rq-quest-h { font-size: 12px; font-weight: 800; color: var(--rq-brandink); letter-spacing: .05em; margin-bottom: 8px; }
.rq-quest-b { font-size: 15px; line-height: 1.85; }

/* ふりかえりクエストの質問リスト */
.rq-body ol.rq-mission { margin: 14px 0; padding: 16px 18px 16px 40px; background: var(--rq-panel2); border: 1px solid var(--rq-line); border-radius: 12px; }
.rq-body ol.rq-mission li { margin: 0 0 10px; padding-left: 4px; line-height: 1.7; }
.rq-body ol.rq-mission li:last-child { margin-bottom: 0; }

/* 返信ミッション（入力フォーム） */
.rq-mission { margin: 18px 0 4px; padding: 18px 20px; background: var(--rq-quest); border: 2px solid var(--rq-questline); border-radius: 14px; }
.rq-mission-h { font-size: 14px; font-weight: 800; color: var(--rq-brandink); margin-bottom: 8px; }
.rq-mission-intro { font-size: 14px; margin: 0 0 14px; }
.rq-mission-q { margin: 0 0 14px; }
.rq-mission-q label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 4px; line-height: 1.6; }
.rq-mission-ex { font-size: 12px; color: var(--rq-soft); margin: 0 0 6px; line-height: 1.6; }
.rq-mission-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px; background: var(--rq-panel); border: 1px solid var(--rq-line); border-radius: 9px; color: var(--rq-ink); padding: 9px 11px; font-size: 14px; font-family: inherit; line-height: 1.7; }
.rq-mission-input:focus { outline: 2px solid var(--rq-brandsoft); border-color: var(--rq-brand); }
.rq-mission-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.rq-mission-saved { font-size: 12px; font-weight: 700; color: #fff; background: var(--rq-green); border-radius: 999px; padding: 3px 10px; }
.rq-mission-status { font-size: 13px; font-weight: 700; }
.rq-mission-status.ok { color: var(--rq-green); }
.rq-mission-status.err { color: #c0392b; }

.rq-actions { display: flex; gap: 10px; align-items: center; padding: 16px 26px; border-top: 1px solid var(--rq-line); background: var(--rq-panel2); flex-wrap: wrap; }
.rquest .rq-btn { background: var(--rq-panel); color: var(--rq-ink); border: 1px solid var(--rq-line); margin-top: 0; }
.rquest .rq-btn:hover { border-color: var(--rq-brand); }
.rquest .rq-btn.primary { background: var(--rq-brand); border-color: var(--rq-brand); color: #fff; }
.rquest .rq-btn.done { background: var(--rq-green); border-color: var(--rq-green); color: #fff; }
.rquest .rq-btn[disabled] { opacity: .4; cursor: not-allowed; }
.rq-lr { margin-left: auto; display: flex; gap: 8px; }

/* 会員登録フォーム [reserve_quest_signup] */
.rquest-signup { max-width: 420px; }
.rquest-form { display: flex; flex-direction: column; gap: 12px; text-align: left; margin-top: 4px; }
.rquest-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: #2b2620; }
.rquest-form input {
	width: 100%; box-sizing: border-box; font-size: 16px; font-family: inherit;
	padding: 11px 12px; border: 1px solid #d9d2c6; border-radius: 10px; background: #faf8f4; color: #2b2620;
	font-weight: 400;
}
.rquest-form input:focus { outline: none; border-color: #7c5cc4; box-shadow: 0 0 0 3px #ece5fb; }
.rquest-form-submit { width: 100%; margin-top: 6px; padding: 13px 20px; font-size: 15px; border: 0; }
.rquest-form-ok { font-size: 12px; font-weight: 700; color: #3f9d6d; margin: 0; }
.rquest-form-error {
	background: #fdecea; border: 1px solid #f0b3ac; border-radius: 10px;
	padding: 10px 14px; margin: 0 0 14px; text-align: left;
}
.rquest-form-error ul { margin: 0; padding-left: 18px; }
.rquest-form-error li { color: #a3261a; font-size: 13px; line-height: 1.7; }
@media (prefers-color-scheme: dark) {
	.rquest-form label { color: #ece5f2; }
	.rquest-form input { background: #1a1723; border-color: #332d40; color: #ece5f2; }
	.rquest-form-error { background: #3a1c19; border-color: #7a3b33; }
	.rquest-form-error li { color: #f0b3ac; }
}

/* ログインページ内「はじめての方」 */
.rquest-login-signup {
	margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6e0d6;
	font-size: 13px; color: #6b6357;
}
.rquest-login-signup .rquest-btn { margin-top: 8px; display: inline-block; }
@media (prefers-color-scheme: dark) { .rquest-login-signup { border-top-color: #332d40; color: #a89fb4; } }

/* 入口のタブ（ログイン / はじめての方） */
.rquest-tabs { display: flex; gap: 8px; justify-content: center; margin: 4px 0 16px; }
.rquest-tab {
	flex: 1; text-decoration: none; text-align: center;
	padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 13.5px;
	border: 1px solid #e6e0d6; background: #faf8f4; color: #6b6357;
}
.rquest-tab:hover { border-color: #7c5cc4; color: #5b3fa0; }
.rquest-tab.on { background: #7c5cc4; border-color: #7c5cc4; color: #fff; }

/* 登録直後のごあいさつ */
.rquest-welcome {
	background: #ece5fb; border: 1px solid #a487e0; border-radius: 12px;
	padding: 12px 16px; margin: 0 0 14px; font-weight: 700; color: #5b3fa0; font-size: 14px;
}
@media (prefers-color-scheme: dark) {
	.rquest-tab { background: #1a1723; border-color: #332d40; color: #a89fb4; }
	.rquest-tab.on { background: #a487e0; border-color: #a487e0; color: #15131b; }
	.rquest-welcome { background: #2c2340; border-color: #6b53a0; color: #c3aef0; }
}

/* 本文の読み込み中表示 */
.rq-loading-body { color: var(--rq-soft); font-size: 14px; }