@charset "UTF-8";

/* channel
------------------------------------------------*/
/* header */
#channel #breadcrumb {
	margin-bottom: 0;
}
#channel #main > .header {
	display: flex;
    align-items: center;
	justify-content: center;
	padding: 8px 10px;
	position: relative;
}
#channel #main > .header h1 {
	text-align: center;
	padding-left: .5rem;
}
#channel #main > .header h1 i {
	margin-left: .3rem;
	color: #666;
	vertical-align: middle;
}
#channel #main > .header .thumbnail {
	line-height: 1;
	width: 60px;
}
#channel #main > .header .thumbnail img {
	height: auto;
}
@media(max-width: 767px) {
	#channel #main > .header h1 {
		font-size: 1.1rem;
	}
	#channel #main .header {
		border-bottom: 1px solid #ddd;
	}
}
@media(min-width: 768px) {
	#channel #main > .header h1 {
		font-size: 1.5rem;
		max-width: 550px;
	}
}

#channel #add-favorite {
	position: absolute;
}
#channel #favorite-btn {
	line-height: 1;
	background: #b71c1c;
	display: block;
	color: #fff;
}
#channel #favorite-btn.already,
#channel #favorite-btn.max {
	color: #555;
	background: #f0f0f0;
}
#channel #favorite-btn.already::after {
	content: "済み";
}
@media(max-width: 768px) {
	#channel #add-favorite {
		top: -29px;
		right: 0;
	}
	#channel #favorite-btn {
		font-size: .7rem;
		padding: 9px;
	}
}
@media(min-width: 768px) {
	#channel #add-favorite {
		top: 5px;
		right: 0;
	}
	#channel #favorite-btn {
		border-radius: 3px;
		font-size: .75rem;
		padding: 8px 10px;
	}
}

/* lnav */
.channel-lnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	border-bottom: 3px solid #b71c1c;
}
.channel-lnav li {
	flex: 1;
	background: #f0f0f0;
	font-size: .75rem;
	min-width: 100px;
}
.channel-lnav li a {
	display: block;
	color: #666;
	padding: 2px 3px;
	text-align: center;
	white-space: nowrap;
}
.channel-lnav li a img {
	vertical-align: middle;
}
.channel-lnav li.selected {
	background: #b71c1c;
}
.channel-lnav li.selected a {
	color: #fff;
}
.channel-lnav li a:hover{
	background: #b71c1c;
	color: #fff;
}
.channel-lnav li:nth-child(-n+4) {
	flex-shrink: 1;
}
.channel-lnav li:nth-child(n+5) {
	flex-shrink: 2;
}
@media(min-width:768px){
	/* lnav 9 */
	.channel-lnav .channel-lnav9 li:nth-child(-n+4) {
		flex-basis: 24%;
	}
	.channel-lnav .channel-lnav9 li:nth-child(n+5) {
		flex-basis: 19%;
	}
	/* lnav 8 */
	.channel-lnav .channel-lnav8 li:nth-child(-n+4) {
		flex-basis: 13%;
	}
	.channel-lnav .channel-lnav8 li:nth-child(n+5) {
		flex-basis: 10%;
	}
	/* lnav 7 */
	.channel-lnav .channel-lnav7 li {
		flex-basis: 14%;
	}
	.channel-lnav .channel-lnav6 li {
		flex-basis: 16%;
	}
	.channel-lnav .channel-lnav5 li {
		flex-basis: 19%;
	}
}
@media(max-width:767px){
	/* lnav 9 & 6 */
	.channel-lnav .channel-lnav9 li,
	.channel-lnav .channel-lnav6 li {
		flex-basis: 33%;
	}
	/* lnav 8 */
	.channel-lnav .channel-lnav8 li:nth-child(-n+4) {
		flex-basis: 49%;
	}
	.channel-lnav .channel-lnav8 li:nth-child(n+5) {
		flex-basis: 19%;
	}
	/* lnav 7 */
	.channel-lnav .channel-lnav7 li:nth-child(-n+4) {
		flex-basis: 49%;
	}
	.channel-lnav .channel-lnav7 li:nth-child(n+5) {
		flex-basis: 33%;
	}
	/* lnav 5 */
	.channel-lnav .channel-lnav5 li:nth-child(-n+2) {
		flex-basis: 49%;
	}
}

