[v-cloak] {
  display: none;
}


#app > .tagList li {
    display: inline-block;
	font-size: 15px;
	font-weight: bold;
	background: #999;
	color: #fff;		
	line-height: 1;
	padding: 5px 15px;
	border-radius: 13px;
	cursor: pointer;
	@media (max-width: 767.98px){
    	font-size: 11px;	
    }
}
#app > .tagList li:hover {
    opacity: .7;
}
#app > .tagList li.selected {
    background: #ff91b0;
}

#app > .tagList li + li {
    margin-left: 15px;
    @media (max-width: 767.98px){
    	margin-bottom: 10px;	
    }
}

#app > .tagList li.c01.selected {
	background: #6faedf; /* ブルー */
}
#app > .tagList li.c02.selected {
	background: #e28900; /* オレンジ */
}
#app > .tagList li.c03.selected {
	background: #a3c760; /* グリーン */
}
#app > .tagList li.c04.selected {
	background: #ed9ccd; /* ピンク */
}
#app > .tagList li.c05.selected {
	background: #f0d500; /* イエロー */
}

.movieList {
    margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 30px;
	@media (max-width: 1200px) {
		gap: 20px;
	}
	@media (max-width: 767.98px) {
		margin-top: 20px;
		gap: 15px;
    }
}

.movieList > li {
    width: calc((100% - (30px * 2)) / 3);
    position: relative;
    @media (max-width: 900px) {
	    width: calc((100% - (15px * 1)) / 2);
    }
    @media (max-width: 767.98px){
	    width: 100%;
	}
}


.movieList > li a {
	text-decoration: none;
}
.movieList > li .ttl {
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	margin: 5px 0 10px;
	color: #202020;
	line-height: 1.5;
	@media (max-width: 767.98px){
		padding: 5px;
		margin: 0;
		font-size: 13px;
		position: absolute;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    line-height: 1.3;
	    background: rgba(0,0,0, .6);
	    color: #fff;
	    z-index: 1;
	    overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 任意の行数を指定 */
	}
}
.movieList > li figure {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	@media (max-width: 767.98px){
		aspect-ratio: 16 / 7;
	}
}
.movieList > li figure img {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    scale: 1.3;
}
.movieList > li .tagList {
	margin-top: 10px;
	@media (max-width: 767.98px){
		margin: 0;
	    position: absolute;
	    top: 5px;
	    left: 5px;
    }
}
.movieList > li .tagList li {
	display: inline-block;
	
}
.movieList > li .tagList li span {
	display: inline-block;
	background: rgba(0, 0, 0, .8);
	color: #fff;
	padding: 4px 10px;
	font-weight: bold;
	line-height: 1.2;
	font-size: 13px;
	border-radius: 20px;
	@media (max-width: 767.98px){
		font-size: 10px;
		padding: 3px 10px;
	}
}
.movieList > li .tagList li.c01 span {
	background: #6faedf; /* ブルー */
}
.movieList > li .tagList li.c02 span {
	background: #e28900; /* オレンジ */
}
.movieList > li .tagList li.c03 span {
	background: #a3c760; /* グリーン */
}
.movieList > li .tagList li.c04 span {
	background: #ed9ccd; /* ピンク */
}
.movieList > li .tagList li.c05 span {
	background: #f0d500; /* イエロー */
}