/* すとぷりすなー64タイプ診断
 *
 * ジャニヲタ版（oshi-shindan.css）と同じ骨格で、色だけ振り直してある。
 * 紫はミントへ、マゼンタはいちご寄りへ色相を回した。明度・彩度は元のまま——
 * どこが濃くてどこが淡いかの設計は、向こうで詰めたものをそのまま使う。
 * レイアウトを片方で直したら、もう片方も見に行くこと。
 */
/* 推し活64タイプ診断（2026-08-16）
 *
 * 競合はペンライトのピンクだけで組んでいる。
 * こちらはサイト本体の紫を残したまま、推し活側のピンクを足す。
 * 本体（64タイプ診断）へ渡す導線があるので、色が地続きでないと別サイトに見える。
 */

.stpr{padding:0 0 60px}

/* ---- はじめの画面 ----
   ボタンが画面の外にあると、そもそも診断が始まらない。
   スマホは 見出し→所要時間→ボタン→絵、PCは 左に文字・右に絵。
   縦長の絵（1200×1600）をそのまま先頭に置くと、
   390×844でも1440×1000でもボタンが折り返しの下に落ちる。 */
.stpr-top__grid{display:block}
.stpr-top__art{
	display:block;width:100%;height:auto;border-radius:22px;margin:0 0 22px;
	box-shadow:0 18px 44px rgba(107,63,160,.18)}
/* スマホでは絵の高さを抑える。全部見せる必要はなく、
   スクロールせずにボタンまで届くことのほうが大事。 */
.stpr-top__visual{margin:4px 0 0}
/* picture は inline 要素。block にしないと画像の下に余白が入る */
.stpr-top__visual picture{display:block}
.stpr-top__visual .stpr-top__art{
	max-height:46vh;object-fit:cover;object-position:center 28%;margin:0}

