/* 前世診断（2026-08-23）
   設問画面は ms-quiz の既存スタイルをそのまま使う。ここは導入と結果だけ。
   モバイル優先。320pxで組んで、広い画面はメディアクエリで足す。 */

/* ── 導入 ───────────────────────────── */
.mszi { background: linear-gradient(165deg, #f7f2ff, #efe6f8) !important; background-image: none !important; }
.mszi__hero {
	display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 14px;
	border-radius: 16px; box-shadow: 0 8px 26px rgba(90, 60, 140, .22);
}
.ms-quiz--zense .ms-quiz__intro-title small {
	display: block; margin-top: 6px; font-size: .58em; font-weight: 700; color: #6b5f7d; letter-spacing: .02em;
}

/* ── 結果 ───────────────────────────── */
.msz { max-width: 640px; margin: 0 auto; }

.msz__hero {
	text-align: center; padding: 18px 14px 22px; border-radius: 20px;
	background: linear-gradient(170deg, #2b2338, #4a3a5e 60%, #6b5183);
	box-shadow: 0 10px 30px rgba(43, 35, 56, .3);
}
.msz__eyebrow {
	margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .22em;
	color: #d9b96a;
}
.msz__img {
	display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 14px;
	border-radius: 14px; box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.msz__name {
	margin: 0 0 6px; font-size: clamp(1.7rem, 8vw, 2.4rem); font-weight: 900;
	color: #fff; line-height: 1.25; letter-spacing: .01em;
}
.msz__title { margin: 0 0 12px; font-size: .92rem; font-weight: 700; color: #e7dcf3; }
.msz__era { display: block; margin-top: 3px; font-size: .8rem; font-weight: 500; color: #b8a8cc; }
.msz__catch {
	margin: 0 0 14px; padding: 0 4px; font-size: 1.02rem; font-weight: 700;
	color: #f3e8c8; line-height: 1.7;
}
.msz__code {
	display: inline-block; margin: 0; padding: 6px 16px; border-radius: 999px;
	background: rgba(255, 255, 255, .13); color: #fff; font-size: .88rem; font-weight: 800;
}

.msz__sec { margin: 18px 0 0; padding: 16px 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(90, 60, 140, .08); }
.msz__h { margin: 0 0 10px; font-size: 1rem; font-weight: 900; color: #2b2338; }
.msz__h::before { content: ''; display: inline-block; width: 4px; height: 1em; margin-right: 8px; vertical-align: -.12em; border-radius: 2px; background: #c05a9a; }
.msz__sec p { margin: 0; font-size: .95rem; line-height: 1.95; color: #3a3147; }
.msz__sec--bond { background: #fdf4fa; box-shadow: inset 0 0 0 1px #f0d9e8; }
.msz__sec--left { background: #2b2338; box-shadow: none; text-align: center; }
.msz__leftlead { margin: 0 0 8px !important; font-size: .76rem !important; font-weight: 800; letter-spacing: .18em; color: #d9b96a !important; }
.msz__left { color: #efe6f8 !important; font-size: .98rem !important; font-weight: 600; }

.msz__row { display: flex; gap: 10px; margin: 18px 0 0; }
.msz__btn {
	flex: 1; display: flex; align-items: center; justify-content: center; min-height: 50px;
	border-radius: 12px; font-weight: 800; font-size: .95rem; text-decoration: none;
	background: #2b2338; color: #fff;
}
.msz__btn--ghost { background: #fff; color: #6b5f7d; box-shadow: inset 0 0 0 2px #ddd3e8; }

/* 2026-08-25: シェアを結果の直後にも出す。
   下のボタンだけでは結果先頭から1,859pxあり、そこまで読まれずに閉じられていた。 */
.msz__sharelead { margin: 18px 0 8px; text-align: center; font-size: .84rem; line-height: 1.8; color: #6b5f7d; }
.msz__row--top { margin: 0 0 6px; }
.msz__btn--line { background: #06c755; }

.msz__next {
	display: block; margin: 16px 0 0; padding: 16px; border-radius: 14px; text-decoration: none;
	background: linear-gradient(135deg, #c05a9a, #8a4a9e); color: #fff;
	box-shadow: 0 6px 18px rgba(192, 90, 154, .28);
}
.msz__next-t { display: block; font-size: 1rem; font-weight: 900; }
.msz__next-s { display: block; margin: 6px 0 10px; font-size: .82rem; line-height: 1.7; color: #ffeaf6; }
.msz__next-go { display: block; font-size: .92rem; font-weight: 800; }

.msz__detail { margin: 16px 0 0; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(90, 60, 140, .08); }
.msz__detail summary { padding: 14px 16px; font-size: .9rem; font-weight: 800; color: #6b5f7d; cursor: pointer; }
.msz__detail-in { padding: 0 16px 16px; }
.msz__fine { margin: 12px 0 0; font-size: .78rem; line-height: 1.8; color: #8b7f9d; }

.msz__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; justify-content: center; }
.msz__links a { font-size: .88rem; font-weight: 700; color: #8a4a9e; }

/* ── 解説パート ─────────────────────── */
.qas__sec { margin: 22px 0 0; }
.qas__sec h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 900; color: #2b2338; }
.qas__sec p { font-size: .95rem; line-height: 1.95; }
.qas__list { margin: 10px 0 0; padding-left: 1.15em; }
.qas__list li { margin: 0 0 8px; font-size: .93rem; line-height: 1.85; }
.qas__note { margin: 24px 0 0; font-size: .78rem; line-height: 1.8; color: #8b7f9d; }

@media (min-width: 720px) {
	.mszi__hero { max-width: 340px; }
	.msz__img { max-width: 320px; }
	.msz__hero { padding: 26px 24px 30px; }
	.msz__sec { padding: 20px 22px 22px; }
}

/* 結果からコラムへの導線。ここを読ませないと、診断で終わって帰る */
.msz__sec--col { background: #fff; }
.msz__colslead { margin: 0 0 12px !important; font-size: .88rem !important; color: #6b5f7d !important; }
.msz__cols { margin: 0; padding: 0; list-style: none; }
.msz__cols li { border-top: 1px solid #eee6f3; }
.msz__cols li:first-child { border-top: 0; }
.msz__cols a {
	display: block; padding: 13px 26px 13px 0; position: relative;
	font-size: .93rem; font-weight: 700; line-height: 1.6; color: #4a3a5e; text-decoration: none;
}
.msz__cols a::after {
	content: '›'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	font-size: 1.2rem; color: #c05a9a;
}

/* 課金への入口。冒頭だけ見せて、続きはぼかす（標準型） */
.mszp { position: relative; margin: 18px 0 0; padding: 0 0 20px; border-radius: 16px; overflow: hidden; background: #2b2338; }
.mszp__img { display: block; width: 100%; height: auto; opacity: .55; }
.mszp__eyebrow {
	margin: 14px 16px 8px; font-size: .74rem; font-weight: 800; letter-spacing: .2em; color: #d9b96a;
}
.mszp__lead { margin: 0 16px 10px; font-size: .95rem; line-height: 1.95; color: #efe6f8; }
.mszp__left { margin: 0 16px 14px; font-size: .95rem; line-height: 1.95; font-weight: 700; color: #f3e8c8; }
.mszp__blur { margin: 0 16px; filter: blur(4.5px); opacity: .5; user-select: none; pointer-events: none; }
.mszp__blur p { margin: 0 0 8px; font-size: .92rem; line-height: 1.9; color: #cfc3e0; }
.mszp__more {
	display: block; margin: 16px 16px 0; padding: 15px; border-radius: 12px; text-align: center;
	background: #d9b96a; color: #2b2338; font-weight: 900; font-size: .98rem; text-decoration: none;
}


/* ── 2026-08-24: 開始ボタンがファーストビューの外にあった ──────────
   実測: ボタン top=925 に対して画面の高さ844。指が届く前にスクロールが要る。
   原因は2つで、どちらも高さの食い過ぎ。
     ・ヒーローが896×1344の縦長。300px幅だと450pxの高さになる
     ・「12問/約2分/64人から1人/登録不要/無料」が縦積みで140px
   画像を帯に切り、項目を横並びのチップにして、文字ブロックを画像へ少し重ねる。 */
.ms-quiz--zense .mszi__hero {
	max-width: 340px; max-height: 190px; object-fit: cover; object-position: center 26%;
	margin: 0 auto 0;
}
/* 画像の下端に文字ブロックを重ねる。重ねてよいとの指示 */
/* バッジを画像に重ねると白い箱が乗って不格好だったので、重ねずに詰める */
.ms-quiz--zense .ms-short-badge { margin-top: 12px; }
.ms-quiz--zense .ms-quiz__intro-title { margin-top: 10px; }
.ms-quiz--zense .ms-quiz__intro-subtitle { margin: 6px 0 0; }
/* 縦積みをやめて、横並びのチップにする */
.ms-quiz--zense .ms-short-facts {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
	list-style: none; padding: 0; margin: 12px 0 14px;
}
.ms-quiz--zense .ms-short-facts li {
	background: #fff; border: 1px solid #e2d8f2; border-radius: 999px;
	padding: 5px 12px; font-size: 12px; font-weight: 800; color: #5a4a75; line-height: 1.5;
}
.ms-quiz--zense .ms-quiz__start-btn { margin-top: 0; }
@media (min-width: 768px) {
	.ms-quiz--zense .mszi__hero { max-width: 420px; max-height: 260px; }
}

/* 2026-08-24 追加の3節。既存の msz__sec を土台に、色だけ変える */
.msz__sec--now { background: #fbf7ff; }
.msz__sec--trap { background: #fff6f4; }
.msz__sec--match { background: #f5fbf7; }