/* index */
#channel section.index {
	padding: 20px 0;
}
#channel section.index ul{
	display: flex;
	justify-content: center;
}
#channel section.index li{
	position: relative;
	line-height: 1.4;
}
#channel section.index h2 {
	color: #666;
	font-size: .85rem;
}
#channel section.index li p{
	font-weight: 800;
	font-size: .85rem;
	line-height: 1.3;
}
#channel section.index li p:last-child{
	font-weight: normal;
}
#channel section.index i{
	font-size: 1.2rem;
	margin-right: 5px;
	vertical-align: middle;
}
#channel section.index .notice {
	font-size: .7rem;
	line-height: 1.3;
	padding: 10px;
	color: #999;
}
#channel section.index .subscriber {
	text-align: center;
}
#channel section.index .subscriber-count {
/*	font-family: "Hiragino Sans w6";*/
	font-weight: 800;
	line-height: 1;
}
#channel section.index .subscriber-count.kiriban {
	color: #c00;
}
#channel section.index .subscriber-notice {
	color: #666;
	display: none;
}
#channel section.index .subscriber-default {
	display: none;
}
#channel #channel-id,
#channel #youtube-id,
#channel #user-id,
#channel #tick {
	display: none;
}


@media(max-width: 767px) {
	#channel section.index .subscriber {
		margin-bottom: 20px;
	}
	#channel section.index .subscriber-count {
		font-size: 14vw;
	}
	#channel section.index .subscriber-notice {
		margin: 0 20px;
		line-height: 1.5;
		font-size: .7rem;
	}
	#channel section.index ul {
		flex-flow: column wrap;
	}
	#channel section.index li{
		padding: 0 10px;
		line-height: 1.4;
		margin-bottom: 5px;
	}
	#channel section.index li h2 {
		width: 8.5em;
		float: left;
		clear: both;
	}
	#channel section.index li div {
		padding-left: 9em;
	}
	#channel section.index li div p {
		display: inline-block;
	}
	#channel section.index li p span{
		font-size: 1rem;
	}
}
@media(min-width: 768px) {
	#channel section.index .subscriber-count {
		font-size: 7.5rem;
	}
	#channel section.index ul{
		padding-bottom: 10px;
		margin: 20px;
	}
	#channel section.index li {
		text-align: center;
		padding: 10px 0;
		flex-basis: 33%;
	}
	#channel section.index h2 {
		margin-bottom: 5px;
	}
	#channel section.index li p span{
		font-size: 1.2rem;
	}
}
/* comment
--------------------------------------------------------------------*/
#channel #comment-list {
	min-height: 94px;
}

/* comment list */
.comment-list {
	margin-top: 1.3rem;
}
.comment-list li {
/*	display: flex; */
	padding: 1.5em 0;
	border-bottom: 1px solid #ddd;
}
.comment-list li:first-child {
	padding-top: 0;
}
.comment-list li ul {
	margin-top: 1.5em;
}
.comment-list li ul li:last-child {
	border-bottom: none;
}
.comment-list .user-thumbnail,
.comment-list .channel-thumbnail {
	width: 40px;
	height: 40px;
	margin-right: 16px;
	min-width: 40px;
}
.comment-list .comment-header {
	line-height: 1;
	margin-bottom: .2rem;
}
.comment-list .comment-header > p {
	display: inline-block;
}
.comment-list .comment-header .user-name {
	margin-bottom: 5px;
	margin-right: 10px;
	font-weight: 800;
}
.comment-list .comment-header .channel-name {
	margin-right: 10px;
}
.comment-list .comment-header .channel-name a,
.comment-list .comment-header .user-name a {
	color: #000;
	text-decoration: underline;
}
.comment-list .comment-header .comment-date,
.comment-list .comment-header .channel-name {
	color: #666;
	font-size: .7rem;
}
.comment-list .comment-header .comment-delete {
	cursor: pointer;
}
.comment-list .comment-header .comment-delete::after {
	content: "削除";
	font-size: .7rem;
	margin-left: 1rem;
}
.comment-list .comment-reply {
	cursor: pointer;
	display: block;
	margin: .5em 0 0 0;
	padding: 0;
	line-height: 1;
}
.comment-list .comment-reply::after {
	content: "返信";
	font-size: .7rem;
}
.comment-list .reply-form {
	margin-top: .7em;
}
.comment-list .reply-form textarea {
	width: 100%;
	height: 3em;
	border: 1px solid #ccc;
	overflow: auto;
}
.comment-list .comment-body {
	line-height: 1.5;
	word-break: break-all;
}
.comment-list .reply-submit {
	background: #069;
	border: none;
	border-radius: 4px;
	color: #fff;
	padding: 2px 10px;
	-webkit-appearance: none;
}
#channel .comment .loading {
	text-align: center;
	padding: 15px;
}
#channel #comment-more,
#channel .comment-back {
	text-align: center;
	margin: 1.5em 0;
}
#channel #comment-more {
	display: none;
}
#channel #comment-more a,
#channel .comment-back a {
	display: inline-block;
	color: #333;
	text-decoration: none;
	border: 1px solid #ccc;
	border-radius: 5px;
	line-height: 1;
	padding: 10px 20px;
}
#channel #comment-more a:hover,
#channel .comment-back a:hover {
	background: #b71c1c;
	color: #fff;
}

