/* ✅ Basic */

DIV[Playlist][data-type]		{cursor:pointer;}
DIV[Playlist] *[data-type]		{cursor:pointer;}
DIV[Playlist] *[data-type] *	{pointer-events:none;}

DIV[Playlist] >*	{pointer-events:none;}
DIV[Playlist] A		{color:white;text-decoration:none;}
DIV[Playlist] text{
	text-anchor:middle;dominant-baseline:central;font-weight:bold;
	stroke-mode:outside;stroke-linejoin:round;stroke-linecap:round;
}


/* ✅ Color */

DIV[Playlist]{
	--nozopon-blue		:#44b4ff;
	--nozopon-orange	:#ff8700;
	--nozopon-green		:#b8e332;
	--brightcove-red	:#f44444;
	--ios-blue-old		:#4693ff;
	--ios-blue			:#0a84ff;
}

DIV[Playlist] .Player			{color:white;}
DIV[Playlist] .Backdrop			{background-color:#000c;}
DIV[Playlist] .Close			{color:#fff9;}
DIV[Playlist] .Like 			{background-color	:var(--nozopon-blue);}
DIV[Playlist] .Like 	.Heart	{fill				:var(--brightcove-red);}
DIV[Playlist] .Like 	.Meter	{background-color	:var(--ios-blue);}
DIV[Playlist] .Like.max .Heart	{fill				:white;}
DIV[Playlist] .Like.max .Meter	{background-color	:var(--brightcove-red);}
DIV[Playlist] .Description A	{color				:var(--nozopon-blue);}

DIV[Playlist] .Inventory LI			.Button	{background-color	:#333;}
DIV[Playlist] .Inventory LI.playing			{color				:black;}
DIV[Playlist] .Inventory LI.playing	.Button	{background-color	:#fff;}


/* ✅ Main */

BODY.class-0395ef37aaf2724781e56e74c9cca583{pointer-events:none;}
BODY.class-0395ef37aaf2724781e56e74c9cca583 DIV[Playlist]{cursor:auto;}
DIV[Playlist] A[data-id]{display:block;}

DIV[Playlist] .Player{
	pointer-events:auto;
	z-index:9999;
	font-family:"Noto Sans JP",sans-serif;
	-webkit-user-select:none;user-select:none;
}
DIV[Playlist] .Poster{
	position:relative;width:fit-content;
	display:grid;place-content:center;align-items:center;
	overflow:hidden;
}
DIV[Playlist] .Poster svg{
	position:absolute;width:100%;height:100%;max-height:18em;
}


/* ✅ Content */

DIV[Playlist] .Title{
	display:grid;place-content:center start;
	margin-right:4.5em;margin-left:1em;
}
DIV[Playlist] .Title SPAN{
	font-size:1.4em;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
DIV[Playlist] .Video{
	position:relative;
	width:100%;padding-top:56.25%;
}
/*.LANDSCAPE DIV[Playlist] .Video{padding-top:0;}*/
DIV[Playlist] .Video video-js{
	position:absolute;top:0;
}
DIV[Playlist] .Video .Twitter{
	display:flex;justify-content:center;align-items:center;
	height:100%;
}
DIV[Playlist] .Video .Twitter svg{width:100%;height:45%;}
DIV[Playlist] .Close{display:grid;place-content:center;}
DIV[Playlist] .Close SPAN{font-size:3em;}


/* ✅ Content Action */

DIV[Playlist] .Action .Icon{
	display:block;
	position:relative;
}
DIV[Playlist] .Action .Image{
	width:4.5em;height:4.5em;
	border-radius:3em;overflow:hidden;
	font-family:'Roboto',sans-serif;
}
DIV[Playlist] .Action text{
	font-size:1.1em;font-family:"Noto Sans JP",sans-serif;
}
DIV[Playlist] .Action .Badge{
	position:absolute;left:-1em;bottom:-0.3em;
	width:6.5em;height:2em;
}
DIV[Playlist] .Action .Description {
	transform:translateY(-0.3em);
	line-height:1.6;
	place-content:center;
}
DIV[Playlist] .Action .Description SPAN{font-size:1.3em;font-weight:bold;}
DIV[Playlist] .Action .Description A{font-size:1.1em;}


/* ✅ Content Like */

DIV[Playlist] .Like{
	cursor:pointer;
	position:relative;
	width:22.5em;height:4.5em;
	border-radius:2.5em;overflow:hidden;
	text-align:center;line-height:4.5em;
}
DIV[Playlist] .Like .Meter{height:4.5em;}
DIV[Playlist] .Like .Counter{
	position:absolute;top:0;right:0;bottom:0;left:0;
	display:grid;grid-auto-flow:column;place-content:center;gap:1em;
}
DIV[Playlist] .Like .Heart{width:2em;height:100%;}
DIV[Playlist] .Like SPAN.number{
	font-family:"Roboto Condensed",sans-serif;font-feature-settings:"palt"
}
DIV[Playlist] .Like .Alert{
	position:absolute;top:0;right:0;bottom:0;left:0;
	display:none;place-content:center;
}

DIV[Playlist] .Like:active				{transform:scale(0.96);}
DIV[Playlist] .Like 		.Heart		{transform:translateY(0.05em);}
DIV[Playlist] .Like 		SPAN.label	{font-size:1.25em;transform:translate(-0.2em,-0.05em);}
DIV[Playlist] .Like 		SPAN.number	{font-size:2em;}
DIV[Playlist] .Like			.Alert SPAN	{font-size:1.4em;transform:translateY(-0.05em);}
DIV[Playlist] .Like.max		SPAN.label	{display:none;}
DIV[Playlist] .Like.over	.Counter	{display:none;}
DIV[Playlist] .Like.over 	.Alert		{display:grid;}


/* ✅ Inventory */

DIV[Playlist] .Inventory LI		{position: relative;}
DIV[Playlist] .Inventory LI IMG	{width:14em;height:7.875em;}
DIV[Playlist] .Inventory LI SPAN{
	display:block;
	margin:0.35em 0.6em 0.5em 1em;
	line-height:1.7em;
	max-height:5.1em;
	overflow:hidden;
}
DIV[Playlist] .Inventory LI .Badge{
	font-family:Nunito,"Noto Sans JP",sans-serif;
	position: absolute;top:-1em;right:0em;
	width:5em;height:2.5em;
}
DIV[Playlist] .Inventory LI .Badge text{font-size:1.4em;}
DIV[Playlist] .Inventory LI.playing{pointer-events: none;}


/*** ✅ scrollbar ***/

DIV[Playlist] .Inventory UL::-webkit-scrollbar {
	height:1em;
	background-color: transparent;
}
DIV[Playlist] .Inventory UL::-webkit-scrollbar-thumb{
	background-color:#fff2;
	border-radius:1em;
	cursor:grab;
}
DIV[Playlist] .Inventory UL::-webkit-scrollbar-thumb:hover{
	background-color:#fff4;
	cursor:grab;
}
DIV[Playlist] .Inventory UL::-webkit-scrollbar-thumb:active{
	cursor:grabbing;
}


/*--- Layout206 ---*/

.CLAMP-320-480{font-size:3.125vw;}
@media(max-width:320px){.CLAMP-320-480{font-size:10px;}}
@media(min-width:480px){.CLAMP-320-480{font-size:15px;}}

BODY.class-0395ef37aaf2724781e56e74c9cca583{overflow:hidden;}

DIV[Playlist] UL	{margin:0;padding:0;}
DIV[Playlist] LI	{list-style-type:none;}
DIV[Playlist] IMG	{display:block;}

DIV[Playlist] .Player{}
DIV[Playlist] .Backdrop{
	z-index:9998;
	position:fixed;left:0;top:0;right:0;bottom:0;//z-index:-1;
	-webkit-backdrop-filter:blur(0.5em);backdrop-filter:blur(0.5em);
}
DIV[Playlist] .Scroll{
	z-index:9999;
	display:grid;place-content:center;grid-auto-columns:100%;
	position:fixed;top:0;right:0;bottom:0;left:0;width:100%;
	overflow-y:auto;
}
DIV[Playlist] .Container{min-height:0;}/*pc*/

DIV[Playlist] .Entry{
	position:relative;
	max-width:60em;
	margin:auto;
}
DIV[Playlist] .Entry .Title	{height:4.5em;}
DIV[Playlist] .Entry .Video	{margin:auto;}
DIV[Playlist] .Entry .Close{position:absolute;right:0;top:0;width:4.5em;height:4.5em;}
DIV[Playlist] .Entry .Action{
	display:grid;grid-auto-flow:column;gap:1em;grid-auto-columns:4.5em 22.5em;grid-auto-rows:4.5em;
	margin:auto;margin-top:1.5em;
	width:fit-content;
}
DIV[Playlist] .Entry .Action .Icon,
DIV[Playlist] .Entry .Action .Description	{border-radius:3em;}

DIV[Playlist] .Inventory{
	display:grid;place-content:center;
	width:100%;
	font-size:0.9em;
}
DIV[Playlist] .Inventory UL{
	padding:1.5em;
	display:grid;grid-auto-flow:column;gap:1em;grid-auto-columns:14em;grid-auto-rows:14em;
	overflow-x:auto;
}
DIV[Playlist] .Inventory LI .Button	{height:14em;border-radius:2em;overflow:hidden;}
DIV[Playlist] .Inventory IMG		{width:100%;}


@media (min-aspect-ratio:568/320) and (max-width:960px){/*iPhoneSE*/
	DIV[Playlist] .Scroll		{place-content:start;}
	DIV[Playlist] .Title		{display:none;}
}
@media (min-aspect-ratio:16/9) and (max-width:960px){
	DIV[Playlist] .Container	{height:200vh;height:200svh;}
	DIV[Playlist] .Close		{position:fixed;}
	DIV[Playlist] .Video{
		width:177.777vh;height:100vh;
		width:177.777svh;height:100svh;
		padding-top:0;
	}
	DIV[Playlist] .Entry{max-width:none;}
}