@charset "utf-8";

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------
ビデオ
--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.PageBody.-video #tags { display:flex; justify-content:center; padding:80px 16px 64px; }
.PageBody.-video #tags li { display:flex; justify-content:center; align-items:center; min-width:64px; box-sizing:border-box; cursor:pointer; padding:12px 16px; font-size:11px; font-feature-settings:"palt"; letter-spacing:.1em; margin-right:8px; border-radius:100px; }
.PageBody.-video #tags li.select { pointer-events:none; }

.PageBody.-video .category { overflow:hidden; padding:16px; }
.PageBody.-video .category ul { display:flex; flex-wrap:wrap; margin-right:-1px; }
.PageBody.-video .category ul li { width:25%; padding-right:1px; box-sizing:border-box; margin-bottom:80px; }
.PageBody.-video .category ul li .thumArea { overflow:hidden; width:100%; padding-top:56.25%; position:relative; cursor:pointer; }
.PageBody.-video .category ul li .thumArea .playicon { width:48px; height:48px; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); z-index:3; }
.PageBody.-video .category ul li .thumArea .img { width:100%; position:absolute; top:0; right:0; transform:scale(1.01); width:calc(100% + 1px); transition-duration:0.2s; z-index:1; pointer-events:auto; }
.PageBody.-video .category ul li .textArea { padding:26px 40px 0 0; }
.PageBody.-video .category ul li .textArea .name p.tag { opacity:.7; }
.PageBody.-video .category ul li .textArea .name p.tag.-new { opacity:1; }
.PageBody.-video .category ul li .textArea .name p.tag.-notyoutube { opacity:1; }

.PageBody.-video .category ul li .textArea .name { font-size:0; margin-bottom:4px; }
.PageBody.-video .category ul li .textArea .name p { display:block; }
.PageBody.-video .category ul li .textArea .name p.title { font-size:12px; line-height:2; margin-top:16px; font-feature-settings:"palt"; letter-spacing:.1em; }

/* hover */
.hover .PageBody.-video #tags li:hover { opacity:.7; }
.hover .PageBody.-video .category ul li .thumArea:hover .img { transform:scale(1.05) rotate(0.1deg); opacity:.8; }

/* normal */
.normal .PageBody.-video #tags li { background:rgba(0,0,0,.1); }
.normal .PageBody.-video #tags li.select { background:#223a5f; color:rgba(255,255,255,.9); }
.normal .PageBody.-video .category ul li .textArea .name p.title { color:#333; }

/* dark */
.dark .PageBody.-video #tags li { background:#111; color:rgba(255,255,255,.9); }
.dark .PageBody.-video #tags li.select { background:#AA8B5D; color:rgba(0,0,0,.9); }
.dark .PageBody.-video .category ul li .textArea .name p.title { color:rgba(255,255,255,.9); }

.PageBody.-video .category ul li .textArea .name p.tag.-new { background:rgba(224, 57, 126, 1); padding:2px 4px 2px; margin-right:8px; font-size:11px; box-sizing:border-box; position:relative; top:-2px; color:rgba(255,255,255,.9); }
.PageBody.-video .category ul li .textArea .name p.tag.-notyoutube { background:rgba(43, 56, 94, 1); padding:2px 4px 2px; margin-right:8px; font-size:11px; box-sizing:border-box; position:relative; top:-2px; color:rgba(255,255,255,.9); }
.PageBody.-video .category ul li .textArea .name p.tag.-new::after { display:none; }
.PageBody.-video .category ul li .textArea .name p.tag.-notyoutube::after { display:none; }

.PageBody.-video .category ul li .textArea .name p.tag { display:inline-block; font-family:'Roboto', sans-serif; font-weight:400; letter-spacing:.04em; font-size:12px; line-height:1; }
.PageBody.-video .category ul li .textArea .name p.tag::after { content:"｜"; display:inline-block; font-size:12px; padding:0 4px;  }
.PageBody.-video .category ul li .textArea .name p.date { display:inline-block; font-family:'Roboto', sans-serif; font-weight:400; letter-spacing:.04em; font-size:12px; line-height:1; opacity:.7; }

@media screen and (max-width:1600px) { /* pc3 macbookpro15 */ 
	.PageBody.-video .category ul li { width:33.33%; }
}
@media screen and (max-width:1199px) { /* pc1 tablet横表示 ＆ PC小 */ 
	.PageBody.-video .category ul li { width:50%; }
}
@media screen and (max-width:1023px) { /* tablet tablet */
	.PageBody.-video .category ul li { margin-bottom:40px; }
}
@media screen and (max-width:767px) { /* sp_3 6Plus */
	.PageBody.-video .category ul li { width:100%; }
	.PageBody.-video .category ul li .textArea { padding:16px 0 0 0; }
	.PageBody.-video .category ul li .textArea .name p.title { line-height:1.5; margin-top:10px; }

	.PageBody.-video { overflow:hidden; }
	.PageBody.-video #tags { display:flex; flex-wrap:wrap; padding:16px; margin:0 -1px -1px 0; }
	.PageBody.-video #tags li { display:flex; justify-content:left; align-items:center; width:50%; box-sizing:border-box; padding:8px 16px; min-height:44px; font-size:11px; line-height:1.2; letter-spacing:0; margin-right:0; border-radius:0; border-right:1px solid #fff; border-bottom:1px solid #fff; }
	.PageBody.-video #tags li.select { pointer-events:none; }

	.normal .PageBody.-video #tags li { border-color:rgba(255,255,255,1); }
	.dark .PageBody.-video #tags li { border-color:#222; }
}