/* comment form */
#channel #comment-form {
	margin: .5em 0 2em 0;
	border: 1px solid #ccc;
	padding: 15px;
	display: none;
}
#channel .comment-form-header {
	display: table;
	margin-bottom: .5em;
}
#channel .comment-form-header .user-thumbnail {
	width: 40px;
	height: 40px;
	line-height: 1;
}
#channel .comment-form-header .user-thumbnail,
#channel .comment-form-header h2 {
	display: table-cell;
	vertical-align: middle;
}
#channel #comment-form h2 {
    font-weight: 800;
    font-size: .9rem;
	padding-left: 7px;
}
#channel .comment #comment-body {
    background-color: #fcfcfc;
    border: 1px solid #ccc;
	padding: 5px 5px 0;
	width: calc(100% - 12px);
	height: 100px;
	resize: none;
	line-height: 1.5;
}
#channel .comment #comment-btn {
	background: #069;
	border: none;
	border-radius: 4px;
	color: #fff;
	font-size: .85rem;
	padding: 8px 30px;
	-webkit-appearance: none;
	cursor: pointer;
}
#channel .comment-form-footer > p.notice {
	font-size: .7rem;
	line-height: 1.5;
	color: #666;
}
#channel #comment-signin {
	background: #f8f8f8;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 4rem;
}
#channel .comment .signup-btn a {
	display: inline-block;
	background: #b71c1c;
	border: none;
	border-radius: 5px;
	color: #fff;
	padding: 8px 30px;
	margin: 1rem;
}
#channel .count-stop-notice {
	background: #f8f8f8;
	padding: 1.5rem;
	text-align: center;
	margin: 2rem 0;
}
#channel .count-stop-notice button {
	display: inline-block;
	background: #b71c1c;
	border: none;
	border-radius: 5px;
	color: #fff;
	padding: 8px 30px;
	margin: 1rem 0 0;
	cursor: pointer;
	font-size: inherit;
}
@media(max-width: 999px) {
	.comment-list {
		margin: 3%;
	}
	#channel .comment .comment-btn-block {
		text-align: center;
		margin: 10px 0 0 0;
	}
}
@media(min-width: 1000px) {
	#channel .comment .comment-btn-block {
		text-align: right;
	}
	#channel .comment-form-footer {
		display: table;
		width: 100%;
	}
	#channel .comment-form-footer > p {
		display: table-cell;
		vertical-align: top;
	}
}
/* data */
#channel section.description table {
	border-collapse: collapse;
	width: 100%;
	margin-top: 2em;
}
#channel section.description th,
#channel section.description td {
	font-size: .75rem;
	text-align: left;
	padding: 8px;
	line-height: 1.3;
	border: 1px solid #ddd;
}
#channel section.description th {
	background: #f8f8f8;
	width: 9em;
}
#channel section.record .notice,
#channel section.description .notice {
	font-size: .7rem;
	line-height: 1.3;
	margin-bottom: 20px;
	color: #999;
}