@media (min-width:860px){
	.stpr-top__grid{
		display:grid;grid-template-columns:1fr 0.82fr;gap:34px;align-items:center;
		margin:0 0 6px}
	.stpr-top__head{text-align:left}
	.stpr-top__eyebrow,.stpr-top__h1,.stpr-top__sub{text-align:left}
	.stpr-top__facts{justify-content:flex-start}
	.stpr-top__btnwrap{text-align:left}
	.stpr-top__note{text-align:left}
	.stpr-top__visual{margin:0}
	.stpr-top__visual .stpr-top__art{max-height:none;object-fit:contain}
	.stpr-top__lead{max-width:none}
}
.stpr-top__eyebrow{
	margin:0 0 8px;text-align:center;
	font:800 11px Poppins,sans-serif;letter-spacing:.18em;color:#a8516b}
.stpr-top__h1{
	margin:0 0 8px;text-align:center;font-size:clamp(26px,6.4vw,38px);
	line-height:1.25;color:#552a38}
.stpr-top__sub{
	margin:0 0 18px;text-align:center;font-size:15px;font-weight:800;color:#5fa892}
.stpr-top__lead{
	margin:0 0 18px;font-size:14px;line-height:2.05;color:#664751}
.stpr-top__lead strong{color:#b84765;font-weight:900}
.stpr-top__facts{
	display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
	margin:0 0 22px;padding:0;list-style:none}
.stpr-top__facts li{
	padding:7px 13px;border-radius:99px;background:#fbeef2;
	border:1px solid #f0d3dd;font-size:12px;font-weight:800;color:#a55277}
.stpr-top__btnwrap{margin:0 0 14px;text-align:center}
.stpr-top__btn{
	display:inline-block;min-height:56px;padding:17px 44px;border:0;border-radius:999px;
	cursor:pointer;background:linear-gradient(135deg,#e0617c,#5fc7a7);color:#fff;
	font-family:inherit;font-size:16px;font-weight:900;letter-spacing:.06em;
	box-shadow:0 12px 30px rgba(200,80,150,.34);-webkit-tap-highlight-color:transparent}
.stpr-top__note{margin:0;text-align:center;font-size:11px;line-height:1.8;color:#80666f}

/* 診断中は、外へ出るボタンを隠す。
   18問の途中でヘッダーの「無料で診断」を押すと別の診断（/quiz/）へ飛んでしまう——
   いま診断しているのに「無料で診断」が出ているのは、そもそも意味が通らない。
   下部ナビとハンバーガーも同じ理由で隠す。ロゴだけは残す（迷子の逃げ道）。 */
body.stpr-running .ms-header__cta,
body.stpr-running .ms-header__quickcta,
body.stpr-running .ms-nav-cta-top,
body.stpr-running .ms-nav-cta-pc,
body.stpr-running .ms-header__hamburger,
body.stpr-running .ms-header__nav,
body.stpr-running #msBottomNav{display:none !important}
/* 下部ナビが消えるぶん、下の余白も詰める */
body.stpr-running .stpr{padding-bottom:24px}

/* ---- 設問 ---- */
.stpr-prog{margin:0 0 20px}
.stpr-prog__t{
	margin:0 0 7px;font:900 12px Poppins,sans-serif;color:#a55277;text-align:center}
.stpr-prog__bar{height:7px;border-radius:9px;background:#f2e7ed;overflow:hidden}
.stpr-prog__bar i{
	display:block;height:100%;border-radius:9px;
	background:linear-gradient(90deg,#e0617c,#5fc7a7);transition:width .32s ease}
.stpr-scene{
	margin:0 0 8px;font-size:12.5px;font-weight:900;color:#a8516b;letter-spacing:.04em}
.stpr-q{margin:0 0 22px;font-size:19px;line-height:1.65;color:#48232f}
.stpr-opts{display:flex;flex-direction:column;gap:11px}
.stpr-opt{
	display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;
	width:100%;min-height:58px;padding:15px 17px;border-radius:16px;cursor:pointer;
	background:#fff;border:1.5px solid #f0e0e5;color:#522f3b;
	font-family:inherit;font-size:14.5px;line-height:1.75;text-align:left;
	-webkit-tap-highlight-color:transparent;transition:border-color .16s,background .16s}
.stpr-opt span{
	display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
	background:#f7ecf2;font:900 12px Poppins,sans-serif;color:#a55277}
.stpr-opt b{font-weight:700}
.stpr-opt:hover,.stpr-opt:focus{border-color:#e0a8c0;background:#fdf7fa}
.stpr-opt.is-on{border-color:#d46283;background:#fbeef2}
.stpr-back{margin:18px 0 0;text-align:center}
.stpr-back button{
	border:0;background:none;cursor:pointer;font-family:inherit;
	font-size:12.5px;font-weight:800;color:#84626d;text-decoration:underline}

/* ---- 判定中 ---- */
.stpr-loading{padding:56px 20px;text-align:center}
.stpr-loading i{
	display:block;width:46px;height:46px;margin:0 auto 18px;border-radius:50%;
	border:3px solid #f0dce5;border-top-color:#d46283;animation:stprSpin .9s linear infinite}
@keyframes stprSpin{to{transform:rotate(360deg)}}
.stpr-loading p{margin:0 0 6px;font-size:15px;font-weight:900;color:#552a38}
.stpr-loading small{font-size:12px;color:#84626d}

/* ---- 結果 ---- */
.stpr-hero{
	position:relative;margin:0 0 18px;border-radius:22px;overflow:hidden;
	box-shadow:0 18px 44px rgba(107,63,160,.2)}
/* 愛着タイプ別の絵は 1200x630 の横長なので、height:auto だとスマホで低くなる。
   縦の高さを画面から決めて、切り抜いて大きく見せる。ここは第一印象なので大きく取る。 */
.stpr-hero__art{
	display:block;width:100%;height:auto;max-height:none;object-fit:cover;object-position:center}
@media (min-width:721px){.stpr-hero__art{max-height:640px;height:auto}}
.stpr-hero__in{
	position:absolute;left:0;right:0;bottom:0;padding:44px 20px 30px;text-align:center;
	background:linear-gradient(to top,rgba(38,22,52,.94) 34%,transparent)}
.stpr-hero__eyebrow{
	margin:0 0 6px;font:800 11px Poppins,sans-serif;letter-spacing:.16em;color:#f0b9ca}
.stpr-hero__name{
	margin:0 0 10px;font-size:clamp(22px,5.4vw,30px);line-height:1.3;color:#fff}
.stpr-hero__code{
	display:inline-block;margin:0 0 10px;padding:6px 16px;border-radius:99px;
	background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
	font:900 15px Poppins,sans-serif;letter-spacing:.14em;color:#fff}
.stpr-hero__att{margin:0;font-size:13.5px;color:#f2dce3}
.stpr-hero__att b{color:#ffc4cf;font-weight:900}

/* 64タイプの立ち絵。結果のヒーローのすぐ下に置く。
   丸く抜いて、愛着タイプの色の輪を回す——色でも型が伝わるようにしてある。 */
.stpr-tart{margin:0 0 16px;text-align:center}
.stpr-tart img{
	display:block;width:min(62%,260px);height:auto;margin:0 auto;
	border-radius:50%;background:#fff;
	border:5px solid #f5e3eb;
	box-shadow:0 12px 30px rgba(107,63,160,.16)}
.stpr-hero--s + .stpr-tart img{border-color:#ffd98a}
.stpr-hero--a + .stpr-tart img{border-color:#ff9fb8}
.stpr-hero--v + .stpr-tart img{border-color:#8fd4ef}
.stpr-hero--f + .stpr-tart img{border-color:#b9a8e8}
.stpr-tart figcaption{
	margin:9px 0 0;font-size:12px;font-weight:800;color:#84626d;letter-spacing:.02em}

.stpr-panel{
	margin:0 0 16px;padding:24px 20px;border-radius:20px;background:#fff;
	border:1px solid #f2e6ea;box-shadow:0 10px 28px rgba(83,59,91,.07)}
.stpr-panel h3{margin:0 0 14px;font-size:17.5px;line-height:1.55;color:#552a38}
.stpr-panel h4{margin:20px 0 5px;font-size:13px;color:#a8516b}
.stpr-panel p{margin:0;font-size:14px;line-height:2.05;color:#664751}

/* 読み解き。ここが競合に無いので、いちばん目立たせる */
.stpr-read{
	background:linear-gradient(168deg,#fdf4f7,#fbf0f4);
	border-color:#f0d3dd}
.stpr-read h3{color:#a53254}
/* 64タイプ固有の一文。ここだけ他の型と違うので、地の文と見分けがつくようにする */
.stpr-read__own{
	position:relative;padding:0 0 0 13px;
	font-size:14.5px;color:#5e3d48;font-weight:600}
.stpr-read__own::before{
	content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;
	border-radius:3px;background:linear-gradient(180deg,#e0617c,#5fc7a7)}

/* レーダーの中心に立ち絵を敷く。図の真ん中は元から空いている。
   線と数字の邪魔をしないよう、後ろに置いて薄くする。 */
.stpr-radarwrap{position:relative}
.stpr-radarwrap__art{
	position:absolute;left:50%;top:50%;width:74px;height:74px;
	transform:translate(-50%,-50%);
	border-radius:50%;opacity:.9;pointer-events:none;z-index:0;
	border:3px solid rgba(255,255,255,.9);background:#fff;
	box-shadow:0 4px 14px rgba(107,63,160,.16)}
.stpr-radarwrap .stpr-radar{position:relative;z-index:1}
/* 図形は絵の上に出す。線が絵に隠れると形が読めない。 */
.stpr-radarwrap .stpr-radar__me{opacity:.88}

.stpr-bars{list-style:none;margin:0;padding:0}
.stpr-bars li{
	display:grid;grid-template-columns:118px 1fr 30px;gap:9px;align-items:center;
	margin:9px 0;font-size:11.5px;color:#70515b}
.stpr-bars i{display:block;height:8px;border-radius:9px;background:#f2e7ed;overflow:hidden}
.stpr-bars b{display:block;height:100%;background:linear-gradient(90deg,#e0617c,#5fc7a7)}
.stpr-bars strong{text-align:right;font:900 12px Poppins,sans-serif;color:#a55277}
.stpr-note{margin:12px 0 0;font-size:12px;line-height:1.9;color:#84626d}

/* 相性のいいジャニヲタ仲間。他タイプの絵が3枚並ぶ、いちばん映える場所。 */
.stpr-mate__lead{margin:0 0 14px;font-size:13px;line-height:1.95;color:#70515b}
.stpr-mate__grid{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.stpr-mate__c{
	padding:12px 8px 13px;border-radius:14px;text-align:center;
	background:#fdf7fa;border:1px solid #f0e0e8}
.stpr-mate__c img{
	display:block;width:100%;max-width:78px;height:auto;margin:0 auto 8px;
	border-radius:50%;background:#fff;border:3px solid #f5e3eb}
.stpr-mate__c--s img{border-color:#ffd98a}
.stpr-mate__c--a img{border-color:#ff9fb8}
.stpr-mate__c--v img{border-color:#8fd4ef}
.stpr-mate__c--f img{border-color:#b9a8e8}
.stpr-mate__c b{
	display:block;font-size:11.5px;font-weight:900;line-height:1.5;color:#552a38}
.stpr-mate__c em{
	display:block;margin:3px 0 5px;font:900 10px Poppins,sans-serif;
	font-style:normal;letter-spacing:.06em;color:#9d5a7c}
.stpr-mate__c span{
	display:block;font-size:10.5px;line-height:1.7;color:#70515b}
@media (max-width:340px){
	.stpr-mate__grid{grid-template-columns:1fr}
	.stpr-mate__c img{max-width:96px}
}

/* 辞典への回遊 */
/* 実在の人を並べる直前の断り書き。目立たせすぎず、必ず読める濃さにする。 */
.stpr-idols__note{
	margin:0 0 12px;padding:9px 11px;border-radius:9px;background:#fbf5f7;
	font-size:11.5px;line-height:1.85;color:#84626d}
.stpr-idols__lead{margin:0 0 14px;font-size:13px;line-height:1.95;color:#7d5f69}
.stpr-idols__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stpr-idol{
	display:block;padding:14px 12px;border-radius:14px;text-decoration:none;
	background:#fdf7f9;border:1px solid #f4e3e9;text-align:center}
.stpr-idol__e{display:block;font-size:26px;margin:0 0 4px}
.stpr-idol b{display:block;font-size:14px;color:#552a38}
.stpr-idol small{display:block;font-size:10.5px;color:#84626d;margin:2px 0 4px}
.stpr-idol em{
	display:inline-block;font-style:normal;font-size:10.5px;font-weight:900;
	padding:3px 9px;border-radius:99px;background:#f4e6ef;color:#a55277}
.stpr-idols__more{margin:14px 0 0;text-align:center;font-size:12.5px}
.stpr-idols__more a{color:#5fa892;font-weight:800}

.stpr-next{
	background:linear-gradient(150deg,#3d1c27,#5e2f3f);border:0}
.stpr-next h3,.stpr-next p{color:#fae6ed}
.stpr-next__go{margin:18px 0 0;text-align:center}
.stpr-next__go a{
	display:inline-block;padding:16px 30px;border-radius:999px;
	background:#e8696d;color:#fff;font-size:15px;font-weight:900;text-decoration:none;
	box-shadow:0 10px 26px rgba(232,105,139,.36)}

.stpr-share__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
.stpr-share__btns a{
	display:inline-block;padding:13px 24px;border-radius:999px;
	font-size:13.5px;font-weight:900;text-decoration:none}
.stpr-share__x{background:#111;color:#fff}
.stpr-share__line{background:#06C755;color:#fff}
.stpr-restart{margin:22px 0 0;text-align:center}
.stpr-restart button{
	border:0;background:none;cursor:pointer;font-family:inherit;
	font-size:13px;font-weight:800;color:#84626d;text-decoration:underline}

/* ---- 説明 ---- */
.stpr-about{margin:34px 0 0;padding:26px 20px;border-radius:20px;background:#fdf7f9}
.stpr-about h2{margin:0 0 14px;font-size:18px;color:#552a38}
.stpr-about p{margin:0 0 14px;font-size:13.5px;line-height:2.05;color:#664751}
.stpr-about strong{color:#a53254}
.stpr-about__list{margin:0 0 14px;padding:0 0 0 1.1em;font-size:13px;line-height:2;color:#664751}
.stpr-about__list b{color:#5fa892}
.stpr-about__go{margin:0;text-align:center}
.stpr-about__go a{font-size:13.5px;font-weight:900;color:#4c9680}

/* 本文の末尾に置く関連ページ。リンクだけ並べても読まれないので、
   何が分かるかを一行ずつ添えてある。 */
.stpr-rel{list-style:none;margin:14px 0 0;padding:0}
.stpr-rel li{
	margin:0 0 10px;padding:12px 14px;
	background:#fdf7fa;border:1px solid #f0e0e8;border-radius:12px}
.stpr-rel a{
	display:block;font-size:14.5px;font-weight:800;color:#8a2f56;
	text-decoration:underline;text-underline-offset:3px}
.stpr-rel span{display:block;margin:4px 0 0;font-size:13px;line-height:1.85;color:#70515b}

@media (max-width:360px){
	.stpr-q{font-size:17.5px}
	.stpr-opt{font-size:13.5px;padding:13px 14px}
	.stpr-idols__grid{grid-template-columns:1fr}
	.stpr-bars li{grid-template-columns:96px 1fr 28px}
}
@media (prefers-reduced-motion:reduce){
	.stpr-loading i{animation:none}
}

/* 軸バッジ。競合の「🏢現場派」に相当。一目で分かるので上に置く。 */
.stpr-badges{
	display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 16px}
.stpr-badges span{
	padding:8px 15px;border-radius:99px;background:#fbeef2;border:1px solid #f0d3dd;
	font-size:12.5px;font-weight:900;color:#a55277}

/* レア度。自分が珍しいと嬉しい——向こうが効かせている見せ方。 */
.stpr-rare{
	margin:0 0 16px;padding:20px;border-radius:18px;text-align:center;
	background:linear-gradient(150deg,#fff6f9,#fdf0f4);border:1px solid #f0d3dd}
.stpr-rare__t{margin:0 0 4px;font-size:15px;font-weight:900;color:#a53254}
.stpr-rare__n{margin:0 0 10px;font-size:13px;color:#7d5f69}
.stpr-rare__n b{font:900 20px Poppins,sans-serif;color:#d46283}
.stpr-rare__bar{height:8px;border-radius:9px;background:#f4e6ed;overflow:hidden}
.stpr-rare__bar i{
	display:block;height:100%;border-radius:9px;
	background:linear-gradient(90deg,#e0617c,#5fc7a7)}

/* 相性 */
.stpr-match__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.stpr-match__c{
	padding:15px 12px;border-radius:14px;text-align:center;
	background:#fdf7f9;border:1px solid #f4e3e9}
.stpr-match__c b{display:block;font-size:14px;color:#5fa892;margin:0 0 4px}
.stpr-match__c span{font-size:11.5px;line-height:1.7;color:#7d5f69}
@media (max-width:360px){
	.stpr-match__grid{grid-template-columns:1fr}
	.stpr-badges span{font-size:11.5px;padding:7px 12px}
}

/* 愛着バッジの絵。結果の主役は愛着なので、そこに絵を当てる。 */
.stpr-read{position:relative}
.stpr-read__art{
	display:block;width:118px;height:118px;margin:0 auto 12px;border-radius:50%;
	object-fit:cover;box-shadow:0 8px 22px rgba(160,80,140,.22);
	border:3px solid #fff}

/* 軸ごとの短評。バーの数字だけでは何も残らないので言葉で置く。 */
.stpr-traits__list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.stpr-traits__list li{
	padding:15px 16px;border-radius:15px;
	background:linear-gradient(140deg,#fffafc,#fdf4f7);border:1px solid #f2e2e7}
.stpr-traits__list b{
	display:block;margin:0 0 6px;font-size:14.5px;font-weight:900;color:#a53254}
.stpr-traits__list span{display:block;font-size:12.5px;line-height:1.95;color:#684c55}

/* 愛着×発信の深いところ。刺さるので、見た目も少し重くする。 */
.stpr-deep{
	background:linear-gradient(160deg,#391f28,#45242f);border:0;color:#f5e6eb}
.stpr-deep h3{color:#f3d9e6}
.stpr-deep h4{
	margin:16px 0 6px;font-size:13.5px;font-weight:900;color:#e5a9c2;
	padding-left:11px;border-left:3px solid #b46488}
.stpr-deep p{font-size:12.5px;line-height:2.0;color:#e8d2d9}

/* 設問画面の背景。ここが一番長く見られる画面なので、無地にしない。
   文字が読めなくならないよう、上から白いベールを重ねる。 */
.stpr-stage.has-bg{position:relative;isolation:isolate}
.stpr-stage.has-bg::before{
	content:"";position:absolute;inset:-14px -14px auto;height:210px;z-index:-1;
	background:var(--stpr-qbg) center/cover no-repeat;
	border-radius:0 0 26px 26px;opacity:.5;
	-webkit-mask-image:linear-gradient(#000 34%,transparent);
	mask-image:linear-gradient(#000 34%,transparent)}

/* 結果が出た瞬間の演出。ジャニオタ向けなので、ここは派手にする。 */
.stpr-pen{
	position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.stpr-pen i{
	position:absolute;bottom:-40px;width:8px;height:34px;border-radius:6px;
	opacity:0;filter:blur(.4px);
	box-shadow:0 0 14px currentColor;
	animation:stprPen linear forwards}
@keyframes stprPen{
	0%{transform:translateY(0) rotate(0);opacity:0}
	14%{opacity:1}
	100%{transform:translateY(-108vh) rotate(26deg);opacity:0}}

/* タイプ名の出方。ぬるっと出るより、少し遅れて決まるほうが記憶に残る。 */
.stpr-hero__name{animation:stprPop .62s cubic-bezier(.2,1.3,.4,1) both}
.stpr-hero__code{animation:stprPop .62s .16s cubic-bezier(.2,1.3,.4,1) both}
.stpr-hero__att{animation:stprFade .5s .38s both}
@keyframes stprPop{
	from{opacity:0;transform:translateY(14px) scale(.9)}
	to{opacity:1;transform:none}}
@keyframes stprFade{from{opacity:0}to{opacity:1}}

/* 能力値バーは0から伸ばす。数字が動くところで目が止まる。 */
.stpr-bars b{transition:width 1.1s cubic-bezier(.25,.9,.3,1)}

@media (prefers-reduced-motion:reduce){
	.stpr-hero__name,.stpr-hero__code,.stpr-hero__att{animation:none}
	.stpr-bars b{transition:none}
	.stpr-pen{display:none}}

/* 検索から来た人向けの下部。ここが静的HTMLなので、クロールに乗るのはこちら。
   スマホでページ全体が9,000px以上あり、その大半がこの下部。
   画面に入るまで描画を後回しにする——初期表示でここまで組む必要はない。
   contain-intrinsic-size を必ず添える。省くと、まだ組んでいない高さを0と見なして
   スクロールバーが伸び縮みする。数値は実測（約7,600px）に近い概算。
   検索エンジンからは通常どおり読める（display:none とは別物）。 */
.stpr-about{
	content-visibility:auto;
	contain-intrinsic-size:auto 7600px}

.stpr-about h3{
	margin:22px 0 8px;font-size:15px;font-weight:900;color:#a53254;
	padding-left:11px;border-left:4px solid #e8a3b9}
.stpr-all{
	list-style:none;margin:0 0 6px;padding:0;
	display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stpr-all li{
	padding:9px 11px;border-radius:11px;background:#fdf7f9;border:1px solid #f4e4e9;
	font-size:11.5px;line-height:1.6;color:#684c55}
.stpr-all b{
	display:block;font:900 11px/1.4 Poppins,sans-serif;color:#9d5a7c;letter-spacing:.06em}
/* 開くと、その型の書き下ろしが出る。閉じているあいだも中身はクロールされる。 */
.stpr-all details{margin:0}
.stpr-all summary{
	cursor:pointer;list-style:none;
	-webkit-tap-highlight-color:transparent}
.stpr-all summary::-webkit-details-marker{display:none}
.stpr-all summary::after{
	content:"＋";float:right;margin-left:6px;
	font:900 12px/1.4 Poppins,sans-serif;color:#c58aa5}
.stpr-all details[open] summary::after{content:"−"}
.stpr-all__art{
	display:block;width:96px;height:96px;margin:10px auto 2px;
	border-radius:50%;background:#fff;border:3px solid #f0e0e8}
.stpr-all__catch{
	margin:9px 0 5px;font-size:12.5px;font-weight:800;line-height:1.75;color:#a53254}
.stpr-all__body{
	margin:0;font-size:12.5px;line-height:2.0;color:#664751}
/* 開いたら全幅にする。2カラムのままだと1行8文字ほどになって読みづらい */
.stpr-all li:has(details[open]){
	grid-column:1 / -1;background:#fdf4f7;border-color:#eccbd8}
.stpr-faq{margin:0 0 10px}
.stpr-faq dt{
	margin:16px 0 6px;font-size:14px;font-weight:900;color:#583a44;
	padding-left:22px;position:relative}
.stpr-faq dt::before{
	content:Q;position:absolute;left:0;top:0;
	font:900 13px Poppins,sans-serif;color:#d46283}
.stpr-faq dd{margin:0;font-size:12.5px;line-height:2.0;color:#684c55}
.stpr-about__note{margin:10px 0 0;font-size:11px;line-height:1.8;color:#84626d}
@media (max-width:360px){.stpr-all{grid-template-columns:1fr}}

/* レーダー。他の診断は全部持っているので、ここだけ無いのは手抜きに見える。
   形は chiikawa-shindan の cq-radar に合わせる。 */
.stpr-radar{display:block;width:100%;max-width:470px;margin:0 auto 14px;overflow:visible}
.stpr-radar__grid polygon,.stpr-radar__grid line{fill:none;stroke:#f0dfe5;stroke-width:1.2}
.stpr-radar__me{fill:rgba(212,98,158,.22);stroke:#d46283;stroke-width:3}
.stpr-radar__labels text{font-size:14px;fill:#745c64;font-weight:800}
@media (max-width:360px){.stpr-radar__labels text{font-size:13px}}

/* 結果カード。保存してストーリーズに貼れるように縦長で作る。
   画像そのものが広告になるので、画面でも実物を見せる。 */
.stpr-card{margin:0 0 12px;border-radius:16px;overflow:hidden;background:#351a23}
.stpr-card canvas{display:block;width:100%;height:auto}
.stpr-card__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 14px}
.stpr-card__btns button{
	padding:11px 20px;border-radius:999px;border:1.5px solid #e6c9d6;background:#fff;
	font-family:inherit;font-size:12.5px;font-weight:900;color:#a53254;cursor:pointer}
.stpr-card__btns button:hover{background:#fdf3f7}

/* シェアされたリンクで来た人への一言。行き止まりにしない。 */
.stpr-sharednote{
	margin:0 0 14px;padding:13px 15px;border-radius:14px;text-align:center;
	background:#fbf1f6;border:1px solid #f0d3dd;font-size:12.5px;line-height:1.85;color:#7d5f69}
.stpr-sharednote a{display:block;margin-top:5px;font-weight:900;color:#c44670}

/* コラム導線。推しの話から、あなた自身の話へ渡す段。 */
.stpr-col{background:linear-gradient(150deg,#fff8fa,#fdf0f4)}
.stpr-col__bridge{font-size:12.5px;line-height:2.0;color:#684c55;margin:0 0 14px}
.stpr-col__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.stpr-col__list a{
	display:block;padding:14px 15px;border-radius:14px;text-decoration:none;
	background:#fff;border:1px solid #f0dfe5}
.stpr-col__list b{display:block;font-size:14px;font-weight:900;color:#a53254;line-height:1.5}
.stpr-col__list span{display:block;margin-top:4px;font-size:11.5px;line-height:1.7;color:#7d5f69}

/* 本体診断への導線。絵が無いと素通りされる。 */
.stpr-next__art{
	display:block;width:100%;height:auto;border-radius:14px;margin:0 0 14px}

/* 相性がぴったりなアイドル。ここがいちばん貼られる部分になるので大きく出す。 */
.stpr-fit{background:linear-gradient(155deg,#fff4f7,#fceef3);border:1px solid #f0d3dd}
.stpr-fit__pct{
	display:flex;align-items:center;justify-content:center;gap:4px;margin:0 0 14px;line-height:1}
.stpr-fit__pct span{font-size:30px;color:#e0617c}
.stpr-fit__pct b{font:900 58px Poppins,sans-serif;color:#d46283;letter-spacing:-.04em}
.stpr-fit__pct i{font:900 22px Poppins,sans-serif;font-style:normal;color:#d46283}
.stpr-fit__who{
	display:block;padding:18px 14px;border-radius:16px;text-align:center;text-decoration:none;
	background:#fff;border:1px solid #f0dce3;margin:0 0 12px}
.stpr-fit__e{display:block;font-size:34px;line-height:1.2}
.stpr-fit__who b{display:block;margin:6px 0 2px;font-size:19px;font-weight:900;color:#403035}
.stpr-fit__who small{display:block;font-size:11.5px;color:#84626d}
.stpr-fit__who em{
	display:inline-block;margin-top:8px;padding:5px 12px;border-radius:99px;
	font-style:normal;font-size:11px;font-weight:900;color:#a55277;background:#fbeef2}
.stpr-fit__why{font-size:13px;line-height:2.0;color:#684c55;margin:0 0 10px}
.stpr-fit__why b{color:#a53254}

/* スクロールで下から出す。スクロールするたび次が現れるほうが最後まで読まれる。 */
.stpr-rev{opacity:0;transform:translateY(26px);transition:opacity .62s cubic-bezier(.2,.8,.3,1),transform .62s cubic-bezier(.2,.8,.3,1)}
.stpr-rev.is-in{opacity:1;transform:none}

/* 愛着タイプごとに結果ヒーローの色を変える。絵だけでなく光の色も変えると差が出る。 */
.stpr-hero--s .stpr-hero__in{background:linear-gradient(to top,rgba(38,24,20,.86),rgba(38,24,20,.10) 62%,transparent)}
.stpr-hero--a .stpr-hero__in{background:linear-gradient(to top,rgba(52,10,38,.88),rgba(52,10,38,.12) 62%,transparent)}
.stpr-hero--v .stpr-hero__in{background:linear-gradient(to top,rgba(12,16,44,.90),rgba(12,16,44,.14) 62%,transparent)}
.stpr-hero--f .stpr-hero__in{background:linear-gradient(to top,rgba(30,12,40,.88),rgba(30,12,40,.12) 62%,transparent)}

/* 相性の数字。数え上がる先が大きいほど気持ちがいい。 */
.stpr-fit__pct b{min-width:2.2em;display:inline-block;text-align:right}

/* ここから演出。ジャニオタ向けなので、ここは思い切り派手にする。 */

/* ヒーローを光が横切る。結果が出た瞬間に一度だけ走らせる。 */
.stpr-hero::after{
	content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
	background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
	transform:translateX(-120%);animation:stprShine 1.5s .35s cubic-bezier(.3,.7,.4,1) 1}
@keyframes stprShine{to{transform:translateX(120%)}}

/* タイプ名は大きく、光らせて出す。 */
.stpr-hero__name{
	font-size:clamp(30px,8.4vw,44px)!important;line-height:1.25;
	text-shadow:0 2px 18px rgba(255,140,205,.55),0 1px 3px rgba(0,0,0,.5)}
.stpr-hero__code{letter-spacing:.14em}

/* レア度がキラッと脈打つ。ここが自慢したくなる部分なので目を止める。 */
.stpr-rare{position:relative;overflow:hidden}
.stpr-rare__t{animation:stprPulse 2.4s ease-in-out infinite}
@keyframes stprPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.stpr-rare::after{
	content:"";position:absolute;top:-60%;left:-40%;width:38%;height:220%;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
	transform:rotate(18deg);animation:stprSweep 3.6s 1s ease-in-out infinite}
@keyframes stprSweep{0%{left:-40%}55%,100%{left:130%}}

/* 相性の数字。数え上がったあとに一度だけ弾む。 */
.stpr-fit__pct b{animation:stprBeat 1.7s .9s cubic-bezier(.2,1.4,.4,1) 1}
@keyframes stprBeat{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.stpr-fit__pct span{animation:stprHeart 1.25s ease-in-out infinite}
@keyframes stprHeart{0%,100%{transform:scale(1)}22%{transform:scale(1.3)}44%{transform:scale(1)}66%{transform:scale(1.18)}}

/* バッジは一つずつ遅れて出る。 */
.stpr-badges span{animation:stprChip .5s cubic-bezier(.2,1.3,.4,1) both}
.stpr-badges span:nth-child(1){animation-delay:.30s}
.stpr-badges span:nth-child(2){animation-delay:.40s}
.stpr-badges span:nth-child(3){animation-delay:.50s}
.stpr-badges span:nth-child(4){animation-delay:.60s}
.stpr-badges span:nth-child(5){animation-delay:.70s}
@keyframes stprChip{from{opacity:0;transform:translateY(10px) scale(.86)}to{opacity:1;transform:none}}

/* レーダーは中心から広がる。 */
.stpr-radar__me{
	transform-origin:center;transform-box:fill-box;
	animation:stprRadar 1.1s .25s cubic-bezier(.2,.9,.3,1) both}
@keyframes stprRadar{from{transform:scale(.05);opacity:0}to{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
	.stpr-hero::after,.stpr-rare::after{display:none}
	.stpr-rare__t,.stpr-fit__pct b,.stpr-fit__pct span,.stpr-badges span,.stpr-radar__me{animation:none}}

/* 判定中の画面。18問答えた直後がいちばん期待の高い瞬間なので、絵を置いて持たせる。 */
.stpr-loading{position:relative}
.stpr-loading__art{
	display:block;width:min(78%,300px);margin:0 auto 18px;border-radius:50%;
	box-shadow:0 14px 40px rgba(60,30,80,.32);
	animation:stprWait 2.8s ease-in-out infinite}
@keyframes stprWait{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.04);opacity:1}}

/* 設問の場面絵。18問ずっと同じ背景だと途中で飽きる。 */
.stpr-qart{
	display:block;width:100%;height:132px;object-fit:cover;
	border-radius:16px;margin:0 0 16px;opacity:0;
	transition:opacity .5s}
.stpr-qart.is-in{opacity:1}
@media (max-width:360px){.stpr-qart{height:112px}}

@media (prefers-reduced-motion:reduce){
	.stpr-loading__art{animation:none}
	.stpr-qart{transition:none}}

/* 沼りやすいグループ。辞典の実データから出しているので、根拠も添える。 */
.stpr-gp__lead{font-size:12.5px;line-height:1.95;color:#684c55;margin:0 0 14px}
.stpr-gp__list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:9px;counter-reset:gp}
.stpr-gp__list li{
	position:relative;padding:14px 15px 14px 52px;border-radius:14px;
	background:#fff;border:1px solid #f0dfe5}
.stpr-gp__rank{
	position:absolute;left:13px;top:50%;transform:translateY(-50%);
	width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
	font:900 14px Poppins,sans-serif;color:#fff;
	background:linear-gradient(135deg,#e0617c,#5fc7a7)}
.stpr-gp__list b{display:block;font-size:15px;font-weight:900;color:#403035;line-height:1.4}
.stpr-gp__list em{
	display:block;margin-top:3px;font-style:normal;font-size:11.5px;color:#a55277;font-weight:800}
.stpr-gp__list small{display:block;margin-top:4px;font-size:11px;color:#84626d}

/* 推される側の視点。ここで一度、話の向きが変わる。 */
.stpr-side{background:linear-gradient(150deg,#fdf0f4,#fff6f9)}
.stpr-side__name{
	margin:0 0 10px;font-size:19px;font-weight:900;line-height:1.5;color:#a53254;text-align:center}
.stpr-side__body{font-size:13px;line-height:2.05;color:#684c55;margin:0 0 10px}

/* 同担拒否の順位。数字だけより順位のほうが人に言いたくなる。 */
.stpr-rank{
	margin:12px 0 0;padding:12px 14px;border-radius:13px;text-align:center;
	background:linear-gradient(135deg,#fdf1f5,#fceef3);border:1px solid #f0d9e5;
	font-size:13px;line-height:1.7;color:#684c55}
.stpr-rank b{color:#c44670;font-size:15px}
.stpr-rank span{display:block;margin-top:2px;font-size:11px;color:#84626d}

/* 結果を保存させる段。閉じたらこの結果は戻らないので、いちばん上に置く。 */
.stpr-save{
	margin:0 0 14px;padding:20px 18px;border-radius:18px;text-align:center;
	background:linear-gradient(150deg,#f0fbf4,#eefaf3);border:1.5px solid #bfe8d0}
.stpr-save__t{margin:0 0 7px;font-size:15.5px;font-weight:900;color:#127a4a;line-height:1.5}
.stpr-save__b{margin:0 0 14px;font-size:12px;line-height:1.9;color:#4a6357}
.stpr-save__btn{
	display:block;padding:15px 20px;border-radius:999px;text-decoration:none;
	background:#06C755;color:#fff;font-size:15px;font-weight:900;
	box-shadow:0 6px 18px rgba(6,199,85,.32)}
.stpr-save__sub{
	display:inline-block;margin-top:10px;font-size:11.5px;font-weight:800;
	color:#127a4a;text-decoration:underline}

/* 上部のシェア。読み終わる前に離脱する人のために置く。下にも詳しい版がある。 */
.stpr-topshare{display:flex;gap:9px;margin:0 0 12px}
.stpr-topshare a{
	flex:1;display:block;padding:13px 10px;border-radius:999px;text-align:center;
	text-decoration:none;font-size:13px;font-weight:900;color:#fff}
.stpr-topshare__x{background:#111}
.stpr-topshare__line{background:#06C755}

/* 本体の64タイプ診断へ。サイト共通のバナーと同じ作りにする。
   絵が無いと素通りされるので、上部でも画像つきで出す。 */
.stpr-topnext{
	display:block;margin:0 0 18px;border-radius:20px;overflow:hidden;text-decoration:none;
	background:linear-gradient(160deg,#451f2c,#682f42);
	box-shadow:0 12px 30px rgba(60,35,100,.3)}
.stpr-topnext__img{display:block;width:100%;height:auto}
.stpr-topnext__body{display:block;padding:20px 18px 22px;text-align:center}
.stpr-topnext__label{
	display:block;margin:0 0 8px;font:900 10px Poppins,sans-serif;letter-spacing:.16em;
	color:rgba(255,255,255,.6)}
.stpr-topnext b{display:block;font-size:18px;font-weight:900;color:#fff;line-height:1.55}
.stpr-topnext__lead{
	display:block;margin:10px 0 16px;font-size:12px;line-height:1.95;color:rgba(255,255,255,.8)}
.stpr-topnext__btn{
	display:block;padding:15px 18px;border-radius:999px;
	background:linear-gradient(135deg,#e0617c,#5fc7a7);
	color:#fff;font-size:14.5px;font-weight:900;
	box-shadow:0 8px 20px rgba(200,90,150,.34)}

/* すとぷり6人の一覧。
   愛着タイプによっては「同じ型の配信者」が0人になる（推定上、恐れ回避型がいない）。
   どの結果で終わっても6人が見られるよう、ここは常に出す。
   自分と同じ型の人だけ、枠と背景で浮かせる。 */
.stpr-mem__lead{
	margin:0 0 14px;font-size:13px;line-height:1.85;color:#84626d;text-align:center}
.stpr-mem__lead b{color:#c0295a}
.stpr-mem__grid{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stpr-mem__c a{
	display:block;height:100%;padding:14px 12px;border-radius:14px;
	text-decoration:none;text-align:center;
	background:#fffafc;border:1px solid #f4e3e9;
	transition:transform .18s ease,box-shadow .18s ease}
.stpr-mem__c a:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(85,42,56,.10)}
.stpr-mem__e{display:block;font-size:26px;margin:0 0 4px}
.stpr-mem__c b{display:block;font-size:14.5px;color:#552a38}
.stpr-mem__c em{
	display:inline-block;font-style:normal;font-size:10.5px;font-weight:900;
	margin:4px 0 6px;padding:3px 9px;border-radius:99px;
	background:#f4e6ef;color:#a55277}
.stpr-mem__c span{
	display:block;font-size:11.5px;line-height:1.75;color:#84626d}
/* 愛着タイプの色。カード画像・レーダーの輪と同じ4色にそろえる。 */
.stpr-mem__c--s a{border-color:#ffd98a}
.stpr-mem__c--a a{border-color:#ff9fb8}
.stpr-mem__c--v a{border-color:#8fd4ef}
.stpr-mem__c--f a{border-color:#b9a8e8}
.stpr-mem__c.is-same a{
	background:#fff2f5;border-width:2px;box-shadow:0 4px 14px rgba(192,41,90,.10)}
.stpr-mem__badge{
	display:block;font-style:normal;font-size:10px;font-weight:900;
	color:#c0295a;margin:0 0 5px}
@media (max-width:559px){
	.stpr-mem__grid{grid-template-columns:1fr}
}