/* ==========================================================================
   PC 画面の左右の余白（サイドレール）
   本文カラムの幅：議事録・パートナー 760px / 本日のお悩み 720px
   ・右：区切り追従型の広告（本文の横に、区間ごとに1つ）
   ・左：導線カード（画面に固定）… 1440px 以上
   ========================================================================== */

.ss-rails {
	--ss-half: 380px;   /* 本文カラムの半分 */
	--ss-gap: 32px;     /* 本文とレールの間 */
	--ss-rail-w: 160px;
}

.ss-rails--topic {
	--ss-half: 360px;
}

/* ノートPC（1260〜1439px）は幅 200px、大きな画面（1440px〜）は 300px */
@media (min-width: 1260px) {
	.ss-rails {
		--ss-rail-w: 200px;
	}
}

@media (min-width: 1440px) {
	.ss-rails {
		--ss-rail-w: 300px;
	}
}

.ss-rail,
.ss-rail-right {
	font-style: normal;
}

.ss-rail *,
.ss-rail-right * {
	font-style: normal !important;
}

/* ---------- 右：区切り追従型の広告 ---------- */

.ss-rail-right {
	display: none;
	position: absolute;
	left: calc(50% + var(--ss-half) + var(--ss-gap));
	width: var(--ss-rail-w);
	z-index: 40;
}

.ss-rail-right.is-on {
	display: block;
}

@media (max-width: 1259px) {
	.ss-rail-right.is-on {
		display: none;
	}
}

/* 区間：この高さの中で広告が追従し、区間の終わりで次の広告に入れ替わる */
.ss-rail-seg {
	position: relative;
}

.ss-rail-seg + .ss-rail-seg {
	padding-top: 24px;
}

/* ヘッダーの下端（--ss-header-bottom は JS で実際の位置を計測）のすぐ下で止まる */
.ss-rail-sticky {
	position: sticky;
	top: calc(var(--ss-header-bottom, 134px) + 16px);
	transition: top .2s ease;
}

.ss-rail-right .nb-ad {
	display: block;
	margin: 0;
	padding: 10px;
	border: 1px dashed #d6d3c8;
	border-radius: 8px;
	background: rgba(255, 255, 255, .7);
	text-align: center;
	min-height: 0;
	overflow: hidden;
}

.ss-rail-right .nb-ad--adsense {
	min-height: 600px;
}

.ss-rail-right .nb-ad__label {
	display: block;
	margin: 0 0 8px;
	font-size: 10px;
	letter-spacing: .12em;
	text-align: left;
	color: #9a968b;
}

.ss-rail-right .nb-ad a {
	color: inherit !important;
	text-decoration: none !important;
}

/* ---------- 左：導線カード（画面に固定） ---------- */

.ss-rail--left {
	display: none;
	position: fixed;
	/* ヘッダーの下端から 20px 下（帯がたたまれるとカードも一緒に上がる） */
	top: calc(var(--ss-header-bottom, 134px) + 20px);
	z-index: 50;
	/* 影が切れないよう、内側に 10px の余白をとって外側にずらす */
	left: calc(50% - var(--ss-half) - var(--ss-gap) - var(--ss-rail-w) - 10px);
	width: calc(var(--ss-rail-w) + 20px);
	padding: 0 10px 18px;
	max-height: calc(100vh - var(--ss-header-bottom, 134px) - 40px);
	overflow-y: auto;
	scrollbar-width: none;
	transition: top .2s ease, opacity .2s ease, visibility .2s ease;
}

.ss-rail--left::-webkit-scrollbar {
	display: none;
}

.ss-rail--left.is-hidden {
	opacity: 0;
	visibility: hidden;
}

@media (min-width: 1260px) {
	.ss-rail--left {
		display: block;
	}
}

/* ---------- 右：YouTube・Twitch・X（全ページ・最初の区間で追従） ---------- */

.ss-rail-media {
	display: grid;
	gap: 12px;
	font-family: "Noto Sans JP", system-ui, sans-serif;
	font-weight: 400;
	color: #1f2937;
}

.ss-rail-media__head {
	margin: 0;
	padding: 0 2px;
	font-family: "Klee One", "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	color: #0b1f3a;
	text-align: center;
}

