/* 今日の1問（2026-10-07・直し1 同日）。文字はスマホでも14px以上
 * 色・角の丸み・大きさは docs/今日の1問_見本_*.html から。色はテーマ2の変数に合わせる */
.bxq-banner, .bxq-ov, .bxq-page {
	--q-ink: var(--bx-text, #26332F);
	--q-teal: var(--bx-ink, #2F474A);
	--q-gold: var(--bx-accent, #B08A2E);
	--q-gold-t: var(--bx-accent-text, #8a6a24);
	--q-gold2: #E9C46A;
	--q-cream: #FBF8F1;
	--q-line: #E2D9C6;
	--q-sub: var(--bx-label, #6B6152);
	--q-ok: #2E8B57;
	--q-ng: #C0473A;
}

/* ---------- バナー（案2：左下に写真と吹き出し。右下の「目次」ボタンと重ならない幅） ---------- */
.bxq-banner {
	position: fixed; left: 12px; bottom: 12px; z-index: var(--bxz-fixed-bar, 9000);
	display: flex; align-items: flex-end; gap: 6px;
	max-width: calc(100vw - 84px);
	cursor: pointer;
	animation: bxq-pop .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
.bxq-th {
	flex: none; display: flex; padding: 4px;
	background: linear-gradient(135deg, #F3D27A, #E2B347); border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.bxq-th img {
	display: block; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff;
	object-fit: cover; background: #fff;
}
.bxq-th img + img { margin-left: -14px; }
.bxq-th.n3 img { width: 42px; height: 42px; }
.bxq-q4 { display: grid; grid-template-columns: 22px 22px; gap: 2px; }
.bxq-th .bxq-q4 img { width: 22px; height: 22px; margin: 0; border-width: 1.5px; }
.bxq-bub {
	position: relative; min-width: 0; margin-bottom: 22px;
	background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
	animation: bxq-wig 2.4s ease-in-out 1s infinite;
}
.bxq-bub::after {
	content: ""; position: absolute; left: -7px; bottom: 8px;
	border: 7px solid transparent; border-right-color: #fff; border-left: 0;
}
.bxq-open {
	display: block; margin: 0; padding: 7px 12px; border: 0; background: transparent; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 900; line-height: 1.35; color: var(--q-teal); text-align: left;
}
.bxq-open small { display: block; font-size: 14px; font-weight: 700; color: var(--q-gold-t); }
.bxq-open:focus-visible { outline: 3px solid var(--q-gold); outline-offset: 2px; border-radius: 16px; }
.bxq-x {
	position: absolute; right: -9px; top: -11px; width: 24px; height: 24px; padding: 0;
	border: 0; border-radius: 50%; background: #fff; color: var(--q-sub);
	font-family: inherit; font-size: 15px; line-height: 24px; text-align: center; cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.bxq-x::before { content: ""; position: absolute; inset: -10px; } /* 押せる範囲を広げる */
@keyframes bxq-pop { 0% { transform: translateY(40px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bxq-wig {
	0%, 80%, 100% { transform: rotate(0); }
	85% { transform: rotate(-6deg); }
	90% { transform: rotate(5deg); }
	95% { transform: rotate(-3deg); }
}

/* ---------- モーダル（2026-10-07 1画面に収める：docs/指示_今日の1問_1画面.md） ----------
 * 375×548・360×560・390×664 で、型1〜7のどれでも、答える前も答えたあとも、モーダルの中をスクロールせずに見える。
 * 写真の高さ（--ph）を画面の高さ（dvh）から決める。それでもはみ出すときは JS（fit）が写真を少し小さくする。
 * 答える前と答えたあとで高さを変えないので、真ん中寄せでも箱は動かない */
html.bxq-lock { overflow: hidden; }
.bxq-ov {
	position: fixed; inset: 0; z-index: var(--bxz-modal, 100000);
	background: rgba(30, 40, 38, .45);
	display: flex; align-items: center; justify-content: center; padding: 8px;
}
.bxq-dlg {
	/* 2択（1段）：残りの高さを写真に。3択・4択（2段）：2段で分ける。型5：ボタンの段のぶんを引く */
	--ph: clamp(56px, calc(100vh - 310px), 110px);
	--ph: clamp(56px, calc(100dvh - 310px), 110px);
	position: relative; width: 100%; max-width: 560px;
	max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto;
	background: var(--q-cream); border-radius: 18px; padding: 12px 12px 10px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
.bxq-dlg.m-n3, .bxq-dlg.m-n4 {
	--ph: clamp(40px, calc((100vh - 440px) / 2), 110px);
	--ph: clamp(40px, calc((100dvh - 440px) / 2), 110px);
}
.bxq-dlg.m-ud {
	--ph: clamp(48px, calc(100vh - 368px), 110px);
	--ph: clamp(48px, calc(100dvh - 368px), 110px);
}
.bxq-close {
	position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; z-index: 4;
	border: 0; background: transparent; color: var(--q-sub); font-size: 22px; line-height: 1; cursor: pointer;
}

/* ---------- 問題（モーダルとページで共通） ---------- */
.bxq-card { position: relative; color: var(--q-ink); }
.bxq-card.is-busy { pointer-events: none; }
.bxq-hd { display: flex; align-items: center; height: 20px; margin: 0; padding-right: 36px; }
.bxq-date { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--q-sub); }
/* 問題文は1行。入らないときは JS が文字を小さくする（14px まで） */
.bxq-prompt {
	/* 行の高さは px で決める（文字を小さくしても高さが変わらず、答える前とあとで1pxもずれない） */
	margin: 4px 0 10px; font-size: 19px; font-size: max(14px, min(19px, 5vw)); font-weight: 700; line-height: 25px;
	white-space: nowrap; overflow: hidden; color: var(--q-ink);
}
.bxq-choices { display: grid; gap: 14px 8px; grid-template-columns: 1fr 1fr; }
/* カード：写真・品名・札・答えの数字だけ */
.bxq-c {
	position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0;
	padding: 5px 5px 6px; background: #fff; border: 2px solid transparent; border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	font-family: inherit; color: var(--q-ink); text-align: center; text-decoration: none; cursor: pointer;
	transition: transform .12s, opacity .3s, border-color .3s, box-shadow .3s;
}
div.bxq-c { cursor: default; }
a.bxq-c, a.bxq-c:hover, a.bxq-c:visited { color: var(--q-ink); text-decoration: none; }
button.bxq-c:hover { border-color: var(--q-line); }
.bxq-c:focus-visible { outline: 3px solid var(--q-gold); outline-offset: 1px; }
.bxq-ph {
	--st: min(66px, calc(var(--ph, 110px) - 4px));
	position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch;
	height: var(--ph, 110px);
}
.bxq-ph img { display: block; width: 100%; height: 100%; object-fit: contain; transition: filter .3s; }
.bxq-nm { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; word-break: break-all; }
/* 札（ライン・旧型／新型）。長いラインは2行になってよい。切ったり略したりしない */
.bxq-tgl { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 3px; max-width: 100%; }
.bxq-df {
	display: inline-block; max-width: 100%; padding: 1px 7px; border-radius: 9px;
	background: #FFF6E0; color: var(--q-gold-t); font-size: 14px; font-weight: 700; line-height: 18px; word-break: break-all;
}
/* 答えの数字：1行・カードのいちばん下にそろえる。答える前は薄い「？」 */
.bxq-v { display: block; box-sizing: content-box; height: 22px; margin-top: auto; padding-top: 3px; font-size: 18px; font-weight: 800; line-height: 22px; white-space: nowrap; overflow: hidden; color: var(--q-ink); }
.bxq-v.q { color: #d6cfbf; }
.bxq-c.dim { opacity: .5; }
.bxq-c.win { border-color: var(--q-gold); box-shadow: 0 0 0 4px rgba(233, 196, 106, .45); }
/* 押した瞬間：少しへこむ */
button.bxq-c:active, .bxq-c.is-press, button.bxq-ud:active, .bxq-ud.is-press { transform: scale(.95); box-shadow: none; }
/* はずれ：押したカードの写真を少し暗くして、左右に小さく揺らす */
.bxq-c.mine-ng img { filter: grayscale(.6) brightness(.85); }
.bxq-c.mine-ng, .bxq-ud.mine-ng { animation: bxq-shake .4s ease .05s; }
@keyframes bxq-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-7px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(3px); }
}
/* スタンプ：写真の真ん中。写真の高さに合わせて小さくなる（文字は14px のまま） */
.bxq-st {
	position: absolute; left: 50%; top: 50%; z-index: 1;
	width: var(--st); height: var(--st); border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	transform: translate(-50%, -50%) rotate(-8deg);
	color: #fff; pointer-events: none;
	box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .25);
	animation: bxq-stamp .4s cubic-bezier(.3, 1.8, .5, 1) both;
}
.bxq-st.ok { background: rgba(46, 139, 87, .92); }
.bxq-st.ng { background: rgba(192, 71, 58, .92); }
/* 記号は線で描く。○も×も同じ大きさ・太さ */
.bxq-sym { position: relative; display: block; width: calc(var(--st) * .36); height: calc(var(--st) * .36); flex: none; }
.bxq-st.ok .bxq-sym { box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; }
.bxq-st.ng .bxq-sym::before, .bxq-st.ng .bxq-sym::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--st) * .44); height: 3px; border-radius: 2px; background: #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}
.bxq-st.ng .bxq-sym::after { transform: translate(-50%, -50%) rotate(-45deg); }
.bxq-stt { display: block; font-size: 14px; font-weight: 900; line-height: 1; white-space: nowrap; }
@keyframes bxq-stamp {
	0% { transform: translate(-50%, -50%) scale(2.2) rotate(-20deg); opacity: 0; }
	100% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; }
}
/* 札：「あなたの答え」「○ 正解はこちら」 */
.bxq-tag {
	position: absolute; top: -12px; left: 50%; z-index: 2; transform: translateX(-50%);
	padding: 0 10px; border-radius: 999px; color: #fff;
	font-size: 14px; font-weight: 700; line-height: 22px; white-space: nowrap;
}
.bxq-tag.me { background: var(--q-teal); }
.bxq-tag.ans { background: var(--q-gold); animation: bxq-tagpop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes bxq-tagpop { 0% { transform: translateX(-50%) scale(.3); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
/* 開き直したとき・動きを減らす設定のときは、待たせずにそのまま出す */
.bxq-card.is-still *, .bxq-card.is-still { transition: none !important; animation: none !important; }
/* 型5（1つの品で、上がった？下がった？） */
.bxq-one { width: 62%; max-width: 220px; margin: 0 auto; cursor: default; }
.bxq-updown { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } /* 上の札（あなたの答え）がカードにかからない間 */
.bxq-ud {
	position: relative; display: flex; align-items: center; justify-content: center;
	transition: transform .12s, opacity .3s, border-color .3s, box-shadow .3s;
	/* 答える前（button）と答えたあと（span）で高さをそろえる */
	box-sizing: border-box; height: 48px; margin: 0; padding: 0 6px; line-height: 1.2;
	border-radius: 14px; font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
	background: #fff; color: var(--q-teal); border: 2px solid var(--q-teal);
}
button.bxq-ud-up .bxq-udt::before { content: '↗ '; white-space: pre; }
button.bxq-ud-down .bxq-udt::before { content: '↘ '; white-space: pre; }
.bxq-updown.is-done .bxq-ud { cursor: default; }
.bxq-ud.win { border-color: var(--q-gold); box-shadow: 0 0 0 4px rgba(233, 196, 106, .45); }
.bxq-ud.win .bxq-udt::before { content: '○ '; }
.bxq-ud.mine-ng { border-color: var(--q-ng); color: var(--q-ng); }
.bxq-ud.mine-ng .bxq-udt::before { content: '× '; }
.bxq-ud .bxq-st { display: none; } /* 型5のボタンは小さいので、スタンプの代わりに ○ × を文字で付ける */
.bxq-ud.dim { opacity: .5; }

/* ---------- 下の段（答える前：案内／答えたあと：一言と「共有・正答率・月の1問」。同じ高さ） ---------- */
.bxq-ft { display: flex; flex-direction: column; justify-content: center; height: 82px; margin-top: 8px; }
.bxq-ft.is-res { justify-content: space-between; }
.bxq-hint { margin: 0; font-size: 14px; color: var(--q-sub); text-align: center; }
.bxq-err { margin: 0; font-size: 14px; color: var(--q-ng); text-align: center; }
.bxq-msg {
	margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.bxq-msg .ok { color: var(--q-ok); }
.bxq-msg .ng { color: var(--q-ng); }
.bxq-acts { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.bxq-share {
	flex: none; height: 36px; padding: 0 16px; border-radius: 18px; border: 0; cursor: pointer;
	background: var(--q-teal); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
}
.bxq-rate { font-size: 14px; color: var(--q-sub); white-space: nowrap; }
.bxq-more, .bxq-more:visited { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--q-gold-t); text-decoration: none; white-space: nowrap; }
/* 一言と下の段は、正解が出てから */
.bxq-card:not(.is-done) .bxq-ft.is-res > * { opacity: 0; visibility: hidden; }
.bxq-ft.is-res > * { transition: opacity .3s, visibility .3s; }
.bxq-conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.bxq-conf i {
	position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: .9;
	animation: bxq-fall 1.6s ease-in forwards;
}
@keyframes bxq-fall {
	0% { transform: translateY(0) rotate(0); opacity: 1; }
	100% { transform: translateY(320px) rotate(var(--r, 360deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bxq-banner, .bxq-bub, .bxq-st, .bxq-tag.ans, .bxq-c.mine-ng, .bxq-ud.mine-ng { animation: none; }
	button.bxq-c:active, .bxq-c.is-press, button.bxq-ud:active, .bxq-ud.is-press { transform: none; }
	.bxq-c.mine-ng img { filter: none; }
	.bxq-conf { display: none; }
}

/* ---------- ページ（/question/・月ごと） ---------- */
.bxq-page { font-size: 16px; }
.bxq-page .bxq-h1 { font-size: 24px; line-height: 1.45; margin: 0 0 10px; color: var(--q-teal); }
.bxq-page .bxq-h2 { font-size: 19px; line-height: 1.45; margin: 28px 0 12px; color: var(--q-teal); }
.bxq-lead, .bxq-note, .bxq-empty { font-size: 15px; line-height: 1.8; color: var(--q-sub); }
/* /question/ のページは、スクロールしてよいので写真は大きめで決まった高さ（高さの決まりはモーダルだけ） */
.bxq-today .bxq-card { --ph: 110px; background: var(--q-cream); border: 1px solid var(--q-line); border-radius: 22px; padding: 16px 14px 12px; }
.bxq-today .bxq-prompt { margin-right: 0; }
.bxq-none p { margin: 0; font-size: 16px; }
.bxq-month-list { list-style: none; margin: 0; padding: 0; }
.bxq-month-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bx-hairline, #e5e2dc); font-size: 16px; }
.bxq-count { color: var(--q-sub); font-size: 14px; white-space: nowrap; }
/* 月ごとのカード：正解は金の枠と上のリボン（中は塗らない）、はずれは薄く */
.bxq-mcard { background: #fff; border: 1px solid var(--q-line); border-radius: 16px; padding: 12px; margin: 0 0 12px; }
.bxq-mcard.is-big { border: 2px solid var(--q-gold); }
.bxq-mdate { margin: 0; font-size: 14px; font-weight: 700; color: var(--q-sub); }
.bxq-mq { margin: 2px 0 10px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.bxq-mchoices { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 14px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bxq-mchoices.n1 { grid-template-columns: minmax(0, 200px); }
.bxq-mchoices li { position: relative; margin: 0; padding: 0; }
.bxq-mchoices li > a, .bxq-mchoices li > .bxq-mit {
	box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%;
	padding: 8px 6px 10px; border-radius: 12px; border: 2px solid transparent;
	text-decoration: none; color: var(--q-ink); text-align: center;
}
.bxq-mchoices li.is-win > a, .bxq-mchoices li.is-win > .bxq-mit { border-color: var(--q-gold); }
.bxq-mchoices li.is-lose { opacity: .5; }
.bxq-rb {
	position: absolute; top: -10px; left: 50%; z-index: 1; transform: translateX(-50%);
	padding: 0 10px; border-radius: 999px; background: var(--q-gold); color: #fff;
	font-size: 14px; font-weight: 700; line-height: 22px; white-space: nowrap;
}
.bxq-mchoices img { display: block; width: 100%; height: 96px; object-fit: contain; }
.bxq-mlabel { font-size: 14px; font-weight: 700; line-height: 1.35; word-break: break-all; }
.bxq-mdf { color: var(--q-gold-t); }
.bxq-mval { font-size: 14px; line-height: 1.4; color: var(--q-sub); }
.bxq-mval b { display: block; font-size: 15px; color: var(--q-ink); }
.bxq-mstory { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #FFF6E0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.bxq-mrate { margin: 6px 0 0; font-size: 14px; color: var(--q-sub); }
.bxq-after { list-style: none; margin: 0; padding: 0; }
.bxq-after li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bx-hairline, #e5e2dc); }
.bxq-after img { width: 56px; height: 56px; object-fit: contain; flex: none; background: #fff; border-radius: 8px; }
.bxq-aname { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; word-break: break-all; }
.bxq-aname small { display: block; font-size: 14px; font-weight: 400; color: var(--q-sub); }
.bxq-aval { flex: 0 0 auto; font-size: 14px; text-align: right; }
.bxq-aval b { display: block; font-size: 14px; }
.bxq-aval b.up { color: var(--q-ok); }
.bxq-aval b.down { color: var(--bx-change-down, #6f7d74); }
.bxq-all { width: 100%; border-collapse: collapse; font-size: 14px; }
.bxq-all th, .bxq-all td { padding: 8px 6px; border-bottom: 1px solid var(--bx-hairline, #e5e2dc); text-align: left; vertical-align: top; }
.bxq-all th { font-weight: 700; color: var(--q-sub); }
.bxq-all td:first-child { white-space: nowrap; }
.bxq-back { margin: 28px 0 0; font-size: 15px; }
.bxq-more-after { margin-top: 4px; }
.bxq-more-after summary { cursor: pointer; padding: 12px 0; font-size: 15px; color: var(--q-gold-t); }

@media (min-width: 768px) {
	.bxq-choices.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bxq-choices.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bxq-mchoices.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bxq-mchoices.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bxq-dlg { padding: 18px 20px 14px; }
	.bxq-dlg.m-n4 { max-width: 760px; }
	/* パソコンでは3択・4択も1段なので、2択と同じ決め方 */
	.bxq-dlg.m-n3, .bxq-dlg.m-n4 {
		--ph: clamp(56px, calc(100vh - 310px), 110px);
		--ph: clamp(56px, calc(100dvh - 310px), 110px);
	}
	.bxq-today .bxq-choices.n2, .bxq-today .bxq-updown, .bxq-today .bxq-one { max-width: 560px; }
	.bxq-today .bxq-one { margin-left: 0; }
}
@media (max-width: 480px) {
	.bxq-aval { max-width: 46%; }
}