/* 推し活64タイプ診断（2026-08-16）
 *
 * 競合はペンライトのピンクだけで組んでいる。
 * こちらはサイト本体の紫を残したまま、推し活側のピンクを足す。
 * 本体（64タイプ診断）へ渡す導線があるので、色が地続きでないと別サイトに見える。
 */

.oshi{padding:0 0 60px}

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

@media (min-width:860px){
	.oshi-top__grid{
		display:grid;grid-template-columns:1fr 0.82fr;gap:34px;align-items:center;
		margin:0 0 6px}
	.oshi-top__head{text-align:left}
	.oshi-top__eyebrow,.oshi-top__h1,.oshi-top__sub{text-align:left}
	.oshi-top__facts{justify-content:flex-start}
	.oshi-top__btnwrap{text-align:left}
	.oshi-top__note{text-align:left}
	.oshi-top__visual{margin:0}
	.oshi-top__visual .oshi-top__art{max-height:none;object-fit:contain}
	.oshi-top__lead{max-width:none}
}
.oshi-top__eyebrow{
	margin:0 0 8px;text-align:center;
	font:800 11px Poppins,sans-serif;letter-spacing:.18em;color:#a8517f}
.oshi-top__h1{
	margin:0 0 8px;text-align:center;font-size:clamp(26px,6.4vw,38px);
	line-height:1.25;color:#3a2a55}
.oshi-top__sub{
	margin:0 0 18px;text-align:center;font-size:15px;font-weight:800;color:#8b5fa8}
.oshi-top__lead{
	margin:0 0 18px;font-size:14px;line-height:2.05;color:#544766}
.oshi-top__lead strong{color:#b8477f;font-weight:900}
.oshi-top__facts{
	display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
	margin:0 0 22px;padding:0;list-style:none}
.oshi-top__facts li{
	padding:7px 13px;border-radius:99px;background:#fbeef5;
	border:1px solid #f0d3e4;font-size:12px;font-weight:800;color:#a5528a}
.oshi-top__btnwrap{margin:0 0 14px;text-align:center}
.oshi-top__btn{
	display:inline-block;min-height:56px;padding:17px 44px;border:0;border-radius:999px;
	cursor:pointer;background:linear-gradient(135deg,#e0619a,#9b5fc7);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}
.oshi-top__note{margin:0;text-align:center;font-size:11px;line-height:1.8;color:#6f6680}

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

/* ---- 設問 ---- */
.oshi-prog{margin:0 0 20px}
.oshi-prog__t{
	margin:0 0 7px;font:900 12px Poppins,sans-serif;color:#a5528a;text-align:center}
.oshi-prog__bar{height:7px;border-radius:9px;background:#f2e7f0;overflow:hidden}
.oshi-prog__bar i{
	display:block;height:100%;border-radius:9px;
	background:linear-gradient(90deg,#e0619a,#9b5fc7);transition:width .32s ease}
.oshi-scene{
	margin:0 0 8px;font-size:12.5px;font-weight:900;color:#a8517f;letter-spacing:.04em}
.oshi-q{margin:0 0 22px;font-size:19px;line-height:1.65;color:#2f2348}
.oshi-opts{display:flex;flex-direction:column;gap:11px}
.oshi-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 #ece0f0;color:#3a2f52;
	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}
.oshi-opt span{
	display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
	background:#f7ecf5;font:900 12px Poppins,sans-serif;color:#a5528a}
.oshi-opt b{font-weight:700}
.oshi-opt:hover,.oshi-opt:focus{border-color:#e0a8cd;background:#fdf7fb}
.oshi-opt.is-on{border-color:#d4629e;background:#fbeef5}
.oshi-back{margin:18px 0 0;text-align:center}
.oshi-back button{
	border:0;background:none;cursor:pointer;font-family:inherit;
	font-size:12.5px;font-weight:800;color:#6c6284;text-decoration:underline}

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

/* ---- 結果 ---- */
.oshi-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 だとスマホで低くなる。
   縦の高さを画面から決めて、切り抜いて大きく見せる。ここは第一印象なので大きく取る。 */
.oshi-hero__art{
	display:block;width:100%;height:auto;max-height:none;object-fit:cover;object-position:center}
@media (min-width:721px){.oshi-hero__art{max-height:640px;height:auto}}
.oshi-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)}
.oshi-hero__eyebrow{
	margin:0 0 6px;font:800 11px Poppins,sans-serif;letter-spacing:.16em;color:#f0b9d7}
.oshi-hero__name{
	margin:0 0 10px;font-size:clamp(22px,5.4vw,30px);line-height:1.3;color:#fff}
.oshi-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}
.oshi-hero__att{margin:0;font-size:13.5px;color:#e8dcf2}
.oshi-hero__att b{color:#ffc4dd;font-weight:900}

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

.oshi-panel{
	margin:0 0 16px;padding:24px 20px;border-radius:20px;background:#fff;
	border:1px solid #f0e6f2;box-shadow:0 10px 28px rgba(83,59,91,.07)}
.oshi-panel h3{margin:0 0 14px;font-size:17.5px;line-height:1.55;color:#3a2a55}
.oshi-panel h4{margin:20px 0 5px;font-size:13px;color:#a8517f}
.oshi-panel p{margin:0;font-size:14px;line-height:2.05;color:#544766}

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

/* レーダーの中心に立ち絵を敷く。図の真ん中は元から空いている。
   線と数字の邪魔をしないよう、後ろに置いて薄くする。 */
.oshi-radarwrap{position:relative}
.oshi-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)}
.oshi-radarwrap .oshi-radar{position:relative;z-index:1}
/* 図形は絵の上に出す。線が絵に隠れると形が読めない。 */
.oshi-radarwrap .oshi-radar__me{opacity:.88}

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

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

/* 辞典への回遊 */
/* 実在の人を並べる直前の断り書き。目立たせすぎず、必ず読める濃さにする。 */
.oshi-idols__note{
	margin:0 0 12px;padding:9px 11px;border-radius:9px;background:#faf5fb;
	font-size:11.5px;line-height:1.85;color:#6c6284}
.oshi-idols__lead{margin:0 0 14px;font-size:13px;line-height:1.95;color:#6b5f7d}
.oshi-idols__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.oshi-idol{
	display:block;padding:14px 12px;border-radius:14px;text-decoration:none;
	background:#fbf7fd;border:1px solid #efe3f4;text-align:center}
.oshi-idol__e{display:block;font-size:26px;margin:0 0 4px}
.oshi-idol b{display:block;font-size:14px;color:#3a2a55}
.oshi-idol small{display:block;font-size:10.5px;color:#6c6284;margin:2px 0 4px}
.oshi-idol em{
	display:inline-block;font-style:normal;font-size:10.5px;font-weight:900;
	padding:3px 9px;border-radius:99px;background:#f4e6f2;color:#a5528a}
.oshi-idols__more{margin:14px 0 0;text-align:center;font-size:12.5px}
.oshi-idols__more a{color:#8b5fa8;font-weight:800}

.oshi-next{
	background:linear-gradient(150deg,#2a1c3d,#4a2f5e);border:0}
.oshi-next h3,.oshi-next p{color:#efe6fa}
.oshi-next__go{margin:18px 0 0;text-align:center}
.oshi-next__go a{
	display:inline-block;padding:16px 30px;border-radius:999px;
	background:#E8698B;color:#fff;font-size:15px;font-weight:900;text-decoration:none;
	box-shadow:0 10px 26px rgba(232,105,139,.36)}

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

/* ---- 説明 ---- */
.oshi-about{margin:34px 0 0;padding:26px 20px;border-radius:20px;background:#faf7fd}
.oshi-about h2{margin:0 0 14px;font-size:18px;color:#3a2a55}
.oshi-about p{margin:0 0 14px;font-size:13.5px;line-height:2.05;color:#544766}
.oshi-about strong{color:#a5326f}
.oshi-about__list{margin:0 0 14px;padding:0 0 0 1.1em;font-size:13px;line-height:2;color:#544766}
.oshi-about__list b{color:#8b5fa8}
.oshi-about__go{margin:0;text-align:center}
.oshi-about__go a{font-size:13.5px;font-weight:900;color:#7a4c96}

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

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

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

/* レア度。自分が珍しいと嬉しい——向こうが効かせている見せ方。 */
.oshi-rare{
	margin:0 0 16px;padding:20px;border-radius:18px;text-align:center;
	background:linear-gradient(150deg,#fff6fb,#f6f0fd);border:1px solid #f0d3e4}
.oshi-rare__t{margin:0 0 4px;font-size:15px;font-weight:900;color:#a5326f}
.oshi-rare__n{margin:0 0 10px;font-size:13px;color:#6b5f7d}
.oshi-rare__n b{font:900 20px Poppins,sans-serif;color:#d4629e}
.oshi-rare__bar{height:8px;border-radius:9px;background:#f4e6f0;overflow:hidden}
.oshi-rare__bar i{
	display:block;height:100%;border-radius:9px;
	background:linear-gradient(90deg,#e0619a,#9b5fc7)}

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

/* 愛着バッジの絵。結果の主役は愛着なので、そこに絵を当てる。 */
.oshi-read{position:relative}
.oshi-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}

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

/* 愛着×発信の深いところ。刺さるので、見た目も少し重くする。 */
.oshi-deep{
	background:linear-gradient(160deg,#2b1f39,#3d2445);border:0;color:#efe6f5}
.oshi-deep h3{color:#f3d9ec}
.oshi-deep h4{
	margin:16px 0 6px;font-size:13.5px;font-weight:900;color:#e5a9d0;
	padding-left:11px;border-left:3px solid #b4649b}
.oshi-deep p{font-size:12.5px;line-height:2.0;color:#ded2e8}

/* 設問画面の背景。ここが一番長く見られる画面なので、無地にしない。
   文字が読めなくならないよう、上から白いベールを重ねる。 */
.oshi-stage.has-bg{position:relative;isolation:isolate}
.oshi-stage.has-bg::before{
	content:"";position:absolute;inset:-14px -14px auto;height:210px;z-index:-1;
	background:var(--oshi-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)}

/* 結果が出た瞬間の演出。ジャニオタ向けなので、ここは派手にする。 */
.oshi-pen{
	position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.oshi-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:oshiPen linear forwards}
@keyframes oshiPen{
	0%{transform:translateY(0) rotate(0);opacity:0}
	14%{opacity:1}
	100%{transform:translateY(-108vh) rotate(26deg);opacity:0}}

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

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

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

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

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

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

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

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

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

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

/* 相性がぴったりなアイドル。ここがいちばん貼られる部分になるので大きく出す。 */
.oshi-fit{background:linear-gradient(155deg,#fff4fa,#f6eefc);border:1px solid #f0d3e4}
.oshi-fit__pct{
	display:flex;align-items:center;justify-content:center;gap:4px;margin:0 0 14px;line-height:1}
.oshi-fit__pct span{font-size:30px;color:#e0619a}
.oshi-fit__pct b{font:900 58px Poppins,sans-serif;color:#d4629e;letter-spacing:-.04em}
.oshi-fit__pct i{font:900 22px Poppins,sans-serif;font-style:normal;color:#d4629e}
.oshi-fit__who{
	display:block;padding:18px 14px;border-radius:16px;text-align:center;text-decoration:none;
	background:#fff;border:1px solid #f0dcf0;margin:0 0 12px}
.oshi-fit__e{display:block;font-size:34px;line-height:1.2}
.oshi-fit__who b{display:block;margin:6px 0 2px;font-size:19px;font-weight:900;color:#3a3040}
.oshi-fit__who small{display:block;font-size:11.5px;color:#6c6284}
.oshi-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:#a5528a;background:#fbeef5}
.oshi-fit__why{font-size:13px;line-height:2.0;color:#5a4c68;margin:0 0 10px}
.oshi-fit__why b{color:#a5326f}

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

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

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

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

/* ヒーローを光が横切る。結果が出た瞬間に一度だけ走らせる。 */
.oshi-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:oshiShine 1.5s .35s cubic-bezier(.3,.7,.4,1) 1}
@keyframes oshiShine{to{transform:translateX(120%)}}

/* タイプ名は大きく、光らせて出す。 */
.oshi-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)}
.oshi-hero__code{letter-spacing:.14em}

/* レア度がキラッと脈打つ。ここが自慢したくなる部分なので目を止める。 */
.oshi-rare{position:relative;overflow:hidden}
.oshi-rare__t{animation:oshiPulse 2.4s ease-in-out infinite}
@keyframes oshiPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.oshi-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:oshiSweep 3.6s 1s ease-in-out infinite}
@keyframes oshiSweep{0%{left:-40%}55%,100%{left:130%}}

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

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

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

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

/* 判定中の画面。18問答えた直後がいちばん期待の高い瞬間なので、絵を置いて持たせる。 */
.oshi-loading{position:relative}
.oshi-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:oshiWait 2.8s ease-in-out infinite}
@keyframes oshiWait{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.04);opacity:1}}

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

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

/* 沼りやすいグループ。辞典の実データから出しているので、根拠も添える。 */
.oshi-gp__lead{font-size:12.5px;line-height:1.95;color:#5a4c68;margin:0 0 14px}
.oshi-gp__list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:9px;counter-reset:gp}
.oshi-gp__list li{
	position:relative;padding:14px 15px 14px 52px;border-radius:14px;
	background:#fff;border:1px solid #eddff0}
.oshi-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,#e0619a,#9b5fc7)}
.oshi-gp__list b{display:block;font-size:15px;font-weight:900;color:#3a3040;line-height:1.4}
.oshi-gp__list em{
	display:block;margin-top:3px;font-style:normal;font-size:11.5px;color:#a5528a;font-weight:800}
.oshi-gp__list small{display:block;margin-top:4px;font-size:11px;color:#6c6284}

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

/* 同担拒否の順位。数字だけより順位のほうが人に言いたくなる。 */
.oshi-rank{
	margin:12px 0 0;padding:12px 14px;border-radius:13px;text-align:center;
	background:linear-gradient(135deg,#fdf1f8,#f3eefc);border:1px solid #f0d9ea;
	font-size:13px;line-height:1.7;color:#5a4c68}
.oshi-rank b{color:#c4468d;font-size:15px}
.oshi-rank span{display:block;margin-top:2px;font-size:11px;color:#6c6284}

/* 結果を保存させる段。閉じたらこの結果は戻らないので、いちばん上に置く。 */
.oshi-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}
.oshi-save__t{margin:0 0 7px;font-size:15.5px;font-weight:900;color:#127a4a;line-height:1.5}
.oshi-save__b{margin:0 0 14px;font-size:12px;line-height:1.9;color:#4a6357}
.oshi-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)}
.oshi-save__sub{
	display:inline-block;margin-top:10px;font-size:11.5px;font-weight:800;
	color:#127a4a;text-decoration:underline}

/* 上部のシェア。読み終わる前に離脱する人のために置く。下にも詳しい版がある。 */
.oshi-topshare{display:flex;gap:9px;margin:0 0 12px}
.oshi-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}
.oshi-topshare__x{background:#111}
.oshi-topshare__line{background:#06C755}

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