/* BiNDup の SYNC 機能の見た目のうち、このサイトで使う分（YouTube 動画・note 記事一覧）。
   bind.css の .js-sync の指定（回り込み解除）も同じく付ける。表示は _lab/sync.js。 */

.lab-sync::before,
.lab-sync::after {
  display: block;
  line-height: 0;
  content: "";
}
.lab-sync::after {
  clear: both;
}

.lab-sync.-video {
  display: inline-block;
  vertical-align: bottom;
}

.lab-sync.-note {
  display: inline-block;
}
.lab-sync > .noteArticle {
  display: inline-block;
  vertical-align: top;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 300px;
  height: 448px;
  padding: 16px;
  margin-right: 8px;
  margin-bottom: 8px;
  text-align: left;
}
.lab-sync > .noteArticle > .articleHeader {
  display: flex;
  justify-content: space-between;
}
.lab-sync > .noteArticle > .articleHeader > .author {
  display: flex;
  flex: 1;
  margin-bottom: 8px;
}
.lab-sync > .noteArticle > .articleHeader > .author > .avatar {
  padding-right: 8px;
}
.lab-sync > .noteArticle > .articleHeader > .author > .avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.lab-sync > .noteArticle > .articleHeader > .author > .authorBody {
  flex: 1;
}
.lab-sync > .noteArticle > .articleHeader > .author > .authorBody > div {
  font-size: 12px;
  color: #666;
}
.lab-sync > .noteArticle > .articleHeader > .author > .authorBody > div:first-child {
  line-height: 1.5;
}
.lab-sync > .noteArticle > .articleHeader > a.noteLogo {
  flex: 0 0 auto;
  margin-left: 16px;
  width: 62px;
  height: 36px;
  text-indent: -9999px;
  background: url(https://d2l930y2yx77uc.cloudfront.net/assets/e_note_logo-dc5b6fc19399b994613a6ded64da754897c0a9eef355242ed787c0b578a7a746.png) no-repeat center;
  background-size: 62px auto;
}
.lab-sync > .noteArticle > .articleEyecatch {
  margin-bottom: 8px;
  margin-right: -16px;
  margin-left: -16px;
  overflow: hidden;
}
.lab-sync > .noteArticle > .articleEyecatch > a > img {
  width: 100%;
}
.lab-sync > .noteArticle > .articleTitle {
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
  word-break: break-all;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 8px;
  font-weight: 700;
}
.lab-sync > .noteArticle > .articleBody {
  word-break: break-all;
  text-align: justify;
  font-size: 14px;
  line-height: 1.5;
}
.lab-sync > .noteArticle > .articleBody > a {
  color: #2cb696;
  display: block;
  margin-top: 8px;
}

/* 動画のサムネイルと再生ボタン（押すと YouTube のプレーヤーに置き換わる。_lab/sync.js） */
.lab-youtube {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.lab-youtube img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 4:3 のサムネイルの上下の黒い帯を切る */
}
.lab-youtube svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
}
.lab-youtube .lab-youtube-bg {
  fill: #212121;
  fill-opacity: 0.8;
  transition: fill 0.1s, fill-opacity 0.1s;
}
.lab-youtube:hover .lab-youtube-bg,
.lab-youtube:focus-visible .lab-youtube-bg {
  fill: #f00;
  fill-opacity: 1;
}
.lab-youtube:focus-visible {
  outline: 3px solid #6c3b19;
  outline-offset: 2px;
}