@charset "UTF-8";
/* article view */
.article-view-wrapper .article-view-content {padding:40px 80px;border-bottom:1px solid var(--color-line-gray);}
.article-view-content .article-view-top {border-bottom:1px solid var(--color-line-gray);}
.article-view-content .article-view-top h2 {margin:0;padding:0;font-weight:normal;}
.article-view-content .article-view-top .date {color:var(--color-font-gray);padding:1rem 0;}
.article-view-content .article-content {padding:60px 0;}

.article-content video {max-width:100%;}

.article-view-button {padding:30px 20px;margin-bottom:20px;}
.article-view-button a {display:inline-block;padding:.75rem 1.5rem;border:1px solid #e8e8e8;}
.article-view-button a:hover {border-color:var(--color-theme);}

/* article list */
.article-one {display:flex;padding:20px;align-items:center;border-bottom:1px solid var(--color-line-gray);}
.article-one .img {flex:none;margin-right:30px;width:200px;height:150px;overflow:hidden;}
.article-one .img img {transition:var(--transition);}
.article-one .img:hover img {transform:scale(1.05);}
.article-one .title {flex:auto;color:black;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin-right:30px;}
.article-one .title.selected,
.article-one .title:hover {color:var(--color-theme);text-decoration:underline;}
.article-one .date {flex:none;color:var(--color-font-gray);}


/* video list */
.video-list {display:flex;flex-wrap:wrap;padding:10px 20px 20px;border-bottom:1px solid var(--color-line-gray);}
.video-list .video-one {width:285px;margin:25px 0;}
.video-list .video-one:nth-child(4n+2),
.video-list .video-one:nth-child(4n+3),
.video-list .video-one:nth-child(4n+4) {margin-left:33px;}

.video-list .video-one .img {width:285px;height:160px;overflow:hidden;}
.video-list .video-one .img img {transition:var(--transition);}
.video-list .video-one:hover img {transform:scale(1.05);}
.video-list .video-one p {margin:10px 0 0;padding:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:center;}
.video-list .video-one.selected p {color:var(--color-theme);}
.video-list .video-one:hover p {text-decoration:underline;}

