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

.yt{
	--yt-ink:#1b1f27;
	--yt-sub:#6b7280;
	--yt-line:#e5e7eb;
	--yt-paper:#f7f8fa;
	--yt-accent:#e0245e;
	--yt-accent2:#7c3aed;
	background:var(--yt-paper);
	color:var(--yt-ink);
}
.yt *{box-sizing:border-box;}
.yt-wrap{padding-bottom:48px;}

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

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

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

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

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

/* ---- 結果 ---- */
.yt-res{text-align:center;}
.yt-res__eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.18em;
	color:#fff;background:var(--yt-ink);padding:4px 12px;border-radius:99px;margin:0;}
.yt-res__title{font-size:28px;font-weight:900;letter-spacing:.02em;margin:14px 0 0;line-height:1.35;}
.yt-res__title b{color:var(--yt-accent);}
.yt-res__lead{font-size:14.5px;font-weight:800;color:var(--yt-sub);margin:10px 0 0;}
.yt-res__img{width:100%;height:auto;border-radius:14px;display:block;margin:18px 0 0;}
.yt-res__read{font-size:14.5px;line-height:2.1;text-align:left;margin:18px 0 0;}

/* 愛着。背景は bg-*.webp。
   暗い素材へ暗い幕を重ねると黒い板になる（カリスマ診断で実際に起きた）ので、
   素材の実測に合わせて幕の濃さを変える。youtuber の4枚は平均輝度90〜99と明るいため
   一律で濃いめにしてよい。 */
.yt-att{position:relative;overflow:hidden;isolation:isolate;
	margin:26px 0 0;padding:20px 16px;background:var(--yt-paper);
	border:1px solid var(--yt-line);border-radius:16px;text-align:left;}
.yt-att[style*="--yt-att-bg"]{
	border-color:rgba(255,255,255,.14);
	background:var(--yt-att-bg) center/cover no-repeat,#1b2233;
	color:#fff;
}
.yt-att[style*="--yt-att-bg"]::before{
	content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(180deg,rgba(12,14,20,.46) 0%,rgba(12,14,20,.74) 100%);
}
.yt-att h3,.yt-axes h3,.yt-near h3{font-size:13px;font-weight:900;letter-spacing:.12em;
	color:var(--yt-sub);margin:0 0 10px;text-align:center;}
.yt-att[style*="--yt-att-bg"] h3{color:rgba(255,255,255,.86);}
.yt-att__name{font-size:24px;font-weight:900;text-align:center;margin:0;
	text-shadow:0 2px 12px rgba(0,0,0,.5);}
