/* ポケモン64タイプ診断（2026-08-23 新設）
   接頭辞 .mj- 。モバイル優先で書き、PCの装飾は @media(min-width:760px) に隔離する。 */

.mj{
	--mj-ink:#1f2430;
	--mj-sub:#666e7d;
	--mj-line:#e4e7ee;
	--mj-paper:#f7f8fb;
	--mj-accent:#3d6fd1;
	--mj-gold:#c9992f;
	--mj-red:#d94848;
	background:var(--mj-paper);
	color:var(--mj-ink);
}
.pk *{box-sizing:border-box;}
.mj-wrap{padding-bottom:48px;}

/* ---- ヒーロー ---- */
.mj-hero{
	position:relative;color:#fff;text-align:center;padding:52px 20px 46px;
	background:linear-gradient(180deg,rgba(18,24,38,.42),rgba(18,24,38,.74)),var(--mj-hero) center/cover no-repeat,#2a3346;
}
.mj-hero__eyebrow{font-size:11px;letter-spacing:.32em;opacity:.82;margin:0;}
.mj-hero__h1sub{display:block;font-size:15px;font-weight:800;letter-spacing:.02em;
	margin-top:7px;opacity:.92;}
.mj-hero__h1{font-size:31px;font-weight:900;letter-spacing:.04em;line-height:1.35;margin:12px 0 0;
	text-shadow:0 2px 14px rgba(0,0,0,.45);}
