/*	.slider-pics
============================== */
.slider-pics {
	text-align:left;
}
.slider-pics .outer {
	overflow:hidden;
	-webkit-transform: translateZ(0);
}
.slider-pics .outer ul {
	position:absolute;
	list-style-type:none;
	display:table;
	/* width:100%; */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.slider-pics .outer ul.inner li {
	display:table-cell;
}
.slider-pics .outer ul.inner li,
.slider-pics .outer ul.inner li a,
.slider-pics .outer ul.inner li a img {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.slider-pics ul li a,
.slider-pics ul li a span,
.slider-pics ul li a span img {
	display:block;
}
.slider-pics .outer ul.inner li a {
	text-decoration:none;
}
.slider-pics ul li a span {
	position:relative;
}
.slider-pics ul li a span.lazy-done {
	-webkit-animation: fadeIn 500ms;
	animation: fadeIn 500ms;
}
.slider-pics .outer ul.inner li a span.thumb {
	background-position:center center;
	background-size:cover;
}

.slider-pics .outer ul.inner li span.lazy-done img {
	background-image:url(/um/img/play_yt_thumb.svg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
}
.slider-pics .outer ul.inner li a.yt-playing span.lazy-done img {
	border:3px solid #f00;
}

@media all and (min-width: 768px) {
.slider-pics {
	position:relative;
	padding-top:12px;
}
.slider-pics .outer {
	margin:0 40px;
	height:114px;
}
.slider-pics .outer ul.inner li:not(:last-child) {
	padding-right:12px;
}
.slider-pics ul li a span.thumb,
.slider-pics ul li a span.thumb img {
	width:202px;
}
.slider-pics ul li a span.thumb,
.slider-pics ul li a span.thumb img {
	height:114px;
}
}
@media all and (max-width: 767px) {
.slider-pics {
	padding-top:6px;
}
.slider-pics .outer {
	height:80px;
}
.slider-pics .outer ul.inner li:not(:last-child) {
	padding-right:6px;
}

.slider-pics ul li a span.thumb,
.slider-pics ul li a span.thumb img {
	width:142px;
}
.slider-pics ul li a span.thumb,
.slider-pics ul li a span.thumb img {
	height:80px;
}
}

/*	arrow
============================== */
@media all and (min-width: 768px) {
.slider-pics ul.ctrl li {
	position:absolute;
	bottom:0;
}
.slider-pics ul.ctrl li.ctrl-lef {
	left:0;
}
.slider-pics ul.ctrl li.ctrl-rig {
	right:0;
}
.slider-pics ul.ctrl li a {
	position:relative;
	width:40px;
	height:114px;
	overflow:hidden;
}
.slider-pics ul.ctrl li a span {
	display: inline-block;
	color: #333;
	width: 32px;
	height: 32px;
	border: 3px solid #333;
	border-left: 0;
	border-bottom: 0;
	/**/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/**/
	position: absolute;
	top: 50%;
	left: 50%;
}
.slider-pics ul.ctrl li a.hidebtn {
	opacity:0.25;
	cursor:default;
}
.slider-pics ul.ctrl li.ctrl-lef a span {
	transform: translate(-25%, -50%) rotate(-135deg);
}
.slider-pics ul.ctrl li.ctrl-rig a span {
	transform: translate(-75%, -50%) rotate(45deg);
}
.slider-pics ul.ctrl li.ctrl-lef a:not(.hidebtn):hover {
}
.slider-pics ul.ctrl li.ctrl-rig a:not(.hidebtn):hover {
}
}
@media all and (max-width: 767px) {
.slider-pics ul.ctrl {
	display:none;
}
}


/*	article.plylist
============================== */

article.plylist nav.yt-playlist-btn ul {
	width:100%;
	/*background-color:hsla(351,100%,73%,0.4);*/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:8px;
	padding:0px;
}

article.plylist nav.yt-playlist-btn ul li a {
	display:block;
	font-weight: 700;
	text-decoration:none;
	color:#000;
	background-color:#FFFBE3;
	padding:0.8em 0.1em;
	line-height:1.5;
	position:relative;
	text-align:center;
	border: solid 2px #E4A66F;
}
article.plylist nav.yt-playlist-btn ul li a:hover {
	background-color:#FFF0B0;
}
article.plylist nav.yt-playlist-btn ul li a.yt-playing {
	background-color:#FAE584; border: solid 2px #E4A66F;
}
article.plylist nav.yt-playlist-btn ul li a.yt-playing {
	color:#000;
}
article.plylist nav.yt-playlist-btn ul li a.yt-playing:after {
	content:"Now Playing";
	background-color:#E4A66F;
	font-family: verveine, sans-serif;
    font-weight: 400;
    font-style: normal;
	/**/
	/**/
	color:#fff;
	display:inline-block;
	line-height:1.25;
	font-size:1em;
	padding:0 0.3em 0.1em;
	position:absolute;
	top:-6px;
	right:-6px;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
@media all and (min-width: 768px) {
article.plylist nav.yt-playlist-btn { padding: 8px;}
.idx article.plylist nav.yt-playlist-btn { padding: 8px 0 0 0;}
article.plylist nav.yt-playlist-btn ul li {
	width:calc((100% - 8*4px)/5);
	/*width:calc((100% - 8*2px)/3);
	width:calc((100% - 8*3px)/4);
	width:calc((100% - 8px)/2);*/
}
/*.story2 article.plylist nav.yt-playlist-btn ul li {
	width:calc((100% - 8*2px)/3);
}
.story1 article.plylist nav.yt-playlist-btn ul li {
	width:calc((100% - 8*3px)/4);
}
article.plylist nav.yt-playlist-btn ul li:nth-child(-n+3) {
  width:calc((100% - 8*2px)/3);
}

.story1 article.plylist nav.yt-playlist-btn ul li, .story6 article.plylist nav.yt-playlist-btn ul li, .story10 article.plylist nav.yt-playlist-btn ul li {
	width:calc((100% - 8*2px)/3);
}
.story1 article.plylist nav.yt-playlist-btn ul li:nth-child(1), .story1 article.plylist nav.yt-playlist-btn ul li:nth-child(2) {
	width:calc((100% - 8px)/2);
}*/
article.plylist nav.yt-playlist-btn ul li a {
	font-size:1em;
}
}
@media all and (max-width: 767px) {
article.plylist nav.yt-playlist-btn { padding: 5px;}
.idx article.plylist nav.yt-playlist-btn { padding: 5px 0 0 0;}
article.plylist nav.yt-playlist-btn ul {
	gap:5px;
	padding:0px;
}
article.plylist nav.yt-playlist-btn ul li a {
	border: solid 1px #E4A66F;
}
article.plylist nav.yt-playlist-btn ul li a.yt-playing {
	border: solid 1px #E4A66F;
}


article.plylist nav.yt-playlist-btn ul li {
  width:calc((100% - 5px)/2);
}
article.plylist nav.yt-playlist-btn ul li:nth-child(1) {
  width:100%;
}
	
/*article.plylist nav.yt-playlist-btn ul li {
	width:calc((100% - 5*2px)/3);
}
.story1 article.plylist nav.yt-playlist-btn ul li, .story6 article.plylist nav.yt-playlist-btn ul li, .story10 article.plylist nav.yt-playlist-btn ul li {
	width:calc((100% - 5*2px)/3);
}*/
/*.story1 article.plylist nav.yt-playlist-btn ul li:nth-child(1), .story1 article.plylist nav.yt-playlist-btn ul li:nth-child(2) {
	width:calc((100% - 5px)/2);
}*/
article.plylist nav.yt-playlist-btn ul li a {
	font-size:0.85em;
}
}