.ss-rail-media .kz-watch__card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 14px;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .06);
	text-align: left;
}

.ss-rail-media .kz-watch__card--yt { background: #fff5f7; border: 1.5px solid #ffd0d8; }
.ss-rail-media .kz-watch__card--tw { background: #f5f0ff; border: 1.5px solid #e0d2fb; }
.ss-rail-media .kz-watch__card--x  { background: #f6f7f8; border: 1.5px solid #dfe2e6; }

.ss-rail-media .kz-watch__name {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: #0b1f3a;
}

.ss-rail-media .kz-watch__ico {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	color: #fff;
	font-size: 10px;
}

.ss-rail-media .kz-watch__card--yt .kz-watch__ico { background: #ff0033; }
.ss-rail-media .kz-watch__card--tw .kz-watch__ico { background: #9146ff; }
.ss-rail-media .kz-watch__card--x .kz-watch__ico  { background: #0f1419; font-size: 12px; }

.ss-rail-media .kz-watch__live {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: #e11d48;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
}

.ss-rail-media .kz-watch__live[hidden] {
	display: none;
}

.ss-rail-media .kz-watch__live i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: ss-rail-dot 1s ease-in-out infinite alternate;
}

@keyframes ss-rail-dot {
	to { opacity: .3; }
}

.ss-rail-media .kz-watch__text {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
	color: #1f2937;
}

.ss-rail-media .kz-watch__text b {
	font-weight: 700;
	color: #6d28d9;
}

.ss-rail-media .kz-watch__handle {
	font-weight: 700;
	color: #536471;
}

.ss-rail-media .kz-watch__video {
	display: block;
	color: inherit !important;
	text-decoration: none !important;
}

/* サムネイルは白い台紙＋セロハンテープ（サイト共通の写真の貼り方） */
.ss-rail-media .kz-watch__thumb {
	display: block;
	position: relative;
	margin: 6px 2px 8px;
	padding: 5px 5px 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 10px rgba(60, 50, 30, .08);
	transform: rotate(-1deg);
}

.ss-rail-media .kz-watch__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ss-rail-media .kz-watch__vtitle {
	display: -webkit-box;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ss-rail-media .kz-watch__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border-radius: 999px;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 800;
	text-decoration: none !important;
	transition: transform .15s ease, filter .15s ease;
}

.ss-rail-media .kz-watch__btn:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.ss-rail-media .kz-watch__card--yt .kz-watch__btn { background: #ff0033; }
.ss-rail-media .kz-watch__card--tw .kz-watch__btn { background: #9146ff; }
.ss-rail-media .kz-watch__card--tw .kz-watch__btn.is-live { background: #e11d48; }
.ss-rail-media .kz-watch__card--x .kz-watch__btn  { background: #0f1419; }

/* 幅 200px（1260〜1439px）のときは少し詰める */
@media (max-width: 1439px) {
	.ss-rail-media__head {
		font-size: 13px;
	}

	.ss-rail-media .kz-watch__card {
		padding: 12px;
	}
}

/* 画面の高さが低いときは YouTube のサムネイルを省く（3枚が画面に収まるように） */
@media (max-height: 820px) {
	.ss-rail-media .kz-watch__thumb {
		display: none;
	}
}

/* ---------- 左：応援パートナー（トップ・本日のお悩み） ---------- */

.ss-rail-pt__pr {
	display: inline-block;
	margin-right: 6px;
	padding: 0 5px;
	border: 1px solid #c9c4b6;
	border-radius: 3px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	color: #8a8578;
	vertical-align: 1px;
}

.ss-rail-pt__list {
	display: grid;
	gap: 18px;
	margin: 14px 0 14px;
	padding: 0;
	list-style: none;
}

.ss-rail-pt__list li {
	margin: 0;
	list-style: none;
}

.ss-rail-pt__list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: inherit !important;
	text-align: center;
	text-decoration: none !important;
}

/* ロゴは透明なセロハンテープで貼る（フッター・記事と同じ） */
.ss-rail-pt__logo {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 70px;
	padding: 12px 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 10px rgba(60, 50, 30, .08);
	transform: rotate(-1.2deg);
	transition: transform .15s ease;
}

.ss-rail-pt__list li:nth-child(even) .ss-rail-pt__logo {
	transform: rotate(1deg);
}

.ss-rail-pt__list a:hover .ss-rail-pt__logo {
	transform: rotate(0) translateY(-2px);
}

.ss-rail-pt__logo::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 50px;
	height: 16px;
	margin-left: -25px;
	background:
		linear-gradient(100deg, transparent 0 22%, rgba(255, 255, 255, .75) 30%, rgba(255, 255, 255, 0) 40%, transparent 100%),
		linear-gradient(180deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .35) 100%),
		rgba(205, 220, 232, .38);
	box-shadow: 0 1px 2px rgba(40, 50, 60, .12);
	transform: rotate(-4deg);
	clip-path: polygon(0 0, 3% 12%, 0 25%, 3% 37%, 0 50%, 3% 62%, 0 75%, 3% 87%, 0 100%, 100% 100%, 97% 87%, 100% 75%, 97% 62%, 100% 50%, 97% 37%, 100% 25%, 97% 12%, 100% 0);
}

.ss-rail-pt__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 56px;
	object-fit: contain;
}

.ss-rail-pt__name-only {
	font-family: "Klee One", "Noto Sans JP", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #0b1f3a;
}

.ss-rail-pt__name {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	color: #0b1f3a;
}

.ss-rail-pt__catch {
	font-size: 11px;
	line-height: 1.6;
	color: #6b7280;
}

.ss-rail-pt .ss-rail-card__more {
	display: block;
	text-align: center;
}

.ss-rail-card {
	padding: 18px 18px 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .08);
	font-family: "Noto Sans JP", system-ui, sans-serif;
	font-weight: 400;
	color: #1f2937;
}

.ss-rails--notebook .ss-rail-card,
.ss-rails--partner .ss-rail-card {
	border-radius: 2px;
	background: #fffefa;
	box-shadow: 0 1px 1px rgba(60, 50, 30, .06), 0 6px 18px rgba(60, 50, 30, .08);
}

.ss-rail-card__label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	color: #6b7280;
}

.ss-rail-card__title {
	margin: 0 0 14px;
	font-family: "Klee One", "Noto Sans JP", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	color: #0b1f3a;
}

.ss-rail-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 999px;
	background: #16a34a;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
}

.ss-rail-card__btn:hover {
	background: #15803d;
}

/* みんなが共感した意見（今日のテーマのランキング） */
.ss-rail-rank__theme {
	margin: -2px 0 12px;
	font-size: 12px;
	line-height: 1.6;
	color: #6b7280;
}

.ss-rail-rank__list {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.ss-rail-rank__list li {
	margin: 0;
	list-style: none;
}

.ss-rail-rank__list li + li {
	border-top: 1px dashed #e6e2d6;
}

.ss-rail-rank__list a {
	display: flex;
	gap: 10px;
	padding: 10px 0;
	color: inherit !important;
	text-decoration: none !important;
}

.ss-rail-rank__list a:hover .ss-rail-rank__text {
	color: #15803d;
}

.ss-rail-rank__medal {
	flex: none;
	font-size: 20px;
	line-height: 1.2;
}

.ss-rail-rank__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ss-rail-rank__text {
	display: -webkit-box;
	font-family: "Klee One", "Noto Sans JP", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	color: #0b1f3a;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ss-rail-rank__meta {
	font-size: 11px;
	color: #9a968b;
}

.ss-rail-rank__empty {
	margin: 0 0 14px;
	padding: 12px;
	border: 1.5px dashed #f3d9a4;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
	color: #92400e;
}

.ss-rail-card__list {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.ss-rail-card__list li + li {
	border-top: 1px solid #eef0f3;
}

.ss-rail-card__list a {
	display: block;
	padding: 9px 0;
	font-size: 14px;
	line-height: 1.6;
	color: #0b1f3a !important;
	text-decoration: none !important;
}

.ss-rail-card__list a:hover {
	color: #15803d !important;
}

.ss-rail-card__more {
	font-size: 13px;
	font-weight: 700;
	color: #15803d !important;
	text-decoration: none !important;
}