.mj-hero__sub{font-size:15px;font-weight:700;margin:10px 0 0;opacity:.95;}
.mj-hero__lead{font-size:13.5px;line-height:2;margin:18px auto 0;max-width:30em;opacity:.94;}
.mj-hero__lead b{color:#ffe08a;}

/* ---- 共通ステージ ---- */
.mj-stage{background:#fff;border:1px solid var(--mj-line);border-radius:18px;
	padding:24px 18px;margin:22px 0;box-shadow:0 2px 14px rgba(28,38,64,.05);}

/* ---- イントロ ---- */
.mj-intro__pts{list-style:none;padding:0;margin:0 0 22px;}
.mj-intro__pts li{position:relative;padding:11px 0 11px 26px;border-bottom:1px dotted var(--mj-line);
	font-size:13.5px;line-height:1.95;}
.mj-intro__pts li:last-child{border-bottom:0;}
.mj-intro__pts li::before{content:"";position:absolute;left:4px;top:1.5em;width:10px;height:2px;background:var(--mj-accent);}
.mj-start{display:block;width:100%;border:0;cursor:pointer;
	background:linear-gradient(135deg,#3d6fd1,#6a49c8);color:#fff;
	font-size:17px;font-weight:900;letter-spacing:.06em;padding:17px 20px;border-radius:999px;
	box-shadow:0 6px 18px rgba(61,111,209,.32);}
.mj-start:hover{filter:brightness(1.06);}
.mj-intro__note{font-size:11.5px;color:var(--mj-sub);text-align:center;margin:12px 0 0;}

/* ---- 設問 ---- */
.mj-q__bar{height:5px;background:#e9edf5;border-radius:99px;overflow:hidden;margin-bottom:16px;}
.mj-q__bar i{display:block;height:100%;background:linear-gradient(90deg,#3d6fd1,#6a49c8);
	border-radius:99px;transition:width .3s;}
.mj-q__count{font-size:12px;font-weight:900;color:var(--mj-accent);margin:0;letter-spacing:.06em;}
.mj-q__count span{color:var(--mj-sub);font-weight:700;}
.mj-q__scene{font-size:12px;color:var(--mj-sub);margin:10px 0 0;letter-spacing:.06em;}
.mj-q__text{font-size:18px;font-weight:900;line-height:1.7;margin:6px 0 18px;}
.mj-q__opts{display:grid;gap:10px;}
.mj-opt{width:100%;text-align:left;cursor:pointer;background:#fff;
	border:2px solid var(--mj-line);border-radius:13px;padding:14px 15px;
	font-size:14.5px;line-height:1.7;color:var(--mj-ink);transition:border-color .15s,background .15s;}
.mj-opt:hover{border-color:var(--mj-accent);background:#f3f7ff;}
.mj-back{margin-top:16px;background:none;border:0;color:var(--mj-sub);font-size:13px;cursor:pointer;padding:6px 0;}
.mj-back:hover{color:var(--mj-ink);}

/* ---- 読み込み ---- */
.mj-loading{text-align:center;padding:44px 18px;}
.mj-loading p{font-size:14px;color:var(--mj-sub);margin:16px 0 0;}
.mj-loading__dot{width:46px;height:46px;margin:0 auto;border-radius:50%;
	border:4px solid #e3e8f2;border-top-color:var(--mj-accent);animation:pkspin .9s linear infinite;}
@keyframes pkspin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.mj-loading__dot{animation:none;}}

/* ---- 結果 ---- */
.mj-res{text-align:center;}
.mj-res__eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.18em;
	color:#fff;background:var(--mj-ink);padding:4px 12px;border-radius:99px;margin:0;}
.mj-res__catch{font-size:14px;font-weight:800;color:var(--mj-accent);margin:14px 0 0;}
.mj-res__name{font-size:34px;font-weight:900;letter-spacing:.04em;margin:6px 0 0;line-height:1.3;}
.mj-res__tys{display:flex;gap:8px;justify-content:center;margin:14px 0 0;flex-wrap:wrap;}
.mj-ty{color:#fff;font-size:12.5px;font-weight:900;letter-spacing:.08em;padding:5px 14px;border-radius:99px;}
/* 立ち絵。900×1200なので幅を抑えないと画面を占領する */
.mj-res__ch{width:78%;max-width:330px;height:auto;margin:16px auto 0;display:block;}
.mj-res__dict{margin:14px 0 0;text-align:center;}
.mj-res__dict a{display:inline-block;font-size:13.5px;font-weight:800;color:var(--mj-accent);
	border-bottom:2px solid #cfe0ff;padding-bottom:2px;text-decoration:none;}
.mj-res__dict a:hover{border-bottom-color:var(--mj-accent);}
.mj-res__name a{color:inherit;text-decoration:none;border-bottom:3px solid #dbe6fb;}
.mj-res__name a:hover{border-bottom-color:var(--mj-accent);}
/* ニックネーム入力とシェア文のプレビュー */
.mj-nick{display:flex;align-items:center;gap:10px;margin:0 0 12px;}
.mj-nick label{font-size:12.5px;font-weight:800;color:var(--mj-sub);white-space:nowrap;}
.mj-nick input{flex:1;min-width:0;font-size:15px;padding:11px 13px;border:2px solid var(--mj-line);
	border-radius:11px;background:#fff;color:var(--mj-ink);}
.mj-nick input:focus{outline:none;border-color:var(--mj-accent);}
.mj-share__prev{white-space:pre-wrap;text-align:left;font-size:12.5px;line-height:1.85;
	color:#3d4453;background:#fff;border:1px dashed var(--mj-line);border-radius:11px;
	padding:13px 14px;margin:0 0 14px;}
.mj-res__read{font-size:14.5px;line-height:2.1;text-align:left;margin:20px 0 0;}

/* 個体値 */
.mj-iv{margin:28px 0 0;padding:20px 16px;background:var(--mj-paper);
	border:1px solid var(--mj-line);border-radius:16px;text-align:left;}
.mj-iv__h{font-size:15px;font-weight:900;letter-spacing:.1em;margin:0 0 14px;text-align:center;}
.mj-iv__tier{width:100%;height:auto;border-radius:12px;display:block;margin:0 0 14px;}
.mj-iv__tierlabel{text-align:center;margin:0 0 16px;}
.mj-iv__tierlabel b{font-size:40px;font-weight:900;letter-spacing:.02em;color:var(--mj-gold);line-height:1;}
.mj-iv__tierlabel span{display:inline-block;margin-left:10px;font-size:12px;font-weight:900;
	color:#fff;background:var(--mj-gold);padding:4px 11px;border-radius:99px;vertical-align:middle;}
.mj-iv__rows{display:grid;gap:7px;}
.mj-iv__row{display:grid;grid-template-columns:22px 1fr 26px;gap:4px 8px;align-items:center;
	background:#fff;border:1px solid var(--mj-line);border-radius:10px;padding:9px 10px;}
.mj-iv__row.is-v{border-color:var(--mj-gold);background:#fffbf0;}
.mj-iv__k{font-size:15px;font-weight:900;color:var(--mj-sub);}
.mj-iv__row.is-v .mj-iv__k{color:var(--mj-gold);}
.mj-iv__l{font-size:13px;font-weight:800;}
.mj-iv__l em{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--mj-sub);}
.mj-iv__n{font-size:17px;font-weight:900;text-align:right;}
.mj-iv__bar{grid-column:2/3;height:8px;background:#eceff6;border-radius:99px;overflow:hidden;}
.mj-iv__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3d6fd1,#6a49c8);}
.mj-iv__row.is-v .mj-iv__bar i{background:linear-gradient(90deg,#e0b34a,#c9992f);}
.mj-iv__j{grid-column:3/4;font-size:10.5px;font-weight:800;color:var(--mj-sub);text-align:right;white-space:nowrap;}
.mj-iv__row.is-v .mj-iv__j{color:var(--mj-gold);}
.mj-iv__total{margin:14px 0 0;font-size:13.5px;font-weight:800;text-align:center;}
.mj-iv__total b{font-size:22px;font-weight:900;}
.mj-iv__total span{display:block;font-size:12px;font-weight:700;color:var(--mj-sub);margin-top:4px;}
.mj-iv__note{font-size:11.5px;line-height:1.9;color:var(--mj-sub);margin:14px 0 0;}

/* シェア */
.mj-share{margin:26px 0 0;text-align:center;}
.mj-share__lead{font-size:13px;color:var(--mj-sub);margin:0 0 12px;}
.mj-share__btns{display:grid;gap:9px;}
.mj-share__btn{border:0;cursor:pointer;font-size:14.5px;font-weight:900;letter-spacing:.06em;
	padding:14px 16px;border-radius:999px;color:#fff;}
.mj-share__btn--x{background:#000;}
.mj-share__btn--line{background:#06c755;}
.mj-share__btn--copy{background:#fff;color:var(--mj-ink);border:2px solid var(--mj-line);}
.mj-share__btn:hover{filter:brightness(1.08);}
.mj-share__done{font-size:12px;color:#06a34a;font-weight:800;margin:10px 0 0;}

/* 次の導線 */
.mj-next{margin:26px 0 0;padding:20px 16px;border:2px solid var(--mj-accent);border-radius:16px;background:#f3f7ff;}
.mj-next__lead{font-size:13.5px;line-height:1.95;margin:0 0 14px;text-align:left;}
.mj-next__btn{display:block;text-align:center;background:var(--mj-accent);color:#fff;
	font-size:15px;font-weight:900;padding:14px 18px;border-radius:999px;text-decoration:none;}
.mj-next__btn:hover{filter:brightness(1.08);}
.mj-again{display:block;width:100%;margin:18px 0 0;background:none;border:0;cursor:pointer;
	color:var(--mj-sub);font-size:13px;padding:8px;}

/* ---- 解説 ---- */
.mj-about{margin:26px 0 0;background:#fff;border:1px solid var(--mj-line);border-radius:18px;padding:24px 18px;}
.mj-about h2{font-size:18px;font-weight:900;line-height:1.6;margin:26px 0 12px;
	padding-left:12px;border-left:5px solid var(--mj-accent);}
.mj-about h2:first-child{margin-top:0;}
.mj-about p{font-size:14px;line-height:2.05;margin:0 0 14px;}
.mj-small{font-size:12.5px !important;color:var(--mj-sub);line-height:1.95 !important;}
.mj-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;}
.mj-table table{border-collapse:collapse;width:100%;font-size:13px;}
.mj-table th,.mj-table td{border:1px solid var(--mj-line);padding:9px 10px;text-align:left;line-height:1.7;}
.mj-table thead th{background:var(--mj-paper);font-size:11.5px;color:var(--mj-sub);white-space:nowrap;}
.mj-faq{margin:0;}
.mj-faq dt{font-size:14px;font-weight:900;line-height:1.7;margin:16px 0 6px;padding-left:20px;position:relative;}
.mj-faq dt::before{content:"Q";position:absolute;left:0;color:var(--mj-accent);font-weight:900;}
.mj-faq dd{margin:0 0 0 20px;font-size:13.5px;line-height:2;color:#3d4453;}
.mj-links{margin:22px 0 0;font-size:13px;}
.mj-links a{color:var(--mj-accent);text-decoration:underline;text-underline-offset:3px;}

@media (min-width:760px){
	.mj-hero{padding:74px 24px 66px;}
	.mj-hero__h1{font-size:46px;}
	.mj-hero__sub{font-size:18px;}
	.mj-hero__lead{font-size:15px;}
	.mj-stage,.mj-about{padding:34px 34px;}
	.mj-q__text{font-size:21px;}
	.mj-res__name{font-size:44px;}
	.mj-iv{padding:28px 26px;}
	.mj-iv__row{grid-template-columns:26px 190px 1fr 34px 92px;}
	.mj-iv__bar{grid-column:auto;}
	.mj-iv__j{grid-column:auto;font-size:11.5px;}
	.mj-share__btns{grid-template-columns:repeat(3,1fr);}
	.mj-start{max-width:420px;margin:0 auto;}
}

/* ── 無職転生 固有 ───────────────────────── */
.mj-res__title{font-size:30px;font-weight:900;letter-spacing:.03em;margin:10px 0 0;line-height:1.35;}
.mj-res__img{width:100%;height:auto;border-radius:14px;margin:18px 0 0;display:block;}
.mj-res__lead{font-size:15px;font-weight:800;color:var(--mj-accent);margin:16px 0 0;}
.mj-res__read{font-size:14px;line-height:2.05;text-align:left;margin:12px 0 0;}
.mj-rank,.mj-att,.mj-chara{margin:26px 0 0;padding:20px 16px;background:var(--mj-paper);
	border:1px solid var(--mj-line);border-radius:16px;text-align:left;}
.mj-rank h3,.mj-att h3,.mj-chara h3{font-size:13px;font-weight:900;letter-spacing:.12em;
	color:var(--mj-sub);margin:0 0 10px;text-align:center;}
.mj-rank__name{font-size:38px;font-weight:900;text-align:center;margin:0;color:var(--mj-gold);line-height:1.1;}
.mj-rank__note{font-size:13px;color:var(--mj-sub);text-align:center;margin:8px 0 0;}
.mj-rank__top{margin:14px 0 0;font-size:12.5px;line-height:1.9;background:#fff;
	border:2px solid var(--mj-gold);border-radius:12px;padding:12px 14px;font-weight:700;}
.mj-rank__top span{display:block;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--mj-sub);}
.mj-att__name{font-size:24px;font-weight:900;text-align:center;margin:0;}
.mj-att__read{font-size:13.5px;line-height:2;color:#3d4453;margin:8px 0 14px;text-align:center;}
.mj-att__bars{display:grid;gap:9px;}

/* 愛着ごとの背景（bg-*.webp）。
   幕の濃さは素材の実測に合わせて1枚ずつ変える。平均輝度だけで決めると、
   カリスマ診断のときのように暗い素材へ暗い幕を重ねて真っ黒になる。
     stable   平均98.1 明暗差208 … 明るいので幕を濃く
     anxious  平均48.3 明暗差148
     avoidant 平均24.4 明暗差 67 … 暗くて平坦。screen で持ち上げてから薄い幕
     fearful  平均47.2 明暗差224 */
.mj-att{position:relative;overflow:hidden;isolation:isolate;}
.mj-att[style*="--mj-att-bg"]{
	border-color:rgba(255,255,255,.14);
	background:var(--mj-att-bg) center/cover no-repeat,#1b2233;
	color:#fff;
}
.mj-att[style*="--mj-att-bg"]::before{
	content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(180deg,rgba(14,19,30,.30) 0%,rgba(14,19,30,.62) 100%);
}
.mj-att--S[style*="--mj-att-bg"]::before{
	background:linear-gradient(180deg,rgba(14,19,30,.42) 0%,rgba(14,19,30,.72) 100%);
}
.mj-att--V[style*="--mj-att-bg"]{
	background-color:#3d4a63;background-blend-mode:screen;
}
.mj-att--V[style*="--mj-att-bg"]::before{
	background:linear-gradient(180deg,rgba(14,19,30,.10) 0%,rgba(14,19,30,.46) 100%);
}
.mj-att[style*="--mj-att-bg"] h3{color:rgba(255,255,255,.86);}
.mj-att[style*="--mj-att-bg"] .mj-att__read{color:rgba(255,255,255,.92);}
.mj-att[style*="--mj-att-bg"] .mj-att__name{text-shadow:0 2px 12px rgba(0,0,0,.55);}
.mj-bar{display:grid;grid-template-columns:96px 1fr 30px;gap:9px;align-items:center;font-size:12px;font-weight:800;}
.mj-bar i{display:block;height:9px;background:#eceff6;border-radius:99px;overflow:hidden;}
.mj-bar b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3d6fd1,#6a49c8);}
.mj-bar em{font-style:normal;text-align:right;}
.mj-chara__link{display:block;text-align:center;font-size:15px;font-weight:900;color:var(--mj-accent);
	text-decoration:none;border:2px solid var(--mj-accent);border-radius:999px;padding:13px 16px;}
.mj-chara__link:hover{background:var(--mj-accent);color:#fff;}
.mj-chara__alt{font-size:12px;color:var(--mj-sub);text-align:center;margin:10px 0 0;}

/* 階級の帯。白いカードの中に置くので、角丸だけ付けて余計な影は乗せない */
.mj-rank__img{display:block;width:100%;height:auto;border-radius:12px;margin:0 0 14px;}

/* 画像付きの導線（2026-08-25）。シェアの直後に置く。 */
.mj-dousen{display:grid;gap:10px;margin:22px 0 0;}
.mj-dousen__card{display:grid;grid-template-columns:100px 1fr;grid-template-rows:auto auto auto;
	gap:2px 12px;align-items:center;text-decoration:none;color:inherit;text-align:left;
	background:#fff;border:2px solid var(--mj-line);border-radius:14px;padding:12px 14px;}
.mj-dousen__card:hover{border-color:var(--mj-accent);}
.mj-dousen__card img{grid-row:1/4;width:100px;height:62px;object-fit:cover;border-radius:10px;background:#f6f7fb;}
.mj-dousen__t{font-size:14px;font-weight:900;line-height:1.5;}
.mj-dousen__t b{color:var(--mj-accent);}
.mj-dousen__d{font-size:11.5px;line-height:1.7;color:var(--mj-sub);}
.mj-dousen__b{font-size:12.5px;font-weight:900;color:var(--mj-accent);}
@media (min-width:760px){.mj-dousen{grid-template-columns:1fr 1fr;}}