.yt-att__read{font-size:13.5px;line-height:2;color:#3d4453;margin:8px 0 14px;text-align:center;}
.yt-att[style*="--yt-att-bg"] .yt-att__read{color:rgba(255,255,255,.92);}
.yt-att__bars{display:grid;gap:9px;}

.yt-bar{display:grid;grid-template-columns:104px 1fr 30px;gap:9px;align-items:center;font-size:12px;font-weight:800;}
.yt-bar i{display:block;height:9px;background:#eceef3;border-radius:99px;overflow:hidden;}
.yt-bar b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#e0245e,#7c3aed);}
.yt-bar em{font-style:normal;text-align:right;}

.yt-axes{margin:26px 0 0;padding:20px 16px;background:var(--yt-paper);
	border:1px solid var(--yt-line);border-radius:16px;text-align:left;}

/* 近い配信者 */
.yt-near{margin:26px 0 0;padding:20px 16px;background:var(--yt-paper);
	border:1px solid var(--yt-line);border-radius:16px;text-align:left;}
.yt-near__note{font-size:12px;line-height:1.95;color:var(--yt-sub);margin:0 0 14px;}
.yt-near__list{display:grid;gap:9px;}
.yt-near__item{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
	background:#fff;border:1px solid var(--yt-line);border-radius:12px;padding:11px 13px;
	text-decoration:none;color:var(--yt-ink);}
.yt-near__item:hover{border-color:var(--yt-accent);}
.yt-near__emoji{font-size:20px;text-align:center;}
.yt-near__item b{font-size:14.5px;font-weight:800;}
.yt-near__item em{font-style:normal;font-size:11px;color:var(--yt-sub);}
.yt-near__caution{font-size:11px;line-height:1.9;color:var(--yt-sub);margin:12px 0 0;}

/* 次への導線・シェア */
.yt-next{margin:26px 0 0;padding:20px 16px;border-radius:16px;text-align:left;
	background:linear-gradient(135deg,#e0245e,#7c3aed);color:#fff;}
.yt-next p{font-size:13px;line-height:1.95;margin:0 0 12px;opacity:.95;}
.yt-next__btn{display:inline-block;background:#fff;color:#e0245e;font-weight:900;font-size:14px;
	text-decoration:none;padding:11px 18px;border-radius:999px;}
.yt-share{margin:26px 0 0;text-align:center;}
.yt-share__lead{font-size:13px;color:var(--yt-sub);margin:0 0 12px;}
.yt-share__btns{display:grid;gap:9px;}
.yt-share__btn{border:0;cursor:pointer;font-size:14.5px;font-weight:900;letter-spacing:.06em;
	padding:14px 18px;border-radius:999px;}
.yt-share__btn--x{background:#111;color:#fff;}
.yt-share__btn--cp{background:#fff;color:var(--yt-ink);border:2px solid var(--yt-line);}
.yt-again{margin:22px 0 0;width:100%;background:none;border:2px solid var(--yt-line);
	border-radius:999px;padding:13px;font-size:14px;font-weight:800;color:var(--yt-sub);cursor:pointer;}
.yt-again:hover{border-color:var(--yt-accent);color:var(--yt-ink);}

/* 本文 */
.yt-about{margin:30px 0 0;}
.yt-about h2{font-size:19px;font-weight:900;margin:28px 0 12px;padding-left:11px;
	border-left:5px solid var(--yt-accent);line-height:1.5;}
.yt-about p{font-size:14px;line-height:2.05;margin:0 0 14px;}
.yt-small{font-size:12px;line-height:1.95;color:var(--yt-sub);}
.yt-table{overflow-x:auto;margin:0 0 16px;}
.yt-table table{width:100%;border-collapse:collapse;font-size:13px;}
.yt-table th,.yt-table td{border:1px solid var(--yt-line);padding:9px 10px;text-align:left;line-height:1.75;}
.yt-table th{background:var(--yt-paper);font-weight:800;white-space:nowrap;}
.yt-faq dt{font-size:14px;font-weight:800;margin:16px 0 6px;}
.yt-faq dd{font-size:13.5px;line-height:2;margin:0;color:#3d4453;}
.yt-links{font-size:13.5px;margin:22px 0 0;}

@media (min-width:760px){
	.yt-hero{padding:70px 24px 62px;}
	.yt-hero__h1{font-size:38px;}
	.yt-share__btns{grid-template-columns:1fr 1fr;}
	.yt-near__list{grid-template-columns:1fr 1fr;}
}

/* 画像付きの導線（2026-08-25）。シェアの直後に置く。 */
.yt-dousen{display:grid;gap:10px;margin:22px 0 0;}
.yt-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(--yt-line);border-radius:14px;padding:12px 14px;}
.yt-dousen__card:hover{border-color:var(--yt-accent);}
.yt-dousen__card img{grid-row:1/4;width:100px;height:62px;object-fit:cover;border-radius:10px;background:#f6f7fb;}
.yt-dousen__t{font-size:14px;font-weight:900;line-height:1.5;}
.yt-dousen__t b{color:var(--yt-accent);}
.yt-dousen__d{font-size:11.5px;line-height:1.7;color:var(--yt-sub);}
.yt-dousen__b{font-size:12.5px;font-weight:900;color:var(--yt-accent);}
@media (min-width:760px){.yt-dousen{grid-template-columns:1fr 1fr;}}