/* record */
#channel section.record ul {
	margin-bottom: 1em;
}
#channel section.record li {
	list-style-type: circle;
	margin-left: 1em;
	font-size: .85rem;
}
#channel section.record li .rank {
	font-weight: 800;
}
@media(max-width: 767px) {
	#channel section.record ul {
		margin-left: .5em;
	}
	#channel section.record li {
		line-height: 1.5;
		margin-bottom: .7em;
	}
	#channel section.record li > span {
		display: block;
		margin-left: 1em;
	}
}

/* news */ 
#channel #main section.news {
	display: block;
	margin: 0;
}
#channel #main section.news .news-list li {
	padding: .5em 1em;
	line-height: 1.5;
}
#channel #main section.news .news-list li:first-child {
	border-top: 0;
}
#channel #main section.news .news-list li:last-child {
	border-bottom: 0;
}
#channel #main section.news h1 {
	position: relative;
}
#channel #main section.news h1 .news-more a {
	position: absolute;
	border-radius: 4px;
	font-size: .75rem;
	right: 7px;
	top: 6px;
	background: #069;
    color: #fff;
    line-height: 1;
    display: block;
    text-decoration: none;
    padding: 6px 10px;
}

/* tag */
#channel #tag-edit-btn {
	border-radius: 4px;
  background: #069;
  color: #fff;
  display: block;
  text-decoration: none;
  padding: 1px 10px;
}
@media(max-width: 767px) {
	#channel #tag-edit-btn {
		margin: auto;
	}
}

/* description */
#channel #main .inner {
	line-height: 1.7;
}
#channel #tab-index section.description {
	margin-bottom: 20px;
}
@media(max-width: 767px){
	#channel #tab-index section.description > div.inner {
		font-size: .75rem;
	}
	#channel section.description > .description {
		position: relative;
	}
	#channel section.description > .description.close {
		height: 100px;
		overflow: hidden;
	}
	#channel section.description > .description.close::after {
		content: "";
		width: 100%;
		height: 100%;
		z-index: 100;
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		background:url(/common/img/bg_trans.png) repeat-x bottom;
	}
	#channel section.description .open {
		text-align: center;
	}
	#channel section.description .open a {
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 5px 15px;
		line-height: 1;
		color: #333;
	}
}
@media(min-width: 768px) {
	#channel #tab-index section.description > div.inner {
		font-size: .85rem;
	}
	#channel section.description .open {
		display: none;
	}
}


/* children */
#channel section.children {
	margin-bottom: 20px;
}
#channel .channel-list li:first-child {
	border-top: none;
}
#channel .channel-list li:last-child {
	border-bottom: 1px solid #ddd;
}

/* chart */
#channel section.chart #chart,
#channel section.chart #chart-like-rate,
#channel section.chart #chart-avg-count {
	text-align: center;
}
#channel section.chart .chart-area {
	position: relative;
}
#channel section.chart .notice,
#channel section.count-table .notice {
	font-size: .7rem;
	line-height: 1.3;
	color: #999;
}
#channel section.chart .loading {
	text-align: center;
	padding: 10px;
}
#channel nav.back {
	text-align: center;
	margin: 20px 0;
}
#channel nav.back a{
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 5px 15px;
	line-height: 1;
	color: #333;
}
#channel section.chart .kiriban {
	margin-bottom: .5em;
}
#channel #video-type-chart {
	max-height: 400px;
	height: 70vw;
}
@media(max-width: 767px){
	#channel section.chart #subscriber-chart,
	#channel section.chart #video-count-chart,
	#channel section.chart #view-count-chart,
	#channel section.chart #daily-chart,
	#channel section.chart #chart-avg-count {
		height: 300px;
	}
}
@media(min-width: 768px){
	#channel section.chart #subscriber-chart,
	#channel section.chart #video-count-chart,
	#channel section.chart #view-count-chart,
	#channel section.chart #daily-chart,
	#channel section.chart #chart-avg-count {
		height: 400px;
	}
}
#channel section.count-table .scroll table {
	width:100%;
}
#channel section.count-table .scroll{
	overflow: auto;
	white-space: nowrap;
}
#channel section.count-table .scroll::-webkit-scrollbar{
	height: 5px;
}
#channel section.count-table .scroll::-webkit-scrollbar-track{
	background: #F1F1F1;
}
#channel section.count-table .scroll::-webkit-scrollbar-thumb {
	background: #BCBCBC;
}
#channel section.count-table .notice {
	padding: 10px;
}
#channel section.count-table table {
	font-size: .75rem;
	width: 100%;
	margin-bottom: 3em;
	border-collapse: collapse;
}
#channel section.count-table th,
#channel section.count-table td {
	text-align: center;
	padding: 10px 7px;
	line-height: 1;
}
#channel section.count-table tr:nth-child(2n) td {
	background: #f8f8f8;
}
#channel section.count-table tr td:nth-child(2) {
	color: #999;
}
#channel section.count-table .plus {
	color: #900;
}
#channel section.count-table .minus {
	color: #090;
}
#channel section.count-table .holiday {
	color: #c00;
}

