body {
	/* background: rgb(71,39,226); */
	/* background: linear-gradient(90deg, rgba(71,39,226,1) 10%, rgba(255,119,207,1) 50%, rgba(255,147,0,1) 92%); */
	width: 962px;
	height: 542px;
	background: rgb(213,182,153);
	background: linear-gradient(25deg, rgba(213,182,153,1) 0%, rgba(52,37,118,1) 43%, rgba(38,91,161,1) 76%);
}

/* bootstrap 改造 */
/* @media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}} */
.container {
	max-width: 96vw !important;
	padding-right: 0;
	padding-left: 0;
}

.row {
	padding: 0 10px;
	margin: 0;
	overflow-x: hidden !important;
	/* border-top: solid 1px #fff; */
}

.title {
	min-height: 0;
	margin-top: 6px;
	margin-left: 15px;
	margin-bottom: 0;
}
.title,
small {
	color: #fff !important;
}

audio {
	display: none;
	width: 200px;
}

.category {
	position: relative;
}

.black-layer {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #000;
	z-index: 99;
}

.player-block {
	height: 155px;
	padding: 0;
	margin: 0.25em;
	/* border: solid 4px #fff; */
}

.player-block:first-of-type {
	margin-left: 0;
}

.player-block:last-of-type {
	margin-right: 0;
}

/* ボタン背景色 */

.category:nth-last-of-type(3) .player-block {
	background-color: #e3017f;
	border: solid 3px #e3017f;
}

.category:nth-last-of-type(2) .player-block,
.category:nth-last-of-type(1) .player-block:nth-of-type(-n+3) {
	background-color: #8ec21f;
	border: solid 3px #8ec21f;
}

.category:nth-last-of-type(1) .player-block:nth-of-type(n+4) {
	background-color: #00a0ea;
	border: solid 3px #00a0ea;
}

/* ボタン文字色 */

.category:nth-last-of-type(3) .player-block .info-title{
	color: #e3017f !important;
}

.category:nth-last-of-type(2) .player-block .info-title,
.category:nth-last-of-type(1) .player-block:nth-of-type(-n+3) .info-title {
	color: #8ec21f !important;
}

.category:nth-last-of-type(1) .player-block:nth-of-type(n+4) .info-title {
	color: #00a0ea !important;
}

.info {
	padding-top: 0;
	padding-bottom: 0;
}

.selected {
	/* background-color: rgb(245, 255, 200); */
	border: solid 3px #fff !important;
}

.highlight {
	background-color: rgb(255, 255, 255);
	/* border-radius: 1em; */
}

.playing {
	background-color: rgb(238, 255, 170);
	/* border-radius: 1em; */
}

.playing-blink {
	animation: blink 1.5s infinite alternate;
}

@keyframes blink {
	20%   {
		box-shadow: 
			0 0 2px rgba(238, 255, 170, .1), 
			0 0 10px rgba(238, 255, 170, .4);
	}
	40%  {
		box-shadow: 
			0 0 2px #ffb,
			0 0 10px #ffb,
			0 0 20px #efa,
			0 0 30px #efa,
			0 0 40px #efa;
	}
	60% {
		box-shadow: 
			0 0 2px rgba(238, 255, 170, .1), 
			0 0 10px rgba(238, 255, 170, .4);

	}
	70% {
		box-shadow: 
			0 0 2px #ffb,
			0 0 10px #ffb,
			0 0 20px #ffb,
			0 0 30px #ffb,
			0 0 40px #efa,
			0 0 70px #efa,
			0 0 80px #efa;
	}
	80% {
		box-shadow: 
			0 0 2px  #ffb,
			0 0 10px  #ffb;
	}
	100% { 
		box-shadow: 
			0 0 2px #ffb,
			0 0 10px #ffb,
			0 0 20px #ffb,
			0 0 30px #ffb,
			0 0 40px #efa, 
			0 0 70px #efa, 
			0 0 80px #efa;
	}
}

.video-play-pause {
	display: inline-block;
	position: relative;
	color: #333333;
	font-size: 75px;
}

.video-play-pause > input {
	display: none;
}

.video-play-pause > input:not(:checked) + span::before {
	position: absolute;
	top:37px;
	left: -31px;
	transform: translateY(-50%);
	width: 0px;
	height: 0px;
	border: 0.55em solid transparent;
	border-left: 0.95em solid currentColor;
	box-sizing: border-box;
	color: #fff;
	content: "";
}

.video-play-pause > input:checked + span::before,
.video-play-pause > input:checked + span::after {
	/* position: absolute;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 0.07em;
	height: 0.3em;
	box-sizing: border-box;
	background-color: currentColor;
	content: ""; */
	position: absolute;
	top:37px;
	left: -31px;
	transform: translateY(-50%);
	width: 0px;
	height: 0px;
	border: 0.55em solid transparent;
	border-left: 0.95em solid currentColor;
	box-sizing: border-box;
	color: #fff;
	content: "";
}
.video-play-pause > input:checked + span::before {
	/* left: 38%; */
}
.video-play-pause > input:checked + span::after {
	/* left: 62%; */
}

.app-checkbox {
	display: inline-flex;
}

.app-checkbox input[type="checkbox"]{
	display: none;
}
.app-checkbox input[type="checkbox"]+label{
	cursor: pointer;
	display: inline-block;
	box-sizing: content-box;
	position: relative;
	width: 40px;
	height: 10px;
	background-color: #FFF;
	border: 2px solid #CCC;
	border-radius: 10px;
}
.app-checkbox input[type="checkbox"]:checked+label{
	background-color: #0078db;
	border-color: #0078db;
}
.app-checkbox input[type="checkbox"]+label:before{
	content: "";
	position: absolute;
	display: block;
	box-sizing: border-box;
	width: 20px;
	height: 20px; /* widthと同じ 上のラベルの高さに揃える */
	left: 0;
	top: -5px;
	-webkit-transform: translateX(-10%);
	transform: translateX(-10%);
	border-radius: 50%;
	background-color: #FFF;
	border: 2px solid #CCC;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.app-checkbox input[type="checkbox"]:checked+label:before{
	left: auto;
	right: auto;
	-webkit-transform: translateX(110%);
	transform: translateX(110%);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	border-color: #0078db;
}

.description {
	position: relative;
	display: flex;
	flex-direction: column;
}

.description > p {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	height: 2.8em;
	line-height: 1.4em;
	font-weight: bold;
	font-size: 0.8em;
}

.info-title {
	padding-left: 32px;
	margin-top: 15px !important;
	margin-bottom: 46px !important;
	text-align: left;
	font-weight: 700;
	font-size: 10px;
}

.info-title {
	line-height: 1em;
}

.left-arrow {
	display: none;
	position: absolute;
	left: -5%;
	top: 0;
	bottom: 0;
	margin: auto;
}
.left-arrow::before {
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	border-top: solid 3px #fff;
	border-right: solid 3px #fff;
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
	top: 50%;
	left: 3px;
	margin-top: -3px;
}

.right-arrow {
	position: absolute;
	right: -5%;
	top: 0;
	bottom: 0;
	margin: auto;
}
.right-arrow::before {
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	border-top: solid 3px #fff;
	border-right: solid 3px #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: -3px;
	margin-top: -3px;
}

/* 10/8 レイアウト調整(縮小) */

h4 {
	margin-top: 6px;
	
	font-size: 1.2em;
}

#info-areas {
	padding-top: 10px;
}

label {
	margin-bottom: 0;
}