#channel section.count-table.trend tr td:nth-child(2) {
	padding-left: 0;
	padding-right: 0;
}
#channel .chart-area > div {
	height: 50vw;
	max-height: 320px;
}

@media(min-width: 769px) {
	#channel section.chart .inner {
		padding-left: 0;
		padding-right: 0;
	}
}

@media(min-width: 768px) and (max-width: 1020px) {
	#channel #main .inner {
		margin-left: 10px;
		margin-right: 10px;
	} 
}

.graph-nav {
	display: table;
	margin-bottom: 15px;
}
.graph-nav li {
	display: table-cell;
	border-right: 1px solid #fff;
}
.graph-nav a {
	display: block;
	padding: 10px 18px;
	line-height: 1;
	cursor: pointer;
	background: #f0f0f0;
}
.graph-nav a.selected {
	background: #b71c1c;
	color: #fff;
}

#channel section.related .pager {
	margin-bottom: 1.5em;
}
#channel section.related .channel-list li .thumbnail a {
	overflow: hidden;
	display: block;
}
@media(max-width: 767px) {
	#channel section.related .channel-list li .thumbnail a {
		max-height: 88px;
	}
}
@media(min-width: 768px) {
	#channel section.related .channel-list li .thumbnail {
		width: 150px;
	}
	#channel section.related .channel-list li .thumbnail a {
		max-height: 150px;
	}
	#channel section.related .channel-list li h2 {
		font-size: 1rem;
	}
}

/* video-list */
#channel .video-list li {
	display: table;
}
#channel .video-list li > .thumbnail,
#channel .video-list li > div {
	display: table-cell;
	vertical-align: top;
}
#channel .video-list li > .thumbnail {
	padding: 0 10px;
	line-height: 0;
	position: relative;
}
#channel .video-list li h2 {
	line-height: 1.3;
	margin-bottom: .5em;
    word-break: break-word;
}
#channel .video-list li h2 img {
	vertical-align: top;
}
#channel .video-list li aside > p i {
	margin-right: 4px;
	position: relative;
	top: .2rem;
}
/* #channel .video-list .thumbnail.video:before, */
#channel .video-list .thumbnail.short:before,
#channel .video-list .thumbnail.live:before {
	display: block;
	position: absolute;
	top: 0;
	left: 10px;
	color: #fff;
	line-height: 1;
	font-size: .75rem;
	padding: 5px 2px;
	min-width: 3em;
	text-align: center;
}
/*
#channel .video-list .thumbnail.video:before {
	content: "video";
}
*/
#channel .video-list .thumbnail.short:before {
	content: "short";
	background: #0a0;
}
#channel .video-list .thumbnail.live:before {
	content: "live";
	background: #a00;
}
@media(max-width: 767px) {
	#channel .video-list {
		padding-top: 10px;
	}
	#channel .video-list li {
		margin-bottom: 10px;
	}
	#channel .video-list li > .thumbnail {
		width: 160px;
	}
	#channel .video-list li > div {
		padding-right: 10px;
	}
	#channel .video-list li h2 {
		font-size: .85rem;
	}
	#channel .video-list li aside {
		font-size: .7rem;
	}
	#channel .video-list li aside > p {
		display: block;
		line-height: 1.3;
	}
	#channel .video-list li aside i {
		font-size: .9rem;
	}
	#channel .video-list li .desc {
		display: none;
	}
}
@media(min-width: 768px) {
	#channel .video-list {
		padding-top: 20px;
	}
	#channel .video-list li {
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 1px solid #ddd;
		width: 100%;
	}
	#channel .video-list li > .thumbnail {
		width: 230px;
		padding-right: 20px;
	}
	#channel .video-list li h2 {
		font-size: 1rem;
		font-weight: bold;
	}
	#channel .video-list li aside {
		font-size: .8rem;
		margin-bottom: 10px;
	}
	#channel .video-list li aside > p {
		display: inline-block;
		line-height: 1.3;
		margin-right: 10px;
	}
	#channel .video-list li aside i {
		font-size: .85rem;
	}
	#channel .video-list li .desc {
		font-size: .75rem;
		line-height: 1.6;
		color: #666;
		word-break : break-all;
	}
}

/* tab */
#channel .tab:not(#tab-rank-chart) {
	display: none;
}
#channel .tab#tab-index {
	display: block;
}
#channel .tab h1 {
	line-height: 1.4;
	padding: 8px 15px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	position: relative;
}
#channel .tab h1 i {
	margin-right: 4px;
	position: relative;
	font-size: 1rem;
	top: .2rem;
}
#channel #tab-desc section > div {
	padding: 0 10px 10px 10px;
	font-size: .8rem;
}

@media(max-width: 767px){
	#channel .tab h1 {
		font-size: .9rem;
	}
}
@media(min-width: 768px){
	#channel .tab h1 {
		font-size: 1rem;
	}
}


/* refresh button */
#channel #refresh-btn {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
	line-height: 1.7rem;
	padding: 0 8px;
	background: #b71c1c;
	color: #fff;
	font-size: .75rem;
}
#channel #refresh-btn i {
	font-size: 1.4rem;
	top: -.1rem;
	vertical-align: middle;
	max-width: 24px;
}
#channel #refresh-btn.disabled {
	pointer-events: none;
	opacity: .6;
}
#channel #refresh-btn.spin i.material-icons {
	animation: spin 1.5s linear infinite;
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

@media(min-width: 375px){
	#channel h1 > .last-update {
		color: #666;
		font-size: .7rem;
		margin-left: .5em;
	}
}

.video-list aside p::before {
	content: "";
	background-size: cover;
	display: inline-block;
	height: .85rem;
	width: .85rem;
	vertical-align: middle;
	margin-right: .2em;
}
.video-list .view-count::before {
  background-image: url("/common/img/icon_play_circle_filled.svg");
}
.video-list .date::before {
  background-image: url("/common/img/icon_schedule.svg");
}
.video-list .likes::before {
  background-image: url("/common/img/icon_thumb_up.svg");
}
#video-list {
	min-height: 720px;
}
#video-list .loading {
	text-align: center;
	padding: 2em 0;
}

/* channel video */
#channel-video {
	overflow-wrap: break-word;
	word-break: break-all;
}
#channel-video h2 {
	font-size: 1.1rem;
	font-weight: 800;
	margin: 1em 0;
}
#channel-video h3 {
	margin-bottom: 1em;
	font-weight: 800;
}
#channel-video dl {
	display: flex;
	flex-wrap: wrap;
	margin: 1em 0 3em 0;
	padding: 1em 0 3em 0;
	border-bottom: 1px solid #999;
}
#channel-video dt {
	width: 10em;
}
#channel-video dd {
	width: calc(100% - 10em);
}
#video-summary,
#video-description {
	padding-bottom: 2em;
	margin-bottom: 2em;
}
#video-summary .notice {
	font-size: .75rem;
	margin-top: 1em;
	line-height: 1.5;
}
@media(max-width: 970px) {
	#video-description {
		max-height: 30vh;
		overflow: hidden;
		position: relative;
	}
	#read-more {
		position: absolute;
		bottom: 0;
		padding: 1em;
		width: 100%;
		text-align: center;
	    background: rgba(255,255,255,.8);
	}
}
@media (min-width: 971px) {
	#read-more {
		display: none;
	}}

#read-more:hover #read-more-btn {
	background: #b71c1c;
	color: #fff;
}
.opened #read-more {
	position: relative;
}
#read-more-btn {
	cursor: pointer;
    color: #333;
    text-decoration: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 1;
    padding: 10px 20px;
}
#video-description.opened {
	max-height: 1000vh;
	transition: .5s;
}
@media (max-width: 970px) {
	#channel .embed-youtube {
	  width: 100%;
	  height: 50vw;
	}
	#channel .embed-youtube iframe {
	  width: 100% !important;
	  height: 100% !important;
	}
}
@media (max-width: 1000px) {
	#channel-video,
	#channel-latest-video {
		padding: 0 1em;
	}
}
@media (min-width: 971px) {
	#channel .embed-youtube iframe {
	  width: 970px !important;
	  height: 560px !important;
	}
	#channel lite-youtube {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	@supports not (aspect-ratio: 16 / 9) {
    	#channel lite-youtube {
	    	width: 100%;
			padding-bottom: 56.25%;
			position: relative;
		}
	}
}
@media (min-width: 1145px) and (max-width: 1345px){
	#channel .embed-youtube iframe {
	  width: 100% !important;
	  height: 450px !important;
	}
}
@media (min-width: 1346px) {
	#channel lite-youtube {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}
#reload-btn {
	display: block;
	background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    appearance: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 1;
    padding: 10px 20px;
    margin: 1em auto;
}
#reload-btn:hover {
	background: #b71c1c;
	color: #fff;
}
#channel-latest-video {
	margin-bottom: 3em;
	overflow-wrap: break-word;
	word-break: break-all;
}
#channel-latest-video li {
	list-style-type: disc;
	margin-left: 1.5em;
}

@media(min-width: 481px) and (max-width: 969px) {
	#channel section.info li{
		width:46%;
		padding:4% 2%;
	}
	#channel section.info li:nth-child(2n+1){
		clear:both;
	}
}
@media(min-width: 375px) and (max-width: 480px) {
	#channel section.info li{
		width: 48%;
		padding: 4% 1%;
	}
	#channel section.info li:nth-child(2n+1){
		clear:both;
	}
	#channel section.info li h2{
		font-size: .8rem;
	}
	#channel section.info li p{
		font-weight:bold;
		font-size: .8rem;
	}
	#channel section.info li p:last-child{
		font-weight: normal;
	}

	#channel section.info li p span{
		font-size: .9rem;
	}
}
@media(max-width: 374px) {
	#channel section.info ul{
		display:block;
		width:auto;
		border-bottom:none;
	}
	#channel section.info li{
		width:auto;
		display:block;
		float:none;
		padding:20px 0;
		border-bottom:1px solid #DDD;
	}
}
#channel section.description .description {
	word-break: break-all;
	font-size: .8rem;
	line-height: 1.8;
}
@media(min-width: 768px) {
	#channel section.description input,
	#channel section.description label {
		display: none;
	}
}
@media(max-width:767px){
	#channel section.description .description {
		position: relative;
	}
	#channel section.description .expand {
		max-height: 300px;
		overflow: hidden;
		position: relative;
		transition: .5s;
	}
	#channel section.description .expand::before {/*グラデーション部分*/
    	content: "";
	    position: absolute;
	    width: 100%;
	    height: 50%;
	    bottom: 0;
	    background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
	    pointer-events: none;
	    transition: 1s;
	}
	#channel section.description input {
  		visibility: hidden;
	} 
	#channel section.description label {
		position: absolute;
		left: 50%;
    	transform: translateX(-50%);

		bottom: -1em;
		display: block;
		font-size: .8rem;
		padding: 10px 20px;
		border: 1px solid #ccc;
		border-radius: 5px;
		box-shadow:-5px 0 white;
		line-height: 1;
		z-index: 100;
		cursor: pointer;
		text-transform: uppercase;
	}		 
	#channel section.description label:before {/*閉じている際のボタンのテキスト*/
		content: "続きを読む";
	}	 
	#channel section.description input:checked + label:before {/*開いているときは:checked状態なので、その際はボタンテキストを変える*/
		content: "閉じる"
	}	 
	#channel section.description input[type=checkbox]:checked ~ .expand {
		max-height: none;
		padding-bottom: 2em;
	}	 
	#channel section.description input[type=checkbox]:checked ~ .expand:before {
		opacity: 0
	}
}
.video-type-chart h3 {
	text-align: center; 
}
.video-type-chart {
	margin-top: 2em;
	display: flex;
	justify-content: space-between;
}
.video-type-chart .chart-area {
	width